如何使用 MVC Core 获得局部视图的运行总数？

Question

我仍在学习 MVC 和 ASP.Net 核心，因此对 practices/methods 的任何建议表示赞赏。

我有一个部分视图，我需要在提交之前在客户端输入金额时获取每个文本框输入的总和。这是视图的代码片段（总共有 8 个输入）：

            <span>Total allocated amount:</span>
            <span id="total"></span>
            <div class="form-group">
                <label asp-for="AllocatedPart" class="control-label">First</label>
                <input asp-for="AllocatedPart" class="form-control" />
                <span asp-validation-for="AllocatedPart" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="AllocatedSecond" class="control-label">Second</label>
                <input asp-for="AllocatedSecond" class="form-control" />
                <span asp-validation-for="AllocatedSecond" class="text-danger"></span>
            </div>

我使用以下代码将这个部分添加到我的视图中，因此它在页面中为数据库中的每个元素创建了一个部分视图。

@foreach (item in Model)
{
  // setup id for div
  var divIdAFC = "edit" + item.ID.ToString();

  <div id="@{@divIdAFC}">
    @await Html.PartialAsync("Partial/_edit", modelWithData)
  </div>
}

这是我的 jQuery 代码，它在整个页面上添加了所有部分视图内容：

$(".form-control").each(function () {
    var rowval = $(this).val();
    var val = parseInt(rowval);
    if (!isNaN(val)) {
        total = total + val;
    }
});
console.log(total);

我使用“@{@divIdAFC}”Div ID 尝试了上面的许多选择器组合，但没有找到正确的选择器组合。

如何将 jQuery 限制为特定局部视图中的内容？或者是否有一种 MVC 或 Razor 方法可以在不调用 jQuery 或 JavaScript 的情况下显示运行总数？

Answer 1

您可以在 foreach 循环中包含 jQuery 代码，然后计算目标分部视图中每个输入的总和。我根据你的代码做了一个简单的测试。

索引视图：

@model List<Allocated>

@{
    ViewData["Title"] = "Index";
}

@foreach (var item in Model)
{
// setup id for div
var divIdAFC = "edit" + item.ID.ToString();

<div id="@{@divIdAFC}">
    @await Html.PartialAsync("Partial/_edit", item)
</div>
<script>
        $(document).ready(function () {
            var total = 0;
            $("#@{@divIdAFC} .form-control").each(function () {

                    var rowval = $(this).val();
                    var val = parseInt(rowval);
                    if (!isNaN(val)) {
                        total = total + val;
                    }
                });
             $("#@{@divIdAFC} #total").text(total)

            $("#@{@divIdAFC} .form-control").on("change", function () {
                var total = 0;
                $("#@{@divIdAFC} .form-control").each(function () {

                    var rowval = $(this).val();
                    var val = parseInt(rowval);
                    if (!isNaN(val)) {
                        total = total + val;
                    }
                });
                $("#@{@divIdAFC} #total").text(total)
            })

        });
</script>
}

局部视图：

@model Allocated

<h1>Index</h1>
<span>Total allocated amount:</span>
<span id="total"></span>
<div class="form-group">
    <label asp-for="AllocatedPart" class="control-label">First</label>
    <input asp-for="AllocatedPart" class="form-control" />
    <span asp-validation-for="AllocatedPart" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="AllocatedSecond" class="control-label">Second</label>
    <input asp-for="AllocatedSecond" class="form-control" />
    <span asp-validation-for="AllocatedSecond" class="text-danger"></span>
</div>

控制器操作：

public IActionResult Index()
    {
        List<Allocated> allocateds = new List<Allocated>
        {
            new Allocated{ ID = 1, AllocatedPart = "11", AllocatedSecond = "11"},
            new Allocated{ ID = 2, AllocatedPart = "22", AllocatedSecond = "22"},
            new Allocated{ ID = 3, AllocatedPart = "33", AllocatedSecond = "33"}
        };
        return View(allocateds);
    }

型号：

public class Allocated
{
    public int ID { get; set; }
    public string AllocatedPart { get; set; }
    public string AllocatedSecond { get; set; }
}

结果：

如何使用 MVC Core 获得局部视图的运行总数？

How do you get a running total for a partial view using MVC Core?

jquery

asp.net-mvc-partialview

asp.net-core-mvc

如何使用 MVC Core 获得局部视图的 运行 总数？

How do you get a running total for a partial view using MVC Core?

jquery

asp.net-mvc-partialview

asp.net-core-mvc

如何使用 MVC Core 获得局部视图的运行总数？