Views and UI Rendering in ASP.NET MVC Applications

  • Article

The ASP.NET MVC framework supports the use of a view engine to generate views (UI). By default, the MVC framework uses custom types (ViewPage, ViewMasterPage, and ViewUserControl) that inherit from the existing ASP.NET page (.aspx), master page (.master), and user control (.ascx) types as views.

In the typical workflow of an MVC Web application, controller action methods handle an incoming Web request. These action methods use the incoming parameter values to execute application code and to retrieve or update data model objects from a database. The methods then select a view that renders a response to a browser.

Rendering UI with Views

In the Model-View-Controller (MVC) pattern, views are intended exclusively for encapsulating presentation logic. They should not contain any application logic or database retrieval code. All application logic should be handled by the controller. A view renders the appropriate UI by using the data that is passed to it from the controller. This data is passed to a view from a controller action method by using the View method.

Note

The Views folder is the recommended location for views in the MVC Web project structure.

The following example shows how a view is rendered in a controller class.

Public Function Categories()
    Dim categories As List(Of Category) = northwind.GetCategories() 
    Return View(categories) 
End Function

public ActionResult Categories()
{
    List<Category> categories = northwind.GetCategories();
    return View(categories);
}

In the example, the parameter that is passed in the View method call is a list of Category objects that are passed to the view. The View method calls the view engine, which uses the data in the list to render to the view and to display it in the browser.

View Pages

A view page is an instance of the ViewPage class. It inherits from the Page class and implements the IViewDataContainer interface. The ViewPage class defines a ViewData property that returns a ViewDataDictionary object. This property contains the data that the view should display.

You can create a view page by using templates that are provided in a Visual Studio project for an ASP.NET Web application. By default, views are ASP.NET Web pages that are rendered by the MVC framework. The MVC framework uses URL routing to determine which controller action to invoke, and the controller action then decides which views to render.

The following example shows the markup for the Index.aspx page. This page is one of the default views that is generated when you create a new MVC project in Visual Studio. By convention, the name "Index" is given to the default view for an ASP.NET MVC application.

<h2><%= Html.Encode(ViewData("Message")) %></h2>
<p>
    To learn more about ASP.NET MVC visit <a href="https://asp.net/mvc" title="ASP.NET MVC Website">https://asp.net/mvc</a>.
</p>

<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<p>
    To learn more about ASP.NET MVC visit <a href="https://asp.net/mvc" title="ASP.NET MVC Website">https://asp.net/mvc</a>.
</p>

The @ Page directive contains the Inherits attribute, which defines the relationship between the application and the view. By default, the value of the Inherits attribute uses the following pattern: Application.Views.Controller.ViewPage

If you are working with a strongly typed view, the Inherits attribute uses the following pattern:

Application.Views.Controller.ViewPage<Type>

Master-Page Views

Like ASP.NET pages in Web Forms-based applications, ASP.NET page views (.aspx files) can use master pages to define a consistent layout and structure. In a typical site, the master page is bound to a content page in the @ Page directive of the content page. You can also use dynamic master pages (that is, you can assign a master page at run time) when you call the View method of the Controller class.

The following example shows the Site.master view, which is the master page that is generated when you create a new MVC project in Visual Studio.

<%@ Master Language="VB" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>

            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl")%>                
            </div> 

            <div id="menucontainer">

                <ul id="menu">              
                    <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%=Html.ActionLink("About", "About", "Home")%></li>
                </ul>

            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />

            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>
<%@ Master Language="VB" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>

            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl")%>                
            </div> 

            <div id="menucontainer">

                <ul id="menu">              
                    <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%=Html.ActionLink("About", "About", "Home")%></li>
                </ul>

            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />

            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>

            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div> 

            <div id="menucontainer">

                <ul id="menu">              
                    <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%= Html.ActionLink("About", "About", "Home")%></li>
                </ul>

            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />

            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>

Partial Views

A partial view enables you to define a view that will be rendered inside a parent view. Partial views are implemented as ASP.NET user controls (.ascx).

When a partial view is instantiated, it gets its own copy of the ViewDataDictionary object that is available to the parent view. The partial view therefore has access to the data of the parent view. However, if the partial view updates the data, those updates affect only the partial view's ViewData object. The parent view's data is not changed.

Helper Classes and Members for Rendering Views

When you create views, many tasks are repetitive or require special MVC framework knowledge. To address these scenarios and to make it easier to render HTML, the MVC framework includes helper classes and members. The design for helper classes is extensible so that you can add custom helper classes and members.

The MVC framework includes the following helpers:

  • Form helpers, which are for form elements such as radio buttons, list boxes, select buttons, text boxes, text areas, hidden content, and password fields.

  • URL helpers, which let you generate URLs for routing.

  • HTML helpers, which include functions to manage HTML strings, such as Encode, Decode, AttributeEncode, and RenderPartial.

You can access code-based rendering helpers by using properties that are added to the ViewPage, ViewUserControl, and ViewMasterPage classes.

Title

Description

Rendering a Form in ASP.NET MVC Using HTML Helpers

Explains how to use HTML helper methods to render a form in a view.

Passing Data in an ASP.NET MVC Application

Explains how to pass data from a controller to a view.

Walkthrough: Using Templated Helpers to Display Data in ASP.NET MVC

Demonstrates a way to automatically build a user interface that is based on a data model.

Creating an ASP.NET MVC View by Calling Multiple Actions

Explains how to create a parent view that contains multiplate child views.

See Also

Reference

View

Concepts

Controllers and Action Methods in ASP.NET MVC Applications

Other Resources

ASP.NET MVC 2