Question

好的，所以我有这个局部视图（MVC应用程序的一部分），它只显示数据库中视图的数据。

@model IEnumerable<TransportPlanner.Models.TRANSPORT_PLANNER_VIEW>
<table>
    <tr>
       <th>@Html.CheckBox("HeaderCheck")</th>
        <th>@Html.DisplayNameFor(model => model.Status)</th>
        ....
        <th>@Html.DisplayNameFor(model => model.Volume)</th>
        <th>@Html.DisplayNameFor(model => model.Weight)</th>
        ....
    </tr>
    @foreach (var item in Model) {
        <tr>
            <th>@Html.CheckBox("RowCheck")</th>
            <td>@Html.DisplayFor(modelItem => item.Status)</td>
            ....
            <td>@Html.DisplayFor(modelItem => item.Volume)</td>
            <td>@Html.DisplayFor(modelItem => item.Weight)</td>
            ....
        </tr>
    }
</table>

我希望能够找到一种方法，我只能检查已检查行的Volume和Weight字段的值（检查后），并添加它们以获取总计（显示但未存储）。

例如，一旦我在屏幕上显示结果，并且我检查了3行（具有＆＃39;权重＆＃39;为5,10和15的值），则显示的值应为＆＃39; 30＆＃39; （权重之和）。同样，如果我删除了权重为＆＃39; 5＆＃39;的行的复选框，则显示的值应为＆＃39; 25＆＃39;

我的前端技能几乎不存在，我已经在互联网上鞭打了近12个小时，但没有办法做到这一点。我知道我需要使用JavaScript（或者像JQuery这样的一些东西）或Ajax（如果我在检查/取消选中它们时需要动态更新值）。

在不更新模型的情况下，实现这一目标的最佳方法是什么？我没有时间，因为我是我工作场所唯一的开发人员，这是我需要在3周内完成的一项艰巨任务的第一步。

Answer 1

您的@Html.CheckBox("RowCheck")生成无效的html（重复的id属性）。替换为

<input type="checkbox" class="checkbox" />

然后将类名添加到<td>和Volume

的Weight元素中

<td class="volume">@Html.DisplayFor(modelItem => item.Volume)</td>
<td class="weight">@Html.DisplayFor(modelItem => item.Weight)</td>

假设您要在表格页脚中显示总计，请将以下html添加到<table>元素中（请注意，您还应该使用表格中的<thead>和<tbody> < / p>

<table>
    ....
    <tfoot>
        <tr>
            <td></td>
            ....
            <td id="totalvolume"><td>
            <td id="totalweight"><td>
            ....
        </tr>
    </tfoot>
</table>

然后，您可以使用javascript / jquery来处理复选框的更改事件，并对每行中的值求和。使用jquery：

$('.checkbox').change(function() {
    var totalVolume = 0;
    var totalWeight = 0;
    var selected = $('.checkbox:checked'); // get the selected checkboxes
    $.each(selected, function(index, item) { // loop through the selected checkboxes
        var row = $(this).closest('tr'); // get the containing tr element
        totalVolume += Number(row.find('.volume').text());
        totalWeight += Number(row.find('.weight').text());
    })
    // display the totals
    $('#totalvolume').text(totalVolume);
    $('#totalweight').text(totalWeight);
});

注意，上面的代码假设属性Volume和Weight的值是数字（没有任何格式）

如何从MVC razor视图中的已检查行中获取特定值？

1 个答案: