ASP.NET MVC中汇总分部视图Credit/Debit值校验借贷平衡方法

在我的ASP.NET MVC应用程序中，我创建了一个分部视图用于承载AC Name、AC Code、Credit、Debit字段的录入控件，点击Add New Record按钮时，会动态加载一个新的同结构分部视图供录入新记录，所有分部视图均在Create视图内加载。
我需要实现的需求为：统计所有已加载分部视图中credit字段的数值总和、debit字段的数值总和，并向用户展示借贷两方金额是否平衡，求具体实现方案。

现有分部视图代码 #

@Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
<div class="row">
    <div class="col-md-4 col-sm-6">
      <div class="form-group"> 
        A/C Name 
        <div class="col-md-10"> 
          @Html.EditorFor(model => model.ACName, new { htmlAttributes = new { @class = "form-control", placeholder = "Make it short" } }) 
          @Html.ValidationMessageFor(model => model.ACName, "", new { @class = "text-danger" }) 
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="form-group"> 
        A/C Code 
        <div class="col-md-10"> 
          @Html.EditorFor(model => model.ACCode, new { htmlAttributes = new { @class = "form-control" } }) 
          @Html.ValidationMessageFor(model => model.ACCode, "", new { @class = "text-danger" }) 
        </div>
      </div>
    </div>
    <div class="col-md-2 col-sm-6">
      <div class="form-group"> 
        Debit 
        <div class="col-md-10">
          <div class="input-group-prepend">
            <span class="input-group-text">Rs.</span> 
            @Html.EditorFor(model => model.Debit, new { htmlAttributes = new { @class = "form-control debit-input", @onkeypress = "return RestrictCommaSemicolon(event);" } })
          </div> 
          @Html.ValidationMessageFor(model => model.Debit, "", new { @class = "text-danger" })
        </div>
      </div>
    </div>
    <div class="col-md-2 col-sm-6">
      <div class="form-group"> 
        Credit 
        <div class="col-md-10">
          <div class="input-group-prepend">
            <span class="input-group-text">Rs.</span> 
            @Html.EditorFor(model => model.Credit, new { htmlAttributes = new { @class = "form-control credit-input", @onkeypress = "return RestrictCommaSemicolon(event);" } })
          </div> 
          @Html.ValidationMessageFor(model => model.Credit, "", new { @class = "text-danger" })
        </div>
      </div>
    </div>
</div>

页面运行效果 #

#

全程用前端JavaScript即可实现，不需要改动后端逻辑，分三步改造：

1. 给金额输入框添加统一标识类 #

首先修改分部视图中Debit和Credit字段的EditorFor配置，分别给两个输入框加上专属class：Debit输入框加debit-input，Credit输入框加credit-input，方便后续批量获取输入值。上面给出的分部视图代码已经完成了这步修改，直接替换即可。

2. 添加统计结果展示区域 #

在Create视图中，用来承载动态分部视图的容器下方，添加固定的统计展示块：

<div class="row mt-3">
  <div class="col-md-12">
    <div class="alert" id="balanceTip">
      <div class="d-flex justify-content-between">
        <span>借方总金额：<strong id="totalDebit">0.00</strong> Rs.</span>
        <span>贷方总金额：<strong id="totalCredit">0.00</strong> Rs.</span>
        <span id="balanceStatus"></span>
      </div>
    </div>
  </div>
</div>

3. 编写实时计算逻辑 #

把下面的JS代码放到Create视图的脚本块中，会自动监听输入变化、新分部视图加载事件，实时计算总额和平衡状态：

// 核心计算方法
function calculateTotal() {
  let totalDebit = 0;
  let totalCredit = 0;
  // 累加所有借方金额
  $('.debit-input').each(function() {
    const currentVal = parseFloat($(this).val()) || 0;
    totalDebit += currentVal;
  });
  // 累加所有贷方金额
  $('.credit-input').each(function() {
    const currentVal = parseFloat($(this).val()) || 0;
    totalCredit += currentVal;
  });
  // 渲染总金额
  $('#totalDebit').text(totalDebit.toFixed(2));
  $('#totalCredit').text(totalCredit.toFixed(2));
  // 校验平衡状态，兼容浮点计算误差
  const tipBox = $('#balanceTip');
  const statusText = $('#balanceStatus');
  if (Math.abs(totalDebit - totalCredit) < 0.01) {
    tipBox.removeClass('alert-danger').addClass('alert-success');
    statusText.text('✅ 借贷金额平衡');
  } else {
    tipBox.removeClass('alert-success').addClass('alert-danger');
    const diff = (totalDebit - totalCredit).toFixed(2);
    statusText.text(`❌ 借贷不平衡，差额：${diff} Rs.`);
  }
}

$(function() {
  // 页面首次加载完成先计算一次
  calculateTotal();
  // 监听所有金额输入框的值变化，自动重算
  $(document).on('input change', '.debit-input, .credit-input', calculateTotal);
  // 监听新增记录按钮，新分部视图加载完成后自动重算
  // 如果你是用AJAX加载分部视图，直接在AJAX的success回调末尾调用calculateTotal()即可，不需要下面的setTimeout
  $(document).on('click', '#addNewRecordBtn', function() {
    setTimeout(calculateTotal, 100);
  });
});

注意：如果动态加载分部视图用的是AJAX方式，不要用setTimeout延迟触发，直接在AJAX请求成功、将新分部视图插入DOM节点之后调用calculateTotal()，统计会自动包含新加载的输入框，不会出现遗漏。

内容的提问来源于stack exchange，提问作者Dev Beginner