MVC如何刷新布局页面中的部分视图答案

【问题标题】：MVC how to refresh partial view which is in layout pageMVC如何刷新布局页面中的部分视图
【发布时间】：2017-05-12 07:52:51
【问题描述】：

我想在 MVC5 中使用 ajax 单独重新加载部分视图。这是我在布局页面中的代码

 <div class="col-md-2 col-sm-5 col-xs-12 shopping_cart pull-right">                         
      @{ Html.RenderAction("ViewCart", "Cart"); }
  </div>

从购物车控制器查看购物车返回

 public ActionResult ViewCart()
 {
   //code
    return PartialView("ViewCart", CartList);
 }

我有一个将商品添加到购物车的功能。在行动中，我将更新的项目返回到部分视图。但它没有呈现更新的视图。特定的 div 没有重新加载。

        <script type="text/javascript">

            $(".addToCart").click(function (event) {
                //prevent default action from the link provided in html
                event.preventDefault();

                $.ajax({
                    url:$(this).attr("onclick"),
                    success:function(){
                        alert("Product added to cart");
                    }
                });//ajax end

            });//end click
        </script>



   public ActionResult(decimal pid, decimal cnt)
   {
     //code to add items into table
     return RedirectToAction("ViewCart");
   }

如何在不重新加载整个页面的情况下重新加载特定视图

【问题讨论】：

使用ajax加载功能。

标签： javascript c# jquery ajax asp.net-mvc-5

【解决方案1】：

使用jquery加载函数完成

        function loadPartialView() {
            //load cartitems to div
            $('#cart').load('/Cart/ViewCart/');          
        };

        $(function () {
            loadPartialView(); // first time
            // re-call the function each 5 seconds
            window.setInterval("loadPartialView()", 5000);
        });

    </script>

【讨论】：

【解决方案2】：

您将 id 设置为 Div

 <div id="cartdetails" class="col-md-2 col-sm-5 col-xs-12 shopping_cart pull-right">                         
  @{ Html.RenderAction("ViewCart", "Cart"); }  
</div>

Ajax 成功添加以下代码：

$("#cartdetails").load("/Cart/ViewCart");

【讨论】：