來自 IEnumerable 的模型<model>控制器無需重新加載頁面 aspnet 核心

Question

目標：我有一個電子商務網站。 我正在處理購物車頁面。 當用戶想要從他們購買的數量中添加一個或刪除一個時，我希望他們能夠按頁面上的加號或減號按鈕來刪除或添加一個而無需重新加載頁面。

問題：我有控制器來實現這一點，但我不知道如何在不重新加載頁面的情況下從 foreach 循環傳遞特定模型或模型中的 ID。

這是頁面：

@model IEnumerable<AirmotionEcommerceWebsite.TwebCartProduct>

@{
    ViewBag.Title = "My Cart";

    ViewBag.decSubtotal = 0;
    ViewBag.decShipping = 68.99;
    ViewBag.decStateTax = 0.078;
    ViewBag.decTax = 0;
    ViewBag.decTotal = 0;
}

<br />
<div class="container">
    <h2>Cart</h2>
    <div class="card-body">
        <div class="row">
            <div class="col-md-8">
                <div class="table-responsive">
                    <table class="align-content-lg-start table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <tbody>
                            @if (Model.Count() == 0)
                            {
                                <h1>Your cart is empty!</h1>
                            }
                            else
                            {
                                foreach (var item in Model)
                                {
                                    ViewBag.decSubtotal += item.IntQuantity * item.IntWebProduct.DecMsrp;

                                    <tr>
                                        <td class="text-left">@item.IntWebProduct.StrProductName</td>
                                        <td class="text-left">@item.IntWebProduct.DecMsrp.ToString("c")</td>
                                        <td class="text-left">
                                            
                                            
                                            
                                            @Html.ActionLink("add_circle_outline", "AddOneToCart", new { intWebProductID = item.IntWebProductId }, new { @class = "material-icons" })
                                            @item.IntQuantity.ToString()
                                            @Html.ActionLink("remove_circle_outline", "RemoveOneFromCart", new { intWebProductID = item.IntWebProductId }, new { @class = "material-icons" })
                                            @Html.ActionLink("delete", "RemoveAllFromCart", new { intWebProductID = item.IntWebProductId }, new { @class = "material-icons float-right" })
                                        </td>
                                    </tr>
                                }
                            }
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h2>Order Summary</h2>
                    </div>

                    <ul class="list-group list-group-flush">
                        @{
                            //ViewBag.decTax = ViewBag.decSubtotal * (decimal)ViewBag.decStateTax;
                            ViewBag.decTotal = (decimal)ViewBag.decSubtotal + (decimal)ViewBag.decShipping;/* + ViewBag.decTax;*/
                        }
                        <li class="list-group-item">Subtotal<span class="float-right">@ViewBag.decSubtotal.ToString("c")</span></li>
                        <li class="list-group-item">Shipping<span class="float-right">@ViewBag.decShipping.ToString("c")</span></li>
                        @*<li class="list-group-item">Tax<span class="float-right">@ViewBag.decTax.ToString("c")</span></li>*@
                    <li class="font-weight-bold list-group-item">
                        Total<span class="float-right">@ViewBag.decTotal.ToString("c")</span>
                        <br />
                        <br />
                        @Html.ActionLink("Checkout", "Checkout", "Home")
                    </li>
                    </ul>

                </div>
            </div>

        </div>
    </div>
</div>

Answer 1

我希望他們能夠按下頁面上的加號或減號按鈕，無需重新加載頁面即可刪除或添加一個按鈕。

首先，你可以使用js來改變html代碼。但是你不能使用帶有js變量的set ViewBag，所以在checkout時，你需要使用url來傳遞decSubtotal和decTotal這里是一個演示：

@{
    ViewBag.Title = "My Cart";

    ViewBag.decSubtotal = 0;
    ViewBag.decShipping = 68.99;
    ViewBag.decStateTax = 0.078;
    ViewBag.decTax = 0;
    ViewBag.decTotal = 0;
}

<br />
<div class="container">
    <h2>Cart</h2>
    <div class="card-body">
        <div class="row">
            <div class="col-md-8">
                <div class="table-responsive">
                    <table class="align-content-lg-start table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <tbody>
                            @if (Model.Count() == 0)
                            {
                                <h1>Your cart is empty!</h1>
                            }
                            else
                            {
                                foreach (var item in Model)
                                {
                                    ViewBag.decSubtotal += item.IntQuantity * item.IntWebProduct.DecMsrp;

                                    <tr>
                                        <td class="text-left">@item.IntWebProduct.StrProductName</td>
                                        <td class="text-left">@item.IntWebProduct.DecMsrp.ToString("c")</td>
                                        <td class="text-left">

                                            <button onclick="Add(this,@item.IntWebProduct.DecMsrp)" class = "material-icons">add_circle_outline</button>
                                            <span>@item.IntQuantity</span>
                                            <button onclick="Remove(this,@item.IntWebProduct.DecMsrp)">remove_circle_outline</button>
                                            <button onclick="Delete(this,@item.IntWebProduct.DecMsrp)">RemoveAllFromCart</button>

                                          
                                        </td>
                                    </tr>
                                }
                            }
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h2>Order Summary</h2>
                    </div>

                    <ul class="list-group list-group-flush">
                        @{
                            //ViewBag.decTax = ViewBag.decSubtotal * (decimal)ViewBag.decStateTax;
                            ViewBag.decTotal = (decimal)ViewBag.decSubtotal + (decimal)ViewBag.decShipping;/* + ViewBag.decTax;*/
                        }
                        <li class="list-group-item">Subtotal<span class="float-right" id="Subtotal">@ViewBag.decSubtotal.ToString("c")</span></li>
                        <li class="list-group-item">Shipping<span class="float-right" id="Shipping">@ViewBag.decShipping.ToString("c")</span></li>
                        @*<li class="list-group-item">Tax<span class="float-right">@ViewBag.decTax.ToString("c")</span></li>*@
                        <li class="font-weight-bold list-group-item">
                            Total<span class="float-right" id="Total">@ViewBag.decTotal.ToString("c")</span>
                            <br />
                            <br />
                           
                            <a id="Checkout" asp-controller="Home" asp-action="Checkout">Checkout</a>
                        </li>
                    </ul>

                </div>
            </div>

        </div>
    </div>
</div>
@section scripts
{
    <script>
        var decSubtotal = @ViewBag.decSubtotal;
        var decShipping =@ViewBag.decShipping;
        var decTotal=@ViewBag.decTotal;
        function Add(t, price) {
            decSubtotal += price;
            change();
            $(t).next()[0].innerText = parseInt($(t).next()[0].innerText) + 1;
            
        }
        function Remove(t, price) {
            decSubtotal -= price;
            change();
            if (parseInt($(t).prev()[0].innerText) == 1) {
                $(t).parent().parent().remove();
            } else {
                $(t).prev()[0].innerText = parseInt($(t).prev()[0].innerText) - 1;

            }
            
        }
        function Delete(t, price) {
            decSubtotal -= parseInt($(t).prev().prev()[0].innerText) * price;
            change();
            $(t).parent().parent().remove();
        }
        function change() {
            decTotal = decSubtotal + decShipping;
            var temp = document.getElementById("Subtotal").innerText.substr(0, 1);
            document.getElementById("Subtotal").innerText = temp + decSubtotal.toFixed(2);
            document.getElementById("Total").innerText = temp + decTotal.toFixed(2);
            if ($("#Checkout").attr("href").includes("?")) {
                href = href.split("?")[0];
            }
            $("#Checkout").attr("href",href + "?decSubtotal=" + decSubtotal.toFixed(2) + "&&decTotal=" + decTotal.toFixed(2));
        }
    </script>
} 

行動：

 public IActionResult Checkout(decimal decSubtotal, decimal decTotal)
        {
            return Ok();
        }

結果：