Question

在我的模型中有以下属性： 1.十进制属性Total-值为10 2.一份巧克力及其价格清单 - 假设价值为A，价格为20，B价格为30

此模型传递给View。 View显示针对每个chocoloate的复选框。

当用户选中任何复选框时，需要通过添加相应的巧克力价格来更新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; };在首次呈现页面时评估为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));

如何在MVC5视图中为模型属性添加值？

2 个答案: