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

Question

我仍在学习MVC和ASP.Net Core，因此赞赏有关实践/方法的任何建议。

我有一个局部视图，在提交之前，需要在客户端上输入每个文本框的总和。这是该视图的代码段（共有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; }
}

结果：