查看在 MVC 中单击后退时丢失的状态数据

Question

问题背景：

我有一个购物车系统，允许人们更新购物车中每件商品的数量。这是通过 ViewCartContents.cshtml 视图向我的控制器上名为 UpdateAllCartItems 的方法发出的 AJAX POST 请求完成的。所有项目都保存在名为 'Cart'.

的会话变量的列表中

问题：

如果用户将单个商品添加到他们的购物车（即 1 个单位），然后决定将数量更新为 5，则存储在会话列表中的购物车商品对象的购物车数量属性从 1 更新到 5. 当用户点击另一个页面然后点击 back 按钮回到购物车并且购物车数量回到 1 而不是 5. 我可以确认，如果我 刷新页面，那么金额是正确的 所以会话正在正确更新，看起来视图数据不正确。

以下图片说明了问题

1) 用户将商品添加到购物车：

2) 用户更新商品数量为5，购物车总数也更新为5件商品的价格：

3) 用户点击网站上的其他页面，然后点击返回按钮返回购物车。商品数量又回到了1，总计也只显示了1件商品的价格，显然这是不正确的。

代码：

AJAX Post 请求：

$(".updateCart").click(function () {

    $("tr.item").each(function () {

        var $prodId = $(this).find("td.prodId").html();
        var $prodQty = $(this).find("input").val();

        $.ajax({
            url: '@Url.Action("UpdateAllCartItems")',
            type: 'POST',
            data: {
                "id": $prodId,
                "qty": $prodQty
            },

            success: function (updatedCart) {

                document.getElementById("CartList").innerHTML = "";

                for (var i = 0; i < updatedCart.cartItems.length; i++) {
                    AddItemsToCartDropDown(updatedCart.cartItems[i].CartItemName, updatedCart.cartItems[i].CartItemQty, updatedCart.cartItems[i].CartItemPrice);
                }

                var html = '<span class="pull-left glyphicon glyphicon glyphicon-shopping-cart" id="CartItemsTotal"></span> <b>' + updatedCart.cartItems.length + '</b> item(s) <strong class="caret glyphicon glyphicon-triangle-bottom"></strong>';

                $('#totalCartPrice').html('<h3>Total: £' + updatedCart.cartPrice + '</h3>');

                document.getElementById("CartDropdownHolder").innerHTML = html;

            }

        });

    });
});

购物车控制器上的 UpdateAllCartItems 方法：

    public ActionResult  UpdateAllCartItems(string id, string qty)
    {
        CartItems = (List<CartItem>)Session["Cart"];

        foreach (var item in CartItems)
        {
            if (item.CartItemId == Convert.ToInt32(id))
            {
                item.CartItemQty = qty;
            }
        }

        CartItems = (List<CartItem>)Session["Cart"];

        string cartTotal = CalculateCartTotal(CartItems);

        Session["Cart"] = CartItems;

        return Json(new {cartItems = CartItems, cartPrice = cartTotal });    
    }

如果有人能告诉我如何解决这个令人沮丧的问题，我将不胜感激。

Answer 1

任何时候，当您在浏览器中按下后退按钮时，浏览器都会加载缓存的页面。因此，您看到的只有 1 个数量的页面是缓存页面。您正在使用 javascript 在客户端更改数量，浏览器不会缓存它。

这可以通过为加载页面的 MVC 操作使用 OutputCache 属性来解决。

一般使用OutputCache 属性通过在浏览器中缓存页面来提高性能。它还可以用于控制由浏览器完成的缓存。添加具有以下属性的 OutputCache 属性，页面将不会被浏览器缓存，每次您在浏览器中单击后退按钮时，它都会向服务器发送一个新请求以获取具有最新信息的页面。

[OutputCache(Duration=0, VaryByParam="none", Location=OutputCacheLocation.Client, NoStore=true)]
public ActionResult Cart()
{
//your code goes here.
}

希望对您有所帮助。

谢谢， R.文卡特桑

查看在 MVC 中单击后退时丢失的状态数据

View state data being lost on a back click in MVC

c#

ajax

model-view-controller

session

session-state