Creating an ASP.NET MVC View by Calling Multiple Actions
The typical way to create a view in ASP.NET MVC is to call an action method that uses the model to prepare the view data. The action method then calls the controller’s View method to create the view. However, you might want to call different action methods to create different parts of a view. For example, you might have a page that displays the latest news, weather, and sports. In that case, it might be useful to have one action method that handles the news, another that handles the weather, and a third that handles sports. This lets you render different views under different conditions, or to break up complex views into smaller, more manageable pieces.
This topic describes how to call action methods from within a view (parent view) that create subsections (child views) of the view.
Parent and Child Views
A parent view is a view that contains calls to action methods that return child views. The parent view contains most of the HTML for the rendered page. A child view contains only the markup that is required for one section of the view.
For example, a child view that creates a list might only contain the HTML for the list, as in the following example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
All other markup (the body, headers, and so on) would be contained in the parent view.
Invoking Action and RenderAction Helper Methods for Rendering Child Views
ASP.NET MVC provides HTML helper methods (extension methods) that render most types of HTML elements, such as forms and links, and that simplify common tasks such as input validation. Two HTML helpers are available for rendering child views: Action and RenderAction. These HTML helpers are in the ChildActionExtensions class.
The Action method returns the child view as a string, which can then be rendered directly. The RenderAction method renders the child view in place.
For example, suppose you have a child view named ChildList that consists of the HTML that is shown in the previous section. The controller contains the following action method for rendering the child view:
Function ChildList() As ActionResult
Return View()
End Function
public ActionResult ChildList()
{
return View();
}
Notice that in the controller, there is no specific way to render a parent view or a child view. You render a parent view and that view in turn renders the child views that it needs.
To call the action method and render the child view from the parent view, you can use either the Action helper method or RenderAction helper method as shown in the following example:
' One alternative (returns a string)
<%= Html.Action("ChildList") %>
' Another alternative (renders in place)
<% Html.RenderAction("ChildList") %>
// One alternative (renders a string)
<%= Html.Action("ChildList") %>
//Another alternative (renders in place)
<% Html.RenderAction("ChildList"); %>
Notice that because the Html.Action helper method returns a string, the equal sign (=) is required.
Passing Parameters to Helper Methods
You can call the same action method from multiple places in the parent view and pass it parameters to specify what is rendered. Both Action and RenderAction have method overloads that accept an object that contains pairs of parameter names and values. The following example shows markup for the RenderAction method that calls the Display action method. In this case, it passes an anonymous object that contains values for the name of the child view to render for that section. The markup renders a "news" section followed by a "weather" section.
<% Html.RenderAction("Display", New With {.section = "News"})%>
<% Html.RenderAction("Display", New With {.section = "Weather"})%>
<% Html.RenderAction("Display", new { section = "News" }); %>
<% Html.RenderAction("Display", new { section = "Weather" }); %>
The Display action method might look like the following example:
Function Display(ByVal section As String) As ActionResult
Return View(section)
End Function
public ActionResult Display(string section)
{
return View(section);
}
Calling Action Methods from Other Controllers or Areas
You can call an action method that is in a controller other than the current controller. To do so, you call an overload of the RenderAction method that lets you specify the name of the action method and the controller to use. The following example shows markup that calls the Display action method of the SectionController class. The first parameter (a string) is the name of the action method and the second parameter (also a string) is the name of the controller.
<% Html.RenderAction("Display", "Section") %>
<% Html.RenderAction("Display", "Section"); %>
If the action method you need is located in another area, you can pass the area name in an object as shown:
<% Html.RenderAction("Display", New With { .area = "Navigation" }) %>
<% Html.RenderAction("Display", new { area = "Navigation" }); %>
By using a different overload of the RenderAction method, you can also invoke a different controller in a different area.