Posted by: Cirilo Meggiolaro | 04/15/2009

Tip of the day #183 – ASP.NET MVC – Views

Views in an ASP.NET MVC application are responsible for displaying data and providing controls for user input. OK, but what is the difference between the regular pages and the Views in ASP.NET MVC?

Regular pages are files that may be requested via web browser while the Views cannot be requested directly by its path. Instead, an action method available on a controller will request the View to be loaded, passing or not an object with the content to be displayed.

If you haven’t read the previous posts, it is a good time for it. Here are the links:

When a View is requested from an action method, the runtime will load the specified file and try to load it.

When a view is created, a file is added to the project and the following content is added as default:

<%@ Page Language=”C#” Inherits=”System.Web.Mvc.ViewPage” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; >
<head runat=”server”>
<title>Test</title>
</head>
<body>
<div>

</div>
</body>
</html>

It’s pretty similar to a regular web form but you may notice that it inherits from System.Web.Mvc.ViewPage.

To display information you on Views you have some different options:

  • Dynamic scripts: You may write scripts with C# / VB syntax delimited by the <% %> tags. An example of it is shown on the code below:

<%= User.Identity.Name %> // Writes the username to the view body.

  • HTML Helpers: Html helpers are extension methods that retrieve strings with html content such as input controls, image and so on. It makes easy to create user interfaces. In the next couple of days I am going to write about how to use them and how to create your own custom helpers. To consume a HTML helper from a view, you may use the following syntax:

<%= Html.TextBox(“name”) %> // Adds a textbox to the view
<%= Html.ValidationMessage(“name”, “*”) %> // Adds a validator to the textbox that acts in a simplistic manner a required field validator.
<%= Html.ActionLink(“Back to List”, “Index”) %> // Adds a link to the view that displays the text “Back To List” and that points to an action method called Index existing on the default controller.

  • ViewData dictionary: A dictionary is defined on the base controller class and is available and shared between the controller and the view. It is pretty straightforward to use. You may add data to the ViewData on the action method and accessing it on the View. The following code snippet shows both actions:

public ActionResult Index()
{
    /// Adds a string to the dictionary.
    ViewData[“Message”] = “This is a string added to the dictionary.”;

            /// Invokes a view with the same name
            /// than the action method to be loaded.

            return View();
        }

[…] View

<%= Html.Encode(ViewData[“message”]) %>

  • Strongly typed views: Instead of inheriting from System.Web.Mvc.ViewPage, you may inherit from different and custom types to reach your application needs. You will have Intellisense support and strong type binding. When you create a new View you have the following options:

    Bind: Select a type to bind to:

    Picture 1 - Selecting a type to inherit from.

    Picture 1 - Selecting a type to inherit from.

    Preset: Select a preset to generate views such as lists, create, edit, details or an empty view:

    Picture 2 - Selecting a preset to generate a view.

    Picture 2 - Selecting a preset to generate a view.

    Master pages: You may select a master page and a content placeholder id to add the content to:

    Picture 3 - Selecting a master page

    Picture 3 - Selecting a master page

    Partial Views: Checking this option will create a partial view. Partial views have the same functions than the regular user controls (ascx).

    On the next post we are going to check UI validation.

    Stay tuned!

    Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: