Ajax POST 控制器操作更新视图模型，然后重新加载 div

Question

我对 ajax 的使用仍然犹豫不决，因此我的实现中存在一些漏洞。我正在尝试 post 到控制器操作，该操作将调用存储过程来更新我的视图模型，然后重新加载将显示信息的 div。

Ajax Post:

$("#order-summary-panel").click(function(){
    $.ajax({
        url: '@Url.Action("GetOrderSummary", "Home")',
        type: 'POST',
        success: function() {
          alert("It Worked!")
        }
    });
});

控制器操作：

[HttpPost]
public ActionResult GetOrderSummary
{
    using (var entity = new OrderEntities())
    {
         var user = User.Identity.Name;
         var orderSummary = entity.uspGetOrderSummary(user).ToList();
         var viewModel = new OrderViewModel
         {
             OrderSummary = orderSummary
         };

         return View("Index", viewModel)
    }
}

Div 重新加载：

<div id="order-summary-panel">
    @if (Model != null && Model.OrderSummary != null)
    {
        foreach (var order in Model.OrderSummary)
        {
         // Display Orders
        }
    }
</div>

我认为我不应该返回完整视图，但我不确定如何在不这样做的情况下更新视图模型。任何帮助，将不胜感激。

Answer 1

您可以 return 一个 PartialView 并将结果放入 div，例如：

局部视图

[HttpPost]
public ActionResult GetOrderSummary
{
    using (var entity = new OrderEntities())
    {
         var user = User.Identity.Name;
         var orderSummary = entity.uspGetOrderSummary(user).ToList();
         var viewModel = new OrderViewModel
         {
             OrderSummary = orderSummary
         };

         return PartialView("Index", viewModel);
    }
}

在你的 javascript:

$("#order-summary-panel").click(function(){
    $.ajax({
        url: '@Url.Action("GetOrderSummary", "Home")',
        type: 'POST',
        success: function(data) {
            if (data) {  // check if data is defined
               $("#order-summary-panel").html(data);
            }
        }
    });
});

Json

您也可以尝试 return 一个 json 一个操作 html （这可以提高性能），例如：

[HttpPost]
public ActionResult GetOrderSummary
{
    using (var entity = new OrderEntities())
    {
         var user = User.Identity.Name;
         var orderSummary = entity.uspGetOrderSummary(user).ToList();
         var viewModel = new OrderViewModel
         {
             OrderSummary = orderSummary
         };

         return Json(new { success = true, order = viewModel }, JsonRequestBehavior.DenyGet);
    }
}

并且在您的 Javascript 中，您可以尝试读取这些属性：

$("#order-summary-panel").click(function(){
    $.ajax({
        url: '@Url.Action("GetOrderSummary", "Home")',
        type: 'POST',
        success: function(data) {
            if (data) {  // check if data is defined
               if (data.success) { // if success is true
                   alert("It Worked!"); 
                   // you could read data.order
               }
            }
        }
    });
});

Ajax POST 控制器操作更新视图模型，然后重新加载 div

Ajax POST to controller action to update view model, and then reload div

ajax

asp.net-mvc

ado.net

jquery

entity-framework

局部视图

Json