how to add value to model property in MVC5 view?

Question

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

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.

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; even tried using a temp variable and then assigning - doesn't work.

I am using 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):

@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

You can't access your @Model properties in that function like you would in Razor. 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.

@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>

Answer 2

Razor code is parsed in the server before its sent to the view, so function OnPriceChange(val) { @Model.BasePrice = @Model.BasePrice + val; }; function OnPriceChange(val) { @Model.BasePrice = @Model.BasePrice + val; }; evaluates to 100 = 100 + val; when the page is first rendered (assuming BasePrice = 100 ). In order to make this work, change the html to

<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

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