Subscribe to Windows IT Pro
October 11, 2010 02:58 PM

Using RenderAction Components in ASP.NET MVC 2 Applications

How to generate just a portion of a view in an ASP.NET MVC 2.0 application
Dev Pro
InstantDoc ID #128800
Rating: (4)
Downloads
128800_DogApp.zip

Sometimes it makes sense to use application logic to generate just a portion of a view in an MVC 2.0 application. This is most useful when you want to display dynamic information on a page that is unrelated to the other dynamic content on the page. In that case, the data you need for the portion of the view isn't part of the model. Maybe it comes from an entirely different source, such as stock or weather data on a page that displays store locations in a selected metro area. Or you might want to implement a navigation component on the page that has some kind of complicated logic to decide what options to display to a user at a particular point, maybe based on recent user actions or permissions. Or it could display a user's shopping cart contents as she navigates your product catalog. The possibilities are unlimited.

There are many scenarios when it is useful to be able to write application logic in the controller to generate the data and then inject the data into the response stream to the view, outside of the rendering of the HTML for the main portion of the page.

The RenderAction() helper method calls into a controller method, then injects the action method's output into the response stream. You can pass whatever parameters you want from the view to the action method in order to customize the response.

If you stop and think about this a bit, it might seem a bit strange. A view calling into a controller? Is a view supposed to even know about controllers? Well, views and controllers aren't entirely decoupled, maybe not as much as we would want them to be for purity's sake. A trivial example is when a view contains an ActionLink method call to produce a link into a controller action method. The view needs to know what action methods are available in order to create the link. That sort of thing doesn't include any application logic, however, so RenderAction is definitely a step up from this scenario.
 
But what is actually happening with RenderAction is that the view is asking the controller for data to display on the resulting web page. In a way, it is a variation of letting the controller provide a model to the view, except with RenderAction the view is making the request outside of the initial instantiation of the view.

Using RenderAction
Let's look at an example of how to use RenderAction. Let's say that you have an MVC application that collects and manages information about the dogs in a kennel. The Dog controller has an action method called RenderList. Imagine that this method does some sort of complicated process to extract some information outside the main scope of the application. We'll simulate that by using the dogs object already defined in the controller. Here is the action method that the main view will call using RenderAction:

public ViewResult RenderList()
{
    // Used with RenderAction
    return View(dogs);
}


The RenderList partial view, shown below, produces a bulleted list of dogs, using a DogInfo partial view. The code displays a header, then loops through the dog collection passed to it as the model by the RenderList action method above. This is the component that you can drop into any view in the application.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<DogApp.Models.Dog>>" %>
<h3>Render Dog List</h3>
<ul>
    <% foreach (var dog in Model)
     { %>
    <li>
        <% Html.RenderPartial("DogInfo", dog); %></li>
    <% } %>
</ul>


The RenderList partial view generates the result of using RenderAction to call the RenderList action method.

The last piece of the solution is the action method and view that makes the call to the RenderList action method. This is the RenderActionView action method and its accompanying view. Below is the code for RenderActionView. Notice that it passes no ViewData or model to the view at all.

public ViewResult RenderActionView()
{
    // The main view to display
    return View();
}


And below is the RenderActionView view. Note that it has some static content, then calls RenderAction to drop the content generated by the RenderList action method into a particular location on the page. That call causes the RenderList action method to return a snippet of HTML to the view.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>


<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>RenderActionView</h2>

    <p>This view uses a RenderAction to display a list of dogs, using the RenderList partial view, which in turn uses the DogInfo partial view.</p>
    <% Html.RenderAction("RenderList", "Dog"); %>
</asp:Content>


Figure 1 shows the result of running the application, which displays the dog list using RenderAction.

Figure 1: Results of application that generates a partial view using RenderAction
Figure 1: Results of application that generates a partial view using RenderAction



Related Content:

ARTICLE TOOLS

Comments
  • van Rumste
    2 years ago
    Nov 02, 2010

    this is a great tutorial! good explained and very clear, also a thumbs up for the code included!

    thx
    Kennethvr
    http://www.spot-it.eu

You must log on before posting a comment.

Are you a new visitor? Register Here

advertisement

advertisement

Windows is a trademark of the Microsoft group of companies. Windows IT Pro is used by Penton Media Inc. under license from owner.