As you were navigating around the MVC site in your web browser you might have noticed that the URLs are quite different from a normal ASP.NET web site. They do not contain file extensions and they do not match up with the underlying folder structure. These URLs are mapped to action methods and controllers with a set of classes that belong to the routing engine, which is located in the System.Web.Routing assembly.

In the previous example you created a simple list view for products. This list view was based on the standard List template, which renders the following snippet for each Product in the database being displayed:

If you examine the generated HTML markup of the final page you should see that this becomes the following:

HTML

<td>
  <a href="/Products/Edit/2">Edit</a> |
  <a href="/Products/Details/2">Details</a>
</td>

These URLs are made up of three parts:

Each of these components is defined in a route, which is set up in the Global.asax.cs file (or the Global.asax.vb file for VB) in a method called RegisterRoutes. When the application first starts it calls this method and passes in the System.Web.Routing.RouteTable.Routes static collection. This collection contains all of the routes for the entire application.

The first method call tells the routing engine that it should ignore all requests for .axd files. When an incoming URL matches this route the engine will completely ignore it and allow other parts of the application to handle it. This method can be very handy if you want to integrate Web Forms and MVC into a single application. All you need to do is ask the routing engine to ignore .aspx and .asmx files.

The second method call defines a new Route and adds it to the collection. This overload of MapRoute method takes three parameters. The first parameter is a name, which can be used as a handle to this route later on. The second parameter is a URL template. This parameter can have normal text along with special tokens inside of braces. These tokens will be used as placeholders that are filled in when the route matches a URL. Some tokens are reserved and will be used by the MVC routing engine to select a controller and execute the correct action. The final parameter is a dictionary of default values. You can see that this "Default" route matches any URL in the form /controller/action/id where the default controller is "Home," the default action is "Index," and the "id" parameter defaults to an empty string.

When a new HTTP request comes in, each route in the RouteCollection tries to match the URL against its URL template in the order that they are added. The first route that is able to do so fills in any default values that haven't been supplied. Once these values have all been collected then a Controller is created and an action method is called.

Routes are also used to generate URLs inside of views. When a helper needs a URL it will consult each route (in order again) to see if it is able to build a URL for the specified controller, action, and parameter values. The first route to match will generate the correct URL. If a route encounters a parameter value that it doesn't know about, it becomes a query string parameter in the generated URL.

The following snippet declares a new route for an online store that allows for two parameters: a category and a subcategory. Assuming that this MVC application has been deployed to the root of a web server, requests for the URL http://servername/Shop/Accessories/Helmets will go to the "List" action on the "Products" controller with the parameters Category set to "Accessories" and Subcategory set to "Helmets."

Finally, you can also add constraints to the Route that will prevent it from matching a URL unless some other condition is met. This can be a good idea if your parameters are going to be converted into complex data types such as date times later on and require a very specific format. The most basic kind of restraint is a string, which is interpreted as a regular expression that a parameter must match for the route to take effect. The following route definition uses this technique to ensure that the zipCode parameter is exactly five digits:

The other type of constraint is a class that implements IRouteConstraint. This interface defines a single method Match that returns a Boolean value indicating whether the incoming request satisfies the constraint. There is one implementation of IRouteConstraint out of the box called HttpMethodConstraint. This constraint can be used to ensure that the correct HTTP method, such as GET, POST, HEAD, or DELETE is used. The following route only accepts HTTP POST requests:

The URL routing classes are very powerful and flexible, and allow you to easily create "pretty" URLs. This can aid users navigating around your site and even improve your site's ranking with search engines.

All of the action methods in previous examples do not accept any input from outside of the application to perform their tasks; they rely entirely on the state of the model. In real-world applications this is an unlikely scenario. The ASP.NET MVC framework makes it very easy to parameterize action methods from a variety of sources.

As mentioned in the previous section, the "Default" route exposes an "id" parameter, which defaults to an empty string. To access the value of the "id" parameter from within the action method you can just add it to the signature of the method itself as the following snippet shows:

When the MVC framework executes the Details action method it will search through the parameters that have been extracted from the URL by the matching route. These parameters are matched up with the parameters on the action method by name and then passed in when the method is called. As the details method shows, the framework is even able to convert the type of the parameter on the fly. Action methods can also retrieve parameters from the query string portion of the URL and from HTTP POST data using the same technique.

Additionally, an action method can accept a parameter of the FormValues type that will aggregate all of the HTTP POST data into a single parameter. If the data in the FormValues collection represents the properties of an object, you can simply add a parameter of that type and a new instance will be created when the action method is called. The Create action, shown in the following snippet, uses this to construct a new instance of the Product class and then save it:

<p>
  <label for="ProductID">ProductID:</label>
  <input id="ProductID" name="ProductID" type="text" value="" />
</p>
<p>
  <label for="Name">Name:</label>
  <input id="Name" name="Name" type="text" value="" />
</p>

An area is a self-contained part of an MVC application that manages its own models, controllers, and views. You can even define routes specific to an area. To create a new area, select Add

Figure 21-7. Figure 21-7

After you click Add, many new files are added to your project to support the area. Figure 21-8 shows a project with two areas added to it named Shop and Blog, respectively.

Figure 21-8. Figure 21-8

In addition to having its own controllers and views, each area has a class called AreaNameAreaRegistration that inherits from the abstract base class AreaRegistration. This class contains an abstract property for the name of your area and an abstract method for integrating your area with the rest of the application. The default implementation registers the standard routes.

In order to link to a controller which is inside another area, you need to use an overload of Html.ActionLink that accepts a routeValues parameter. The object you provide for this parameter must include an area property set to the name of the area which contains the controller you are linking to.

One issue that is frequently encountered when adding area support to a project is that the controller factory becomes confused when multiple controllers have the same name. To avoid this issue you can limit the namespaces that a route will use to search for a controller to satisfy any request. The following code snippet limits the namespaces for the global routes to MvcApplication.Controllers, which will not match any of the area controllers.

In addition to just creating or updating it, a model binder is able to decide whether the model instance that it operating on is valid. The results of this decision are found in the ModelState property. Model binders can pick up some simple validation errors by default, usually with regard to incorrect types. Figure 21-9 shows the result of attempting to save a Product when the form is empty. Most of these validation errors are based on the fact that these properties are non-nullable value types and require a value.

Figure 21-9. Figure 21-9

The user interface for this error report is provided by the Html.ValidationSummary call, which is made on the view. This helper method examines the ModelState and if it finds any errors it renders them as a list along with a header message.

You can add additional validation hints to the properties of the model class by marking them up with using the attributes in the System.ComponentModel.DataAnnotations assembly. Because the Product class is created by LINQ to SQL you should not update it directly. The LINQ to SQL generated classes are defined as partial so you can extend them but there is no easy way to attach metadata to the generated properties this way. Instead, you need to create a metadata proxy class with the properties you want to mark up, provide them with the correct data annotation attributes, and then mark up the partial class with a MetadataTypeAttribute identifying the proxy class. The following code snippet shows this technique being used to provide some validation metadata to the Product class:

Now, attempting to create a new Product with no name and a negative "Days to Manufacture" produces the errors shown in Figure 21-10.

Figure 21-10. Figure 21-10

At times you have large areas of user interface markup that you would like to reuse. In the ASP.NET MVC framework a re-usable section of view is called a partial view. Partial views act very similar to views except that they have an .ascx extension and inherit from System.Web.Mvc.ViewUserControl. To create a partial view, check the Create a Partial View checkbox on the same Add View dialog that you use to create other views.

To render a partial view you can use the Html.RenderPartial method. The most common overload of this method accepts a view name and a model object. Just as with a normal view, a partial view can be either controller-specific or shared. Once the partial view has been rendered, its HTML markup is inserted into the main view. This code snippet renders a "Form" partial for the current model:

When you use the Add View dialog to add items to your project, Visual Studio 2010 is actually executing a T4 template, which determines the code that will be generated. The View Content drop-down determines which template will be run. If you want to edit them you can find them in the C:Program FilesMicrosoft Visual Studio 10.0Common7IDEItemTemplateslanguageWebMVCv2CodeTemplatesAddView folder where language is either "CSharp" or "VisualBasic."

Editing these files directly will make the change across all MVC projects on the local machine, but you cannot use this technique to create project-specific templates. It is also very hard to version control these files effectively with the rest of your application. You can get around both of these issues by creating a CodeTemplatesAddView folder under the root of your project and copying the T4 templates into it as shown in Figure 21-11 When the Add View dialog is populating the View Content drop-down list it will use these templates instead of the global ones.

Additionally, you can create your own templates by adding T4 template files into this folder. Figure 21-11 shows the template file MyViewTemplate.tt and Figure 21-12 shows "MyViewTemplate" showing up in the drop-down list.

Figure 21-11. Figure 21-11

Figure 21-12. Figure 21-12

Custom templates can be host specific and the Host is of type MvcTextTemplateHost, which contains all of the properties defined by the Add View dialog. See Chapter 14, "Code Generation with T4," for more information about creating T4 templates.

Dynamic Data is a feature of ASP.NET Web Forms that allows you to render UI based on metadata associated with the model. Although ASP.NET MVC does not integrate directly with Dynamic Data, a number of new features in ASP.NET MVC 2.0 are similar in spirit. Templates in ASP.NET MVC 2.0 are able to render parts of your model in different ways, whether they are small and simple such as a single string property or large and complex like the whole product class. The templates are exposed by Html helper methods. There are templates for display and templates for editing purposes.

Display Templates

The Details view that is created by the Add View dialog contains code to render each property. Here is the markup for just two of these properties:

C#

<p>
  ProductID:
  <%= Html.Encode(Model.ProductID) %>
</p>
<p>
  Name:
  <%= Html.Encode(Model.Name) %>
</p>

VB

<p>
  ProductID:
  <%= Html.Encode(Model.ProductID) %>
</p>
<p>
  Name:
  <%= Html.Encode(Model.Name) %>
</p>

With the new templates feature you can change this to the following:

C#

<p>
  <%= Html.LabelFor(x => x.ProductID) %>
  <%= Html.DisplayFor(x => x.ProductID) %>
</p>
<p>
  <%= Html.LabelFor(x => x.Name) %>
  <%= Html.DisplayFor(x => x.Name) %>
</p>

VB

<p>
  <%: Html.LabelFor(Function(x As ProductsMVC.Product) x.ProductID)%>
  <%: Html.DisplayFor(Function(x As ProductsMVC.Product) x.ProductID) %>
</p>
<p>
  <%: Html.LabelFor(Function(x As ProductsMVC.Product) x.Name)%>
  <%: Html.DisplayFor(Function(x As ProductsMVC.Product) x.Name) %>
</p>

This has a number of immediate advantages. First, the label is no longer hard coded into the view. Because the label is now strongly typed it will be updated if you refactor your model class. In addition to this you can apply a System.ComponentModel.DisplayName attribute to your model (or to a model metadata proxy) to change the text that is displayed to the user. This helps to ensure consistency across the entire application. The following code snippet shows the Product metadata proxy with a couple of DisplayNameAttributes and Figure 21-13 shows the rendered result:

C#

public class ProductValidationMetadata
{
    [DisplayName("ID")]
    public int ProductID { get; set; }

    [Required, StringLength(256)]
    [DisplayName("Product Name")]
    public string Name { get; set; }

    [Range(0, 100)]
    public int DaysToManufacture { get; set; }
}

VB

Public Class ProductMetaData
    <DisplayName("ID")>
    Property ProductID As Integer

    <Required(), StringLength(256)> _
    <DisplayName("Product Name")>
    Property Name As String

    <Range(0, 100)>
    Property DaysToManufacture As Integer
End Class

The DisplayFor helper is also providing a lot of hidden flexibility. It is selecting a template based on the type of the property that it is displays. You can override each of these type-specific views by creating a partial view named after the type in the SharedDisplayTemplates folder. Figure 21-14 shows a String template and Figure 21-15 shows the output result.

Figure 21-13. Figure 21-13

Figure 21-14. Figure 21-14

Figure 21-15. Figure 21-15

C#

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

STRING START
<%= Html.Encode(ViewData.TemplateInfo.FormattedModelValue) %>
STRING END

VB

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl" %>

STRING START
<%= Html.Encode(ViewData.TemplateInfo.FormattedModelValue) %>
STRING END

Note

You can also create controller-specific templates by putting them inside a DisplayTemplates subfolder of the controller-specific Views folder.

Although the display template is selected based on the type of the property by default you can override this by either supplying the name of the template to the DisplayFor helper or applying a System.ComponentModel.DataAnnotations.UIHintAttribute to the property. This attribute takes a string that identifies the type of template to use. When the framework needs to render the display for the property it tries to find the display template described by the UI Hint. If one is not found it looks for a type-specific template. If a template still hasn't been found, the default behavior is executed.

If you are simply applying LabelFor and DisplayFor for every property on your model, you can use the Html.DisplayForModel helper method. This method renders a label and a display template for each property on the model class. You can prevent a property from being displayed by this helper by annotating it with a System.ComponentModel.DataAnnotations.ScaffoldColumnAttribute passing it the value false.

Note

If you want to change the way the DisplayForModel is rendered, you can create a type-specific template for it. If you want to change the way it renders generally, create an Object display template.

A number of built-in display templates are available that you can use out of the box. Be aware that if you want to customize the behavior of one of these you will need to re-create it from scratch.

• String: No real surprises, just renders the string contents itself. This template does HTML encode the property value, though.

• Html: The same as string but without the HTML encoding. This is the rawest form of display that you can have. Be very careful using this template because it is a vector for malicious code injection such as Cross Site Scripting Attacks (XSS).

• EmailAddress: Renders an e-mail address as a mailto: link.

• Url: Renders a URL as an HTML anchor.

• HiddenInput: Does not render the property at all unless the ViewData.ModelMetaData.HideSurroundingHtml property is false.

• Decimal: Renders the property to two decimal places.

• Boolean: Renders a read-only checkbox for non-nullable values and a read-only drop-down list with True, False, and Not Set options for nullable properties.

• Object: Renders complex objects and null values.

jQuery is an open-source JavaScript framework that is included by default with the ASP.NET MVC framework. The basic element of jQuery is the function $(). This function can be passed a JavaScript DOM element or a string describing elements via a CSS selector. The $() function returns a jQuery object that exposes a number of functions that affect the elements contained. Most of these functions also return the same jQuery object so these function calls can be chained together. As an example, the following snippet selects all of the H2 tags and adds the word "section" to the end of each one:

JavaScript

$("h2").append(" section");

To make use of jQuery you need to create a reference to the jQuery library found in the /Scripts folder by adding the following to the head section of your page:

HTML

<script type="text/javascript" src="/Scripts/jquery-1.3.2.js"></script>

It is possible to use jQuery to make an HTTP request by using the $.get and $.post methods. These methods accept a URL and can optionally have a callback function to provide the results to. The following view renders the time inside two div tags called server and client, respectively. There is also a button called update, which when clicked makes a GET request to the /time URL. When it receives the results it updates the value displayed in the client div but not the server one. In addition to this it uses the slideUp and slideDown functions to animate the client time in the UI.

C#

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<System.String>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Index</title>
  <script type="text/javascript" src="/Scripts/jquery-1.3.2.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $('#updater').click(UpdateNow);
    });
    function UpdateNow() {
      $.get('/time', function (data) {
        $('#clientTime').slideUp('fast', function () {
          $('#clientTime').empty().append(data).slideDown();
        });
      });
    }
  </script>
</head>
<body>
    <div>
        <h2>
            Server</h2>

<div id="serverTime">
            <%:Model %></div>
        <h2>
            Client</h2>
        <div id="clientTime">
            <%:Model %></div>
        <input type="button" value="Update" id="updater"  />
    </div>
</body>
</html>

Here is the action method that controls the previous view. It uses the IsAjaxRequest extension method to determine if the request has come from jQuery. If it has, it returns just the time as a string, otherwise it returns the full view.

jQuery is a rich client-side programming tool with an extremely active community and a large number of plug-ins. For more information about jQuery including a comprehensive set of tutorials and demos see http://jquery.com.