Here are the steps:

Step 1: Create the basic structure of your project, View, multiple partial views View Model,

structure

Step 2: Create your base Controller as in the following,

  1. public class BaseController: Controller
  2. {
  3. protected internal virtual CustomJsonResult CustomJson(object json = null, bool allowGet = true)
  4. {
  5. return new CustomJsonResult(json)
  6. {
  7. JsonRequestBehavior = allowGet ? JsonRequestBehavior.AllowGet : JsonRequestBehavior.DenyGet
  8. };
  9. }
  10. }
It is just small modifications if JSON is not provided handle it. And use this Controller as base controller.

Step 3: Add Class Controller helper which helps you to convert partial view into the string format as in the following,
  1. public static class ControllerHelper
  2. {
  3. public static string RenderPartialViewToString(ControllerContext context, string viewName, object model)
  4. {
  5. var controller = context.Controller;
  6. var partialView = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
  7. var stringBuilder = new StringBuilder();
  8. using(var stringWriter = new StringWriter(stringBuilder))
  9. {
  10. using(var htmlWriter = new HtmlTextWriter(stringWriter))
  11. {
  12. controller.ViewData.Model = model;
  13. partialView.View.Render(new ViewContext(controller.ControllerContext, partialView.View, controller.ViewData, new TempDataDictionary(), htmlWriter), htmlWriter);
  14. }
  15. }
  16. return stringBuilder.ToString();
  17. }
  18. }
Step 4: Your action code is below. I have added the 2 partial views. Basically we are converting the partial view with objects into the string format.
  1. public JsonResult CreatePartialView()
  2. {
  3. MyMultipleUpdateViewModel obj = new MyMultipleUpdateViewModel();
  4. obj.myTest1ViewModel = new MyTest1ViewModel();
  5. obj.myTest1ViewModel.MyTestUpdate = "Test1" + DateTime.Now.ToString();
  6. obj.myTest2ViewModel = new MyTest2ViewModel();
  7. obj.myTest2ViewModel.MyTestUpdate = "Test2" + DateTime.Now.ToString();
  8. var json = new
  9. {
  10. Header = "Header", Footer = "Footer"
  11. };
  12. return CustomJson(json).AddPartialView("_MyTest1PartialView", obj).AddPartialView("_MyTest2PartialView", obj);
  13. }
Step 5: In View display this JSON data ajax in below way . In below code PartialViewDiv1 and PartialViewDiv2 are two divs in which two partial views will be displayed. I have two partial views you may load more partial views.
  1. <h2>Index</h2>
  2. <script type="text/javascript" src="@Url.Content(" ~/Scripts/jquery-1.10.2.js ")"></script>
  3. <script type="text/javascript" src="@Url.Content(" ~/Scripts/jquery.unobtrusive-ajax.min.js ")"></script>
  4. <script>
  5. function GetData(url, onSuccess)
  6. {
  7. $.ajax(
  8. {
  9. type: "GET",
  10. cache: false,
  11. url: url,
  12. dataType: "json",
  13. success: function(data, textStatus, jqxhr)
  14. {
  15. onSuccess(data.Json, data.Html);
  16. },
  17. error: function(data, text, error)
  18. {
  19. alert("Error: " + error);
  20. }
  21. });
  22. return false;
  23. }
  25. function UpdateDiv(json, html)
  26. {
  27. $("#PartialViewDiv1").html(html[0]);
  28. $("#PartialViewDiv2").html(html[1]);
  29. }
  30. </script>
  31. <input type="button" onclick="GetData('/DisplayMutiplePartialView/CreatePartialView', UpdateDiv);" value="Display Multiple Partial View" />
  32. <br>
  33. <br>
  34. <div id="PartialViewDiv1"></div>
  35. <br>
  36. <br>
  37. <div id="PartialViewDiv2"></div>
  38. <br>
  39. <br>
Step 6: Run application and use URL,

It will appear as below.

index
I hope this article will help you to load multiple partial views in single action.