Как использовать Jquery с html помощниками Asp.Net Mvc Core 2.2

Question

Я использую Asp.net mvc core 2.2, приведенные ниже расчеты работают нормально, когда я пытаюсь в jsfiddle.net, однако расчет не работает, ничего не делаю, так как при попытке в Visual Studio отображается "0.00".

1. ссылочные ссылки существуют. Я проверил
2. Я включил сценарии в том же виде

Мои коды просмотра:

Код начинается здесь - таблица класса ="таблица таблицы в полоску">

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, вы должны написать код между тегами таблицы, который имеет "cls" с именем class

Answer 1

Попробуйте внести следующие изменения

1. В коде представления добавьте class = "unitprc" к <td></td>, где находится @Html.DisplayFor(c => item.SatisFiat1, new { @class = "unitprc" }), как показано ниже

   <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 возвращает STRING.Вам нужно превратить его в число:

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