I am creating an ASP.NET Core 5.0 MVC project. I want to fetch quantity and multiply with subtotal .How can I fetch data in foreach loop. we want to fetch the quantity of each iteration and multiply with price and save it on the subtotal

@foreach (var item in Model)
{
    G_total  = item.Price;
    <tr>
        <td class="image" data-title="No">
             <img src="https://via.placeholder.com/100x100" alt="#">
        </td>
        <td class="product-des" data-title="Description">
            <p class="product-name"><a href="#">@item.Name</a></p>
            <p class="product-des">Maboriosam in a tonto nesciung eget  distingy magndapibus.</p>
        </td>
        <td class="price" data-title="Price">
            <span>[email protected] </span>
        </td>
        <td class="qty" data-title="Qty">
            <!-- Input Order -->
            <div class="input-group">
                <div class="button minus">
                    <button type="button" class="btn btn-primary btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
                        <i class="ti-minus"></i>
                    </button>
                </div>
                <input type="text" name="quant[1]" class="input-number" data-min="1" data-max="100" id="txtQuantity" value="1">
                    <div class="button plus">
                        <button type="button" class="btn btn-primary btn-number" data-type="plus" data-field="quant[1]">
                            <i class="ti-plus"></i>
                        </button>
                    </div>
            </div>
            <!--/ End Input Order -->
        </td>
        <td class="total-amount" data-title="Total">
            <span>@sub_total</span>
        </td>
        <td class="action" data-title="Remove">
            <a asp-controller="Cart"
               asp-action="Fnc_RemoveCart" asp-route-id="@item.ID">
               <i class="ti-trash remove-icon"></i>
            </a>
         </td>
    </tr>
}

@section scripts{
    
<script>
    $("#txtQuantity").each(function () {
        var total = 0;
        $(this).change(function () {
                if (!isNaN(this.value) && this.value.length != 0) {
                    total  = parseFloat(this.value);
                    alert(this.value);
                }
            })
        })
    </script>
}

CodePudding user response：

You have to replace ForLoop with ForEach loop. and update control id as mentioned.

<div class="text-center">
    <table>
        @{int liItemCnt = 1; }
        @for (int i = 1; i < 5; i  )
        {
            <tr>
                <td class="image" data-title="No">
                    <img src="https://via.placeholder.com/100x100" alt="#">
                </td>
                <td class="product-des" data-title="Description">
                    @*<p class="product-name"><a href="#">@item.Name</a></p>*@
                    @*<p class="product-des">Maboriosam in a tonto nesciung eget  distingy magndapibus.</p>*@
                </td>
                <td class="price" data-title="Price">
                    <span id="ItemPrice_@liItemCnt">10</span>
                </td>
                <td class="qty" data-title="Qty">
                    <!-- Input Order -->
                    <div class="input-group">
                        @*<div class="button minus">
                                <button type="button" class="btn btn-primary btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
                                    <i class="ti-minus"></i>
                                </button>
                            </div>*@
                        <input type="text" name="quant[1]" class="input-number" data-min="1" data-max="100" id="txtQuantity_@liItemCnt" onchange="updateSubTotal(@liItemCnt)">
                        <div class="button plus">
                            <button type="button" class="btn btn-primary btn-number" data-type="plus" data-field="quant[1]">
                                <i class="ti-plus"></i>
                            </button>
                        </div>
                    </div>
                    <!--/ End Input Order -->
                </td>
                <td class="total-amount" data-title="Total">
                    <span id="subTotal_@liItemCnt">0</span>
                </td>
            </tr>
            liItemCnt = liItemCnt   1;
        }
    </table>
</div>
@section scripts{

    <script>
        function updateSubTotal(fiRecord) {
            if (!isNaN($("#txtQuantity_"   fiRecord).val()) && $("#txtQuantity_"   fiRecord).val().length != 0) {
                var liQuantity = $("#txtQuantity_"   fiRecord).val();
                var loPrice = $("#ItemPrice_"   fiRecord).text();
                var liSubTotal = liQuantity * loPrice;
                $("#subTotal_"   fiRecord).text(liSubTotal);
            }
            else {
                $("#subTotal_"   fiRecord).text(0);
            }
        }
    </script>
}