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

Question

I'm using Asp.net mvc core 2.2 the calculations below works fine when I try in jsfiddle.net however the calculation is not working, do nothing as it displays "0.00" when I try in Visual Studio.

reference links exist I checked
I included scripts in the same view

My view codes:

Code starts here- 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>
   }
}

Total Sum:

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

Script:

<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>

I have been looking these codes about 9 hours and couldnt find any reason why it is not working. Can Foreach loop be the reason? PS: If you are going to try in jsfiddle.net you should write the code between table tag which has a "cls" named class

"the calculation is not working when I try in Visual Studio" - What does "is not working" mean? Wrong result? Is the script not executed? Any error messages? ... — Andreas
– Andreas, Commented Dec 31, 2018 at 14:32
The Results section does not correspond to your ASP code. It has "Total Sum", which does not appear in your ASP, but it omits all the table, tr and td tags, that are in your ASP code. Could you complete that part of your question? — trincot
– trincot, Commented Dec 31, 2018 at 14:49
@trincot Hi. Total sum section is at the botton section just shows the sum of all ‘sum’s and it doesnt need to be in the table or elsewhere “function calculatesum()” finds it by id ‘#gsum’. Btw code is alittle long and before that ‘sum’ in the rows arent working — Mhsn
– Mhsn, Commented Jan 1, 2019 at 12:22

Xueli Chen · Accepted Answer · 2019-01-01 10:34:00Z

1

Try to make the following changes

In the view code , add class = "unitprc" to the <td></td> where @Html.DisplayFor(c => item.SatisFiat1, new { @class = "unitprc" }) is located , like below
```
<td style="text-align:center" class = "unitprc">
   @Html.DisplayFor(c => item.SatisFiat1)
 </td>
```

2.Make some changes in your jquery like below

$("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));

        }

How it works

answered Jan 1, 2019 at 10:34

Xueli Chen

12.7k3 gold badges28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mhsn Over a year ago

Thank you very much. It worked :)). One last thing though. because of cultural difference the price uses "," instead of "." for example "370,23" that gives "NaN" for the sum. Do you know anyway to handle it

Xueli Chen Over a year ago

@Mayk , in your function calculateSum() , you could use ".replace(",",".")" at the end of ` var valor = $(this).closest("tr").find(".unitprc").html() ` to change the format of the price . Refer to stackoverflow.com/questions/21075595/…

Diodeus - James MacFarlane · Accepted Answer · 2018-12-31 15:06:44Z

0

jQuery is returning a STRING. You need to turn it into a number:

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

edited Dec 31, 2018 at 15:06

answered Dec 31, 2018 at 14:53

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related