ASP.NET Core购物车无刷新调整数量如何传递模型ID到控制器

实现思路 #

你现在使用的Html.ActionLink会触发页面同步跳转，要实现无刷新效果只需要把按钮点击逻辑替换为AJAX异步请求即可，循环中的商品ID可以通过HTML5的data-*自定义属性传递，不需要传递完整模型。 #

步骤1：修改Razor视图代码 #

主要是给商品行、数量、操作按钮加上唯一标识，方便后续JS定位更新：

@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">
                    <!-- 给表格加id方便后续操作 -->
                    <table class="align-content-lg-start table table-bordered" id="cartTable" width="100%" cellspacing="0">
                        <tbody id="cartBody">
                            @if (Model.Count() == 0)
                            {
                                <h1 id="emptyCartTip">Your cart is empty!</h1>
                            }
                            else
                            {
                                foreach (var item in Model)
                                {
                                    ViewBag.decSubtotal += item.IntQuantity * item.IntWebProduct.DecMsrp;
                                    <!-- 给每行绑定当前商品ID属性 -->
                                    <tr data-product-id="@item.IntWebProductId">
                                        <td class="text-left">@item.IntWebProduct.StrProductName</td>
                                        <td class="text-left">@item.IntWebProduct.DecMsrp.ToString("c")</td>
                                        <td class="text-left">
                                            <!-- 给操作按钮加公共类和操作类型标识 -->
                                            <a href="#" class="cart-action material-icons" data-action="add">add_circle_outline</a>
                                            <!-- 给数量套个类方便后续更新 -->
                                            <span class="product-quantity">@item.IntQuantity.ToString()</span>
                                            <a href="#" class="cart-action material-icons" data-action="remove">remove_circle_outline</a>
                                            <a href="#" class="cart-action material-icons float-right" data-action="delete">delete</a>
                                        </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.decTotal = (decimal)ViewBag.decSubtotal + (decimal)ViewBag.decShipping;
                        }
                        <!-- 给金额字段加id方便后续更新 -->
                        <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="font-weight-bold list-group-item">
                            Total<span class="float-right" id="total">@ViewBag.decTotal.ToString("c")</span>
                            <br />
                            <br />
                            @Html.ActionLink("Checkout", "Checkout", "Home")
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

步骤2：添加AJAX异步请求逻辑 #

在页面底部引入jQuery后添加以下JS代码，监听按钮点击事件，发送异步请求到控制器，成功后直接更新页面内容：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
    // 监听所有购物车操作按钮的点击事件
    $(".cart-action").click(function(e){
        e.preventDefault(); // 阻止默认的跳转行为
        const $btn = $(this);
        const $tr = $btn.closest("tr");
        const productId = $tr.data("product-id");
        const action = $btn.data("action");
        let requestUrl = "";

        // 根据操作类型匹配对应的控制器地址，注意替换为你实际的控制器名称
        switch(action){
            case "add": requestUrl = "/你的控制器名/AddOneToCart?intWebProductID=" + productId; break;
            case "remove": requestUrl = "/你的控制器名/RemoveOneFromCart?intWebProductID=" + productId; break;
            case "delete": requestUrl = "/你的控制器名/RemoveAllFromCart?intWebProductID=" + productId; break;
        }

        // 发送异步POST请求
        $.post(requestUrl, function(res){
            if(!res.success) return;
            
            // 更新当前商品的数量显示
            if(res.newQuantity > 0){
                $tr.find(".product-quantity").text(res.newQuantity);
            }else{
                // 数量为0时直接删除当前商品行
                $tr.remove();
                // 检查购物车是否为空，为空显示提示
                if($("#cartBody tr").length == 0){
                    $("#cartTable").before('<h1 id="emptyCartTip">Your cart is empty!</h1>');
                }
            }

            // 更新订单摘要的金额
            $("#subtotal").text(res.subtotalText);
            $("#total").text(res.totalText);
        });
    });
});
</script>

步骤3：调整控制器方法返回JSON数据 #

你原来的控制器业务逻辑不需要大改，只需要把原来的页面跳转逻辑改成返回JSON格式的操作结果即可，示例如下：

// 以AddOneToCart方法为例，其余两个方法修改逻辑一致
public ActionResult AddOneToCart(int intWebProductID)
{
    // 你原本的业务逻辑：找到对应购物车商品，数量+1，重新计算金额
    // ... 保留你的原有业务代码 ...
    decimal decShipping = 68.99m;
    decimal newSubtotal = // 计算得到的最新购物车小计
    decimal newTotal = newSubtotal + decShipping;
    int newQuantity = // 该商品操作后的最新数量

    return Json(new {
        success = true,
        newQuantity = newQuantity,
        subtotalText = newSubtotal.ToString("c"),
        totalText = newTotal.ToString("c")
    }, JsonRequestBehavior.AllowGet);
}

内容的提问来源于stack exchange，提问作者Scott Uphus