Returning Multiple partial views from single Controller action?

Question

I need to update Multiple from an Ajax call , I am confused as in how to return these Multiple views from the Controller Action method.

Answer 1

There is a very good example here....
http://rhamesconsulting.com/2014/10/27/mvc-updating-multiple-partial-views-from-a-single-ajax-action/

Create a helper method to package up the partial view...

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();
    }
}

Create a controller action to bundle the multiple partial views....

[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 });
}

Each partial view can use its own model if required or can be bundled into the same model as in this example.

Then use an AJAX call to update all the sections in one go:

$('#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.');
        }
    });
});

If you want to use this method for a GET request, you need to remove the [HttpPost] decorator and add JsonRequestBehavior.AllowGet to the returned JsonResult:

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