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

在我的

\u布局

文件代码中，我通过一个razor操作调用调用了我的局部视图，如下所示

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

我的控制器中的

cartsummmary

操作如下所示：

[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调用所做的那样，不会显示更改。我该怎么做？ 为斯蒂芬编辑： 我有一个名为

cartinex

的视图（主视图），在该视图中，我显示用户向其购物车添加项目。用户可以根据自己的需要删除项目，从购物车中删除项目是通过

cartinex

视图中的ajax调用完成的。当用户删除项目时，此CartIndex视图显示项目已成功删除，直到这里一切正常。我有一个名为

cartsummmary

的局部视图，它显示购物车的摘要，如用户购物车中有多少物品等。。。我遇到的问题是，当用户从

cartinex

视图中删除项目时，

cartsummmary

也会发生同样的情况，以便它们可以显示相同数量的项目和总计，但在我的情况下，

cartinex

视图是我的主视图，它显示了正确的数据，但部分视图没有更新？下面是从购物车中删除商品的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>

$（函数（）{
//Document.ready->链接删除事件处理程序
$（“.del goods”）。单击（函数（）{
//从链接中获取id
var recordToDelete=$（this.attr（“数据id”）；
如果（recordToDelete！=''）{
//执行ajax post
$.post（“/ShoppingCart/RemoveFromCart”，{“id”：recordToDelete}，
功能（数据）{
//成功的请求到达这里
//更新页面元素
如果（data.ItemCount==0）{
$（“#行-”+data.DeleteId）.fadeOut（'slow'）；
}否则{
$（“#项计数-”+data.DeleteId）.text（data.ItemCount）；
}
$（“#购物车总数”）.text（data.cartotal）；
$（“#更新消息”）.text（data.message）；
$（“#购物车状态”）.text（'cart（'+data.CartCount+'）；
});
}
});
});

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

@动作（“购物车摘要”、“购物车”）
函数CallPartiaView（id）{
$.ajax({
类型：“POST”，
url:'@url.Action（“CartSummary”、“ShoppingCart”），
成功：函数（数据）{
$（“#divPartialView”）.html（“”）；
$（“#divPartialView”）.html（数据）；
},
错误：函数（）{
}
});
}

据我所知，如果shoppingcart的内容发生更改，您希望刷新html dom的一部分

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

您可以在将某些内容放入购物车后强制重新加载页面（这不是最好的方式）

您可以通过应用程序的“placeItemInShoppingcart”过程发送部分视图的内容，并使用javascript替换它

您可以使用计时器（正如Sandip Patel建议的那样）频繁检查更新的dom，并使用javascript替换它

您可以使用信号器并在购物卡更改的中心通知上注册。这样，如果有实际更改，您只需要刷新cartitems，并且您可以在多个打开的浏览器窗口上使用它

尽管最后您必须使用javascript来替换内容。要做到这一点，没有唯一的办法

---

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

@Dawar

根据您最后的评论

我如何刷新部分视图，或者换句话说，当通过ajax post从购物车中删除项目时，我如何更新部分视图？

Html

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

---

为什么不在ajax成功回调中从DOM中删除项目（为什么在添加新项目时刷新整个页面？）如何将项目添加到购物车？通过表单提交或ajax调用？@JSantosh通过表单提交而不是ajax调用。出于什么原因，我不需要ajax调用来通过它添加项目。@StephenMuecke因为我想将用户重定向到一个全新的url，那么我不需要刷新整个页面吗？@StephenMuecke在ajax回调中从DOM中删除项目，注意ajax回调停留在一个视图中而不是我的部分视图中，您会怎么做

[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
}

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)
    }
});
}