Question

在我的Razor视图中，我使用了一个项目列表，其中包含一个选项/取消选择的选项。我使用的模型是

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

    public bool IsSelected { get; set; }

    public string Item { get; set; }

    public double Total{get;set;}

}

我想将Grand Total显示为所有选定项目的总和（如果用户取消选择我想要更新Grand total的任何项目）。我可以在类似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>

Answer 1

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

您需要为总单元格添加一些标识符，然后以下面的方式修改javascript。

项目的循环内容:(已添加课程＆＃34;总计＆＃34;到总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 fiddle

Razor在JavaScript函数中执行

1 个答案: