ASP.NET MVC中Unit_Amount与Qty相乘计算总金额赋值Label问题

问题排查 #

• 输入框未配置对应类名：EditorFor生成的Unit_Amount、Qty输入框没有添加Unit_Amount、Qty类名，jQuery选择器无法命中对应元素
• 父元素选择逻辑错误：你的页面使用div布局，不存在tr标签，$(this).parents('tr')返回空对象，后续所有DOM操作都不生效
• 输入框取值方法错误：Unit_Amount是输入控件，不能用.text()获取输入值，需使用.val()
• 总金额Label无匹配标识：总金额的Label没有添加Total类，且LabelFor的参数写法错误，无法正常渲染目标字段
• 事件绑定不全：仅绑定了Qty的变化事件，修改Unit_Amount时总金额不会同步更新
• 缺少非法值兼容：输入为空或非数字时计算会返回NaN，需要做兼容处理

修复方案 #

1. 修改Razor视图代码 #

首先给所有控件添加对应类名，同时增加公共父容器避免后续扩展多组计算时互相冲突：

<!-- 增加公共父容器 -->
<div class="amount-group">
    <div class="col-md-3 col-sm-6">
       <div class="form-group">
           Unit Amount
          <div class="col-md-10">
           <!-- 新增Unit_Amount类 -->
           @Html.EditorFor(model => model.Unit_Amount, new { htmlAttributes = new { @class = "form-control Unit_Amount" } })
           @Html.ValidationMessageFor(model => model.Unit_Amount, "", new { @class = "text-danger" })
            </div>
       </div>
    </div>
    <div class="col-md-3 col-sm-6">
       <div class="form-group">
          Requesting Qty
            <div class="col-md-10">
             <!-- 新增Qty类 -->
             @Html.EditorFor(model => model.Qty, new { htmlAttributes = new { @class = "form-control Qty" } })
             @Html.ValidationMessageFor(model => model.Qty, "", new { @class = "text-danger" })
            </div>
          </div>
       </div>
    <div class="col-md-3 col-sm-6">
         <div class="form-group">
            Total Amount
              <div class="col-md-10">
               <!-- 修正LabelFor写法，新增Total类，假设模型字段为Total_Amount，没有对应字段可直接写<span class="form-control Total">0</span> -->
               @Html.LabelFor(model => model.Total_Amount, new { @class = "form-control Total" })
               @Html.ValidationMessageFor(model => model.Total_Amount, "", new { @class = "text-danger" })
              </div>
          </div>
    </div>
</div>

2. 修改jQuery代码 #

<script>
    $(document).ready(function () {
        // 同时绑定两个输入框的change和input事件，输入实时计算
        $('.Unit_Amount, .Qty').on('change input', function () {
            // 从公共父容器取值，避免多组计算冲突
            var $group = $(this).closest('.amount-group');
            // 空值默认转为0，避免NaN
            var rate = Number($group.find('.Unit_Amount').val()) || 0;
            var qty = Number($group.find('.Qty').val()) || 0;
            // 金额保留两位小数
            var total = (rate * qty).toFixed(2);
            $group.find('.Total').text(total);
        });
    });
</script>

内容的提问来源于stack exchange，提问作者smc develpments