JavaScript函数中的Razor执行

本文关键字：Razor 执行 函数 JavaScript | 更新日期: 2023-09-27 17:59:14

在我的Razor视图中，我使用了一个带有选择/取消选择选项的项目列表。我使用的型号是

  public class BorrowedItemModel
{
    public long Id { get; set; }
    public bool IsSelected { get; set; }
    public string Item { get; set; }
    public double Total{get;set;}
}

我想将总计显示为所有选定项目的总和（如果用户取消选择任何项目，我也想更新总计）。我可以在类似Javascript的函数中使用Razor吗？我尝试了这个代码，但没有显示结果

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

JavaScript函数中的Razor执行

Razor的执行是在服务器端完成的。由于逻辑执行应该发生在复选框选择更改的每个事件上，因此必须用javascript进行计算。

您需要为总单元格放置一些标识符，然后按以下方式修改javascript。

项目的循环内容：（将类"total"添加到总td标签

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

显示总计的div：

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

最后是脚本：

<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小提琴

相关文章：