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>

you can't assign js variable to c# store total in hidden field — Ehsan Sajjad
– Ehsan Sajjad, Commented Apr 21, 2014 at 11:14
Then whats the best way to do it ? Use javascript function to iterate through selected item prices and find grand_total Or is any better way to sugest? — Sebastian
– Sebastian, Commented Apr 21, 2014 at 11:15
BUt if user deselects some rows then how to refresh the values[javascript iteration is the way right?]? — Sebastian
– Sebastian, Commented Apr 21, 2014 at 11:29
yhe then js and set hidden field value again and on post get in action — Ehsan Sajjad
– Ehsan Sajjad, Commented Apr 21, 2014 at 11:42

Satpal · Accepted Answer · 2014-04-21 11:54:30Z

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

edited Apr 21, 2014 at 11:54

Satpal

134k13 gold badges168 silver badges171 bronze badges

answered Apr 21, 2014 at 11:49

Phani Vankadari

793 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Satpal Over a year ago

You don't need to add Mark this as answer if this solves the problem., If it solves OP problem surely he will do it. Also please format your code

Phani Vankadari Over a year ago

Thanks for the info. I will follow it from now on.

Sebastian Over a year ago

@PhaniVankadari Ys it solved my problems and a million thanks for showing an idea about dotnet fiddle

Collectives™ on Stack Overflow

Razor execution within a JavaScript function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related