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调用完成后，更改不会显示。我怎样才能做到这一点？ 为Stephen编辑： 我有一个视图（主视图）调用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

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

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

您可以在购物车中放入物品后重新加载页面（不是最佳方式。）
您可以根据应用程序的“placeItemInShoppingcart”流程发送部分视图的内容，并使用javascript替换它。
您可以使用计时器（如Sandip Patel建议的那样）经常检查更新的dom并使用javascript替换它。
您可以使用signalR并在集线器通知上注册购物卡更改。这样，只有在实际更改时才需要刷新cartitems，并且可以在多个打开的浏览器窗口中使用它。

虽然总的来说你总是必须使用javascript来替换内容。没有C＃唯一的方法来做到这一点。

另外你可以切换到像knockoutjs或angular这样的javascript mvvm引擎，只需在客户端基于javascript对象呈现html。这将实际节省一些流量和服务器加载时间。

Answer 2

@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 3

您可以在计时器中调用ajax调用（CallPartiaView（））并重新绑定partialview。取一个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 () {
    }
});
}

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

3 个答案: