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

我仍然对 ajax 的使用感到不安，所以我的实现中存在一些漏洞。我正在尝试发布到一个控制器操作，该操作将调用存储过程来更新我的视图模型，然后重新加载将显示信息的 div。

阿贾克斯帖子：

$("#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>

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

您可以返回 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

您也可以尝试返回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
               }
            }
        }
    });
});