Razor execution within a JavaScript function

Question

In my Razor view i used a List of items with an option to select / deselect. The model i used is

  public class BorrowedItemModel
{
    public long Id { get; set; }

    public bool IsSelected { get; set; }

    public string Item { get; set; }

    public double Total{get;set;}

}

And i want to show the Grand Total as the Sum of all selected items ( If user deselects any item i want to update Grand total as well). Can i do this with Razor inside a Javascript like function? I tried this code but not showing result

 @model IList<RoyaltyDb.Models.BorrowedItemModel>
<script type="text/javascript">
$(document).ready(function () {
    $('.selectionItem').change(function() {
        recalculate();
    });        
});
function  recalculate()
{
    var total_cal=0;
    @{
        double total = 0;
        foreach(var item in Model)
        {
            if (item.IsSelected)
            {
                total += item.Royalty; 
            }
        }
    }
    //Can i asssign this grand total outside here ??
  }
</script>
 <div class="col-md-8">
<table id="borrowedtexts" class="table table-striped">
        <thead>
            <tr>
                <th>
                    Select
                </th>

                <th>
                    @Html.DisplayNameFor(model => model[0].Item)
                </th>

                <th>
                    @Html.DisplayNameFor(model => model[0].Total)
                </th>
            </tr>
        </thead>
        <tbody>
            @for (int item = 0; item < Model.Count(); item++)
            {
                <tr>
                    <td>
                        @Html.CheckBoxFor(modelItem => Model[item].IsSelected, new { @class="selectionItem"})
                        @Html.HiddenFor(modelItem => Model[item].Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => Model[item].Item, new { disabled = "true" })
                    </td>                     
                    <td>
                        @Html.DisplayFor(modelItem => Model[item].Total, new { disabled = "true" })
                    </td>
                </tr>
            }
        </tbody>
    </table>
     </div>
<div class="col-md-4">
//Want to show grand total here...
</div>

Answer 1

Razor execution is done on server side. As the logic execution should happen on every event of checkbox selection change, it has to be calculated in javascript.

You need to put some identifier for the total cells and then modify the javascript in the below manner.

The loop content for the item: (Added class "total" to total td tag

<tr>
    <td>
        @Html.CheckBoxFor(modelItem => Model[item].IsSelected, new { @class="selectionItem"}) 
        @Html.HiddenFor(modelItem => Model[item].Id)
    </td>
    <td>@Html.DisplayFor(modelItem => Model[item].Item, new { disabled = "true" })</td>
    <td class="total">@Html.DisplayFor(modelItem => Model[item].Total, new { disabled = "true" })</td>
</tr>

The div to show the grand total:

<div class="col-md-4" id="grandTotalDiv">
</div>

And finally the script:

<script type="text/javascript">
    $(document).ready(function () {
        $('.selectionItem').change(function () {
            recalculate();
        });
        recalculate();
    });

    function recalculate() {
        var total_cal = 0;
        $('input:checkbox.selectionItem').each(function () {
            var sThisVal = (this.checked ? parseFloat($(this).parent().siblings('.total').html()) : "");
            if(sThisVal !== NaN) {
                total_cal += sThisVal;
            }
        });
        $('#grandTotalDiv').html(total_cal);
    }
</script>

dotnet fiddle