如何在MVC5視圖中為模型屬性添加值？

Question

在我的模型中，有以下屬性： 1. 十進制屬性 Total-value 為 10 2. 巧克力及其價格列表-假設值為 A，價格為 20，B 價格為 30

這個模型被傳遞給視圖。 視圖顯示每個巧克力的復選框。

當用戶選中任何復選框時，需要通過添加相應的巧克力價格來更新 Total 屬性 - 這是不起作用的。

我編寫了一個函數，在選中/取消選中時為所有復選框調用該函數。 在這個函數中，無論我寫什么都會給我以下錯誤：

分配中的左側無效

我正在嘗試添加如下內容，假設檢查巧克力的價格是 20： @Model.Total = @Model.Total + 20; 甚至嘗試使用臨時變量然后分配 - 不起作用。

我正在使用 MVC5、jquery、javascript、bootstrap

請幫我解決這個問題。

以下是Index.cshtml的代碼（添加到基本價格的 javascript 函數是給出錯誤的函數）：

@model WebApplication8.Models.Cart

<h2>Index</h2>
<div>
    <h4>Cart</h4>
    <hr />
    <dl class="dl-horizontal">
         <dt>
            @Html.DisplayNameFor(model => model.BasePrice)
         </dt>
        <dd>
            @Html.DisplayFor(model => model.BasePrice)
        </dd>
    </dl>
     @foreach (var item in Model.Items)
    {
        <input type="checkbox" name="name" onchange="OnPriceChange(@item.Price)"    /> @item.Name
    }
</div>
<script>
    function OnPriceChange(val) {
        @Model.BasePrice = @Model.BasePrice + val;
    };
</script>

Answer 1

您無法像在 Razor 中那樣訪問該函數中的@Model屬性。 有幾種方法可以做到這一點，但假設您堅持使用onchange()方法，您將需要添加一些方法來訪問 JavaScript 中的 BasePrice 屬性。

@Html.DisplayFor(model => model.BasePrice, new {id = "basePrice"})

然后，您的腳本將是這樣的：

<script type="text/javascript">
    $(document).ready(function(){
        function OnPriceChange(val) {
            $("#basePrice").val($("#basePrice").val() + val);
        }
    });
</script>

Answer 2

Razor 代碼在發送到視圖之前在服務器中被解析，所以function OnPriceChange(val) { @Model.BasePrice = @Model.BasePrice + val; }; function OnPriceChange(val) { @Model.BasePrice = @Model.BasePrice + val; }; 計算結果為100 = 100 + val; 當頁面首次呈現時（假設BasePrice = 100 ）。 為了使這項工作，將 html 更改為

<dt>@Html.DisplayNameFor(model => model.BasePrice)</dt>
<dd id="baseprice">@Html.DisplayFor(model => model.BasePrice)</dd>

@foreach (var item in Model.Items)
{
  <label>
    <input type="checkbox" class="price" value="@item.Price" />
    @item.Name
  </label>
}

並將腳本修改為

var price = new Number('@Model.BasePrice'); // assign initial value
var element = ('#baseprice'); // cache it
$('.price').change(function() { // handle the change event of the checkboxes
  var item = new Number($(this).val()); // get the item value
  if ($(this).is(':checked')) {
    price += item;
  } else {
    price -= item;
  }
  element.text(price);
});

請注意，這是假設如果您選中復選框，您希望按商品數量增加基本價格，如果取消選中，則根據商品數量減少價格。

它也不格式化該值。 例如，如果您想輸出$100.00 ，那么您需要類似的東西

element.text('$' + price.toFixed(2));