[英]how to add value to model property in MVC5 view?
In my model there are following properties: 1. a decimal property Total- value is 10 2. a list of chocolates and their prices - let's say value is A with price 20 and B with price 30在我的模型中,有以下属性: 1. 十进制属性 Total-value 为 10 2. 巧克力及其价格列表-假设值为 A,价格为 20,B 价格为 30
This model is passed to View.这个模型被传递给视图。 View shows a checkbox against each chocoloate.视图显示每个巧克力的复选框。
When user checks any checkbox the Total property needs to be updated by adding the corresponding chocolate price - This is what's not working.当用户选中任何复选框时,需要通过添加相应的巧克力价格来更新 Total 属性 - 这是不起作用的。
I have written a function which is called for all the checkboxes when checked/unchecked.我编写了一个函数,在选中/取消选中时为所有复选框调用该函数。 Inside this function whatever I write it gives me the following error:在这个函数中,无论我写什么都会给我以下错误:
Invalid left-hand side in assignment分配中的左侧无效
I am trying to add like the following, lets say price of the checked chocolate is 20: @Model.Total = @Model.Total + 20;
我正在尝试添加如下内容,假设检查巧克力的价格是 20: @Model.Total = @Model.Total + 20;
even tried using a temp variable and then assigning - doesn't work.甚至尝试使用临时变量然后分配 - 不起作用。
I am using MVC5, jquery, javascript, bootstrap我正在使用 MVC5、jquery、javascript、bootstrap
Please help me solve this.请帮我解决这个问题。
Following is the code for Index.cshtml
( the javascript function to add to the base price is the one that gives an error):以下是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>
You can't access your @Model
properties in that function like you would in Razor.您无法像在 Razor 中那样访问该函数中的@Model
属性。 There are several ways you can do this, but assuming you stick with the onchange()
approach, you will need to add some way to access your BasePrice property in JavaScript.有几种方法可以做到这一点,但假设您坚持使用onchange()
方法,您将需要添加一些方法来访问 JavaScript 中的 BasePrice 属性。
@Html.DisplayFor(model => model.BasePrice, new {id = "basePrice"})
Then, your script would be something like this:然后,您的脚本将是这样的:
<script type="text/javascript">
$(document).ready(function(){
function OnPriceChange(val) {
$("#basePrice").val($("#basePrice").val() + val);
}
});
</script>
Razor code is parsed in the server before its sent to the view, so function OnPriceChange(val) { @Model.BasePrice = @Model.BasePrice + val; };
Razor 代码在发送到视图之前在服务器中被解析,所以function OnPriceChange(val) { @Model.BasePrice = @Model.BasePrice + val; };
function OnPriceChange(val) { @Model.BasePrice = @Model.BasePrice + val; };
evaluates to 100 = 100 + val;
计算结果为100 = 100 + val;
when the page is first rendered (assuming BasePrice = 100
).当页面首次呈现时(假设BasePrice = 100
)。 In order to make this work, change the html to为了使这项工作,将 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>
}
and modify the script to并将脚本修改为
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);
});
Note this assumes if you check a checkbox, you want to increase the base price by the amount of the item, and if you uncheck it, reduce the price by the amount of the item.请注意,这是假设如果您选中复选框,您希望按商品数量增加基本价格,如果取消选中,则根据商品数量减少价格。
It also does not format the value.它也不格式化该值。 For example if you wanted to output $100.00
, then you would need something like例如,如果您想输出$100.00
,那么您需要类似的东西
element.text('$' + price.toFixed(2));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.