我想在 ASP.NET Core 5.0 MVC 中通过 jQuery 在 foreach 循环中获取第一次迭代的值

Question

我正在创建一个 ASP.NET Core 5.0 MVC 项目。我想获取数量并乘以小计。如何在 foreach 循环中获取数据。我们想获取每次迭代的数量并乘以价格并将其保存在小计中

@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>$@item.Price.00 </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>
}

Answer 1

您必须将 For 循环替换为 ForEach 循环。并如前所述更新控件 ID。

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

我想在 ASP.NET Core 5.0 MVC 中通过 jQuery 在 foreach 循环中获取第一次迭代的值

I want to fetch value of first iteration in foreach loop By jQuery in ASP.NET Core 5.0 MVC

asp.net

asp.net-core

jquery-ui