如何定期刷新部分视图 asp.net mvc 应用程序？

Question

我在_Layout 文件代码中通过如下所示的剃刀操作调用调用了部分视图。

@Html.Action("CartSummary", "ShoppingCart")

我的控制器中的CartSummary 操作如下所示：

[ChildActionOnly]
        public ActionResult CartSummary()
        {
            var cart = ShoppingCart.GetCart(this.HttpContext);
            var viewModel = new ShoppingCartViewModel
            {
                CartItems = cart.GetCartItems(),
                CartTotal = cart.GetTotal()
            };

            return PartialView("CartSummary", viewModel);
        }

我想每秒刷新一次局部视图，以反映对用户购物车所做的更改。目前，当我添加一个项目时，整个页面都会刷新，我可以在我的购物车中看到添加的项目，但是当我从购物车中删除项目时，因为它是由 Ajax 调用完成的，所以没有显示更改。我怎样才能做到这一点？ 为斯蒂芬编辑： 我有一个名为CartIndex 的视图（主视图），在此视图中我显示用户将项目添加到他/她的购物车。用户可以根据需要删除商品，从购物车中删除商品是通过 CartIndex 视图中的 ajax 调用完成的。当用户删除项目时，此 CartIndex 视图显示项目已成功删除，直到这里一切都很好。我有一个名为CartSummary 的部分视图，它显示购物车的摘要，例如用户购物车中有多少商品等...我遇到的问题是，当用户从CartIndex 视图中删除商品时，同样应该发生CartSummary 以便他们可以显示相同数量的项目和总数，但在我的情况下，我的主视图 CartIndex 视图显示正确的数据但部分视图未更新？下面是从购物车中删除商品的 ajax 调用。

<script type="text/javascript">
    $(function () {
        // Document.ready -> link up remove event handler
        $(".del-goods").click(function () {
            // Get the id from the link
            var recordToDelete = $(this).attr("data-id");
            if (recordToDelete != '') {
                // Perform the ajax post
                $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete },
                    function (data) {
                        // Successful requests get here
                        // Update the page elements
                        if (data.ItemCount == 0) {
                            $('#row-' + data.DeleteId).fadeOut('slow');
                        } else {
                            $('#item-count-' + data.DeleteId).text(data.ItemCount);
                        }
                        $('#cart-total').text(data.CartTotal);
                        $('#update-message').text(data.Message);
                        $('#cart-status').text('Cart (' + data.CartCount + ')');
                    });
            }
        });
    });
</script>

Answer 1

@Dawar 根据您的最后评论how can i refresh the partial or in other words how can i just update the partial view when an item is removed from the cart via ajax post ?

HTML

<div id="CartDiv"></div>

C#

[HttpPost]
public PartialViewResult RemoveItemFromCart(int itemId)
{  
    // Code to remove item from cart using the itemId
    List<Items> items=Get items from cart 
    return PartialView("_GetItemsInCart",items);// this is your partial view
}

Javascript 和 Jquery

function RemoveItemFromCart(itemId) {
// Show some loader image here
$.ajax({
    type: "post",
    url: '/Cart/RemoveItemFromCart?itemId='+itemId,      
    success: function (data) {                      
        $("#CartDiv").html(data); 
        // hide the loader image here           
    },
    error: function (error) {
        console.log(error)
    }
});
}

Answer 2

我认为，如果您的购物车内容发生变化，您希望刷新 html dom 的一部分。

有几种方法可以解决您的问题。

1. 您可以在将商品放入购物车后强制重新加载页面（这不是最好的方法。）
2. 您可以通过应用程序的“placeItemInShoppingcart”进程发送部分视图的内容，并使用 javascript 替换它。
3. 您可以使用计时器（如 Sandip Patel 建议的那样）经常检查更新的 dom 并使用 javascript 替换它。
4. 您可以使用 signalR 并在集线器通知上注册以进行购物卡更改。这样，您只需在有实际更改时刷新购物车，并且您可以在多个打开的浏览器窗口上使用它。

尽管总而言之，您将始终必须使用 javascript 来替换内容。没有 C# 唯一的方法来做到这一点。

此外，您可以切换到 javascript mvvm 引擎，如 knockoutjs 或 angular，并根据 javascript 对象在客户端呈现 html。这实际上会节省一些流量和服务器加载时间。

Answer 3

您可以在计时器中调用 ajax 调用 (CallPartiaView()) 并重新绑定部分视图。取一个 div 并将您的初始局部视图放入其中。

<div id="divPartialView">
  @Html.Action("CartSummary", "ShoppingCart")
</div>

function CallPartiaView(id) {
$.ajax({
    type: "POST",
    url: '@Url.Action("CartSummary", "ShoppingCart")',      
    success: function (data) {          
        $("#divPartialView").html('');
        $("#divPartialView").html(data);            
    },
    error: function () {
    }
});
}