Razor页面购物车商品数量与总价动态同步问题排查

我在开发Razor页面时遇到了购物车商品数量无法同步更新总价的问题，具体情况如下：

需求 #

用户可以直接修改商品数量（支持增减任意数值），而不是只能逐个移除商品。

当前问题 #

1. 目前仅实现了点击输入框触发请求，但无法处理数量减少的场景
2. 尝试使用onchange事件无效
3. 修改商品数量后，总价没有按预期更新

相关代码 #

Cart.cshtml #

@using Project.ViewModel
@model CartsViewModel

<div class="row">
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">Product Name</th>
                <th scope="col">Quantity</th>
                <th scope="col">Price</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            @foreach(Cart items in @Model.CartItems)
            {
                <tr>
                    <td>@items.Product.ProductName</td>
                    <td><input type="number" data-id="@items.ProductId" class="product-amount" value="@items.Count" /></td>
                    @* <td><input type="number" data-id="@items.ProductId" class="product-amount" value="@items.Count" onchange="amountChange(this)"/></td> *@
                    <td>$@items.Product.Price ea.</td>
                    <td>
                        <a class="btn btn-primary" asp-controller="ShoppingCart" asp-action="RemoveFromCart" asp-route-id="@items.ProductId">Remove</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>
<div class="row">
    <div class="col">
        <h6 class="text-end">Total: $@Model.Total</h6>
    </div>
</div>

<script src="~/lib/jquery/dist/jquery.js" type="text/javascript"></script>
<script>

    var productAmount = document.getElementsByClassName('product-amount')

    for(var prod in productAmount){
        productAmount[prod].onclick = function(data){
            var productId = $(this).attr("data-id");
            if(productId != ''){
                $.post("/ShoppingCart/AddToCart", {"id": productId},
                function(data){
                    console.log("Add to Cart Successful")
                })

                $.get("/ShoppingCart/Cart", function(data, status){
                    console.log(data)
                    console.log(status)
                })
            }
        }
    }
</script>

ShoppingCartController.cs（参考代码） #

public async Task<IActionResult> Cart()
{
    CartsViewModel cart = new CartsViewModel();
    ShoppingCartId = GetCartID();
    decimal total = GetCartTotal();

    cart.CartItems = await _dbContext.Carts.Where(c => c.CartId == ShoppingCartId).Include(p => p.Product).ToListAsync();
    cart.Total = Convert.ToDouble(String.Format("{0:0.00}", total)).ToString();

    return View(cart);
}

问题状态说明 #

• 修改前：购物车商品数量为1，总价显示对应金额
• 修改数量后：输入框内数量改为2，但总价未同步更新

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