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

Question

我正在使用 Asp.net mvc 核心 2.2 当我在 jsfiddle.net 中尝试时，下面的计算工作正常但是计算不起作用，当我在 Visual Studio.

中尝试时它显示“0.00”时什么也不做

我检查过存在参考链接
我在同一视图中包含了脚本

我的查看代码：

代码从这里开始- 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

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

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

Answer 2

尝试进行以下更改

在查看代码中，在@Html.DisplayFor(c => item.SatisFiat1, new { @class = "unitprc" })所在的<td></td>处添加class = "unitprc"，如下图
```
<td style="text-align:center" class = "unitprc">
   @Html.DisplayFor(c => item.SatisFiat1)
 </td>
```

2.Make 您的 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));

        }

工作原理

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

How to use Jquery with html helpers of Asp.Net Mvc Core 2.2

jquery

html-helper

asp.net-core-mvc

tag-helpers

asp.net-core-2.2