从单个控制器操作返回多个部分视图？答案

【问题标题】：Returning Multiple partial views from single Controller action?从单个控制器操作返回多个部分视图？
【发布时间】：2011-08-04 06:38:10
【问题描述】：

我需要从 Ajax 调用中更新 Multiple，我很困惑如何从 Controller Action 方法返回这些 Multiple 视图。

【问题讨论】：

你想达到什么目的？
我有一个页面有两个部分视图，一个显示图表，另一个显示图表中的项目列表，它们是在两个不同的部分视图中制作的。现在对于不同的分组，这两个值都会改变，一个明显的解决方法可能是将它们变成我想要避免的单个局部视图。它们可以独立地在我的应用中更频繁地使用。
为什么不简单地进行两次 ajax 调用？
我现在必须实施该解决方案，但我更喜欢单次调用服务器，但我无法找到一种简单的方法来做到这一点。谢谢

标签： asp.net-mvc-3

【解决方案1】：

您只能从一个函数返回一个值，因此您不能从一个操作方法返回多个部分。
如果您尝试将两个模型返回到一个视图，请创建一个包含您要发送的两个模型的视图模型，并使您的视图模型成为新的 ViewModel。例如

您的视图模型如下所示：

public class ChartAndListViewModel 
{
   public List<ChartItem> ChartItems {get; set;};
   public List<ListItem> ListItems {get; set;};
}

那么您的控制器操作将是：

public ActionResult ChartList() 
{
   var model = new ChartAndListViewModel();
   model.ChartItems = _db.getChartItems();
   model.ListItems = _db.getListItems();

   return View(model);
}

最后你的观点是：

@model Application.ViewModels.ChartAndListViewModel

<h2>Blah</h2>

@Html.RenderPartial("ChartPartialName", model.ChartItems);

@Html.RenderPartial("ListPartialName", model.ListItems);

【讨论】：

【解决方案2】：

这里有一个很好的例子....
http://rhamesconsulting.com/2014/10/27/mvc-updating-multiple-partial-views-from-a-single-ajax-action/

创建一个辅助方法来打包局部视图...

public static string RenderRazorViewToString(ControllerContext controllerContext, 
    string viewName, object model)
{
    controllerContext.Controller.ViewData.Model = model;

    using (var stringWriter = new StringWriter())
    {
        var viewResult = ViewEngines.Engines.FindPartialView(controllerContext, viewName);
        var viewContext = new ViewContext(controllerContext, viewResult.View, controllerContext.Controller.ViewData, controllerContext.Controller.TempData, stringWriter);
        viewResult.View.Render(viewContext, stringWriter);
        viewResult.ViewEngine.ReleaseView(controllerContext, viewResult.View);
        return stringWriter.GetStringBuilder().ToString();
    }
}

创建一个控制器动作来捆绑多个局部视图......

[HttpPost]
public JsonResult GetResults(int someExampleInput)
{
  MyResultsModel model = CalculateOutputData(someExampleInput);

  var totalValuesPartialView = RenderRazorViewToString(this.ControllerContext, "_TotalValues", model.TotalValuesModel);
  var summaryValuesPartialView = RenderRazorViewToString(this.ControllerContext, "_SummaryValues", model.SummaryValuesModel);

  return Json(new { totalValuesPartialView, summaryValuesPartialView });
}

如果需要，每个局部视图都可以使用自己的模型，或者可以捆绑到与本示例相同的模型中。

然后使用 AJAX 调用一次性更新所有部分：

$('#getResults').on('click', function () {

    $.ajax({
        type: 'POST',
        url: "/MyController/GetResults",
        dataType: 'json',
        data: {
            someExampleInput: 10
        },
        success: function (result) {
            if (result != null) {
                $("#totalValuesPartialView").html(result.totalValuesPartialView);
                $("#summaryValuesPartialView").html(result.summaryValuesPartialView);
            } else {
                alert('Error getting data.');
            }
        },
        error: function () {
            alert('Error getting data.');
        }
    });
});

如果要使用此方法进行 GET 请求，则需要移除 [HttpPost] 装饰器并将JsonRequestBehavior.AllowGet 添加到返回的JsonResult：

return Json(new { totalValuesPartialView, summaryValuesPartialView }, JsonRequestBehavior.AllowGet);

【讨论】：

我喜欢这个解决方案，因为它允许您返回页面上同一位置不存在的多个部分视图。

【解决方案3】：

也许这个解决方案可以帮助你：

http://www.codeproject.com/Tips/712187/Returning-More-Views-in-an-ASP-NET-MVC-Action

【讨论】：

不错，但仅适用于 asp.net 框架。不适用于 asp.net 核心。 ://