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

【问题标题】：Ajax POST to controller action to update view model, and then reload divAjax POST 到控制器操作以更新视图模型，然后重新加载 div
【发布时间】：2015-10-06 16:49:46
【问题描述】：

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

Ajax 帖子：

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

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

【问题讨论】：

标签： jquery ajax asp.net-mvc entity-framework ado.net

【解决方案1】：

您可以返回一个 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
               }
            }
        }
    });
});

【讨论】：