Returning Multiple partial views from single Controller action?

asp.net-mvc-3

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.

You can only return one value from a function so you can't return multiple partials from one action method.
If you are trying to return two models to one view, create a view model that contains both of the models that you want to send, and make your view's model the new ViewModel. E.g.

Your view model would look like:

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

Then your controller action would be:

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

   return View(model);
}

And finally your view would be:

@model Application.ViewModels.ChartAndListViewModel

<h2>Blah</h2>

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

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

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

Maybe this solution can help you:

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

Returning Multiple partial views from single Controller action?

Related

Recent Posts