如何将 Jquery 与 Asp.Net Mvc Core 2.2 的 html 助手一起使用

Question

我正在使用 Asp.net mvc core 2.2 当我在 jsfiddle.net 中尝试时，下面的计算工作正常但是计算不起作用，当我在 Visual Studio 中尝试时，它显示“0.00”，所以什么也不做。

1. 我检查了参考链接存在
2. 我在同一个视图中包含了脚本

我的查看代码：

代码从这里开始-table class="tbl table table-striped">

TABLE HEADERS

     @{ foreach (var item in Model.Tblstsabit)
      {

      <tr style="padding:50px;">
       <td style="text-align:center">
        @Html.DisplayFor(c => item.StokKodu)
       </td>
       <td style="text-align:center">
       @Html.DisplayFor(c => item.StokAdi)
       </td>
       <td style="text-align:center">
       @Html.DisplayFor(c => item.SatisFiat1, new { @class = "unitprc" })
        @*for this part I tried <input type="text" class="unitprc"> it works in jsfiddle.net but not in VS*@
       </td>
       <td style="text-align:center;">
       <input type="text" class="qtt" />
       </td>
        <td style="text-align:center;">
        <input type="number" max="100" class="col-9" />
        </td>
         <td style="text-align:center;">
          <input type="number" max="100" class="col-9" />
       </td>
        <td style="text-align:center;">
       <input type="text" readonly value="0.00" class="sum" />
       </td>
       <td style="text-align:center">
        <button type="submit" class="btn btn-danger" asp-action="Remove" asp-route-stokkodu="@item.StokKodu">
        <img src="~/resimler/garbage.png" />
       </button>
         </td>
       </tr>
   }
}

---

总和：

<div class="col-4">
<label>Total Sum</label>
<input id="gsum" value="0.00" readonly />
</div>

脚本：

<script>
    $(".tbl").on("change keyup keydown paste propertychange bind mouseover", function () {
        calculateSum();
    });

    // function    
    function calculateSum() {
        var sum = 0;
        $(".sum").each(function () {
            if (!isNaN(this.value) && this.value.length != 0) {

    var quantity = $(this).closest("tr").find("input.qtt:text").val();
    var valor = $(this).closest("tr").find("input.unitprc:text").val();

    var subTot = (quantity * valor);

    $(this).val(subTot.toFixed(2));

    sum += parseFloat(subTot.toFixed(2));
            }
        });
        $('#gsum').val(sum.toFixed(2));

    }
</script>

我一直在寻找这些代码大约 9 个小时，但找不到任何不工作的原因。 Foreach循环可能是原因吗？ PS：如果你打算在 jsfiddle.net 中尝试，你应该在 table 标记之间编写代码，它有一个名为 class 的“cls”

Answer 1

尝试进行以下更改

1. 在视图代码中，将class = "unitprc"添加到@Html.DisplayFor(c => item.SatisFiat1, new { @class = "unitprc" })所在的<td></td>，如下所示

   <td style="text-align:center" class = "unitprc">
      @Html.DisplayFor(c => item.SatisFiat1)
    </td>
   

2.在你的 jquery 中进行一些更改，如下所示

$("input.qtt:text").on("change paste keyup" ,function () {
            calculateSum();
        });

        // function
        function calculateSum() {
            var sum = 0;
            $(".sum").each(function () {
                if (!isNaN(this.value) && this.value.length != 0) {

                    var quantity = $(this).closest("tr").find("input.qtt:text").val();
                    var valor = $(this).closest("tr").find(".unitprc").html();

                    var subTot = (quantity * valor);

                    $(this).val(subTot.toFixed(2));

                    sum += parseFloat(subTot.toFixed(2));
                }
            });
            $('#gsum').val(sum.toFixed(2));

        }

它是如何工作的

Answer 2

jQuery 正在返回一个字符串。你需要把它变成一个数字：

var quantity = parseFloat($(this).closest("tr").find("input.qtt:text").val());