Published: 28 Apr 2010
By: Brian Mains

Templating is now in the ASP.NET MVC 2.0 framework, for .NET framework 3.5 and 4.0. We are going to take a look at these features.

Contents [hide]

The ASP.NET MVC 2 Series

  • Introduction to ASP.NET MVC 2.0 In this article, we'll begin examining the new features of ASP.NET MVC 2.0 by comparing what ASP.NET MVC offers against its predecessor, ASP.NET web forms.
  • ASP.NET MVC 2.0 User Interfaces The next part to this article series on MVC 2.0 is the user interface. We saw in the last article some basics on the changes of the user interface, which we'll delve into more in this article series. Here we will begin to look at how developers can construct the view user interface.
  • ASP.NET MVC 2.0 Using Multiple Actions Brian Mains explains how to use multiple actions in ASP.NET MVC 2.0.
  • ASP.NET MVC 2.0 Templating Templating is now in the ASP.NET MVC 2.0 framework, for .NET framework 3.5 and 4.0. We are going to take a look at these features.
  • ASP.NET MVC 2.0 Attributes An overview of ASP.NET MVC 2.0 Attributes.
  • ASP.NET MVC 2.0 Validation An overview of validation in ASP.NET MVC 2.0.
  • ASP.NET MVC 2.0 Areas A look at ASP.NET MVC 2.0 Areas.
  • ASP.NET MVC 2.0 and AJAX Part 1 ASP.NET MVC makes working with AJAX really easy; it's quite impressive how powerful the framework can be. JQuery adds extra features and makes AJAX calls really easy; we'll see that all here soon.
  • ASP.NET MVC 2.0 and AJAX Part 2 In this article, we are going to look at how you can utilize AJAX in your views, and utilize a concept called unobtrusive JavaScript to take advantage of a variety of situations. ASP.NET MVC provides AJAX features very easily as we previously saw, but this comes with a caveat, and it has mostly to do with the planning of the implementation. We’re going to examine these concerns in this article.
  • ASP.NET MVC 2.0 and ADO.NET Entity Framework - Part 1 In this article, we'll examine using the ADO.NET Entity Framework (ADO.NET EF). The 4.0 version has received some major upgrades, with some major API enhancements and fixes for most of the pain points within the designer.
  • ASP.NET MVC 2.0 and ADO.NET Entity Framework - Part 2 Out of the .NET framework 4.0 comes many great enhancements, the ADO.NET entity framework (ADO.NET EF) is among the top. The framework has improved upon some of the previous bugs (in version 1), as well as enhanced the API, including many new LINQ-to-SQL-like improvements. We're going to examine using these API features to create a generic version of of a data repository.
  • Complexity in ASP.NET MVC, Part 1: Dealing With Large Models At times, every developer has a web forms page or MVC view that ends up getting pretty complex, for various reasons. Whether it pulls in and integrates a lot of data (such as a portal page) or allows users to edit a lot of information, applications require data, and the amount of data grows over time. It’s a simple reality. We’re going to examine what a larger ASP.NET MVC view looks like, and some actions we can take to keep the model instantiation code as slim as possible.
  • Complexity in ASP.NET MVC, Part 2: Plan your AJAX Carefully Brian Mains discusses management of Ajax requests in ASP.NET MVC.
  • Using DI Containers in ASP.NET MVC How to use Dependency Injection containers in ASP.NET MVC.
  • Using Microsoft Unity in ASP.NET MVC Brian Mains continues his asp.net series with the unity application block.
  • Introduction

    ASP.NET dynamic data featured a new way to develop applications, especially for the UI. The templating feature sets up a new way to render the UI, whether in display or edit mode, based the object to display's data type. For instance, if you wanted to render a LINQ object in dynamic data, the framework extracts information about all of the properties, looks up the template to for the data type of that property (an in-built user control or possibly a custom template you setup), and renders this UI for that property of a given type.

    This feature is now in the ASP.NET MVC 2.0 framework, for .NET framework 3.5 and 4.0. We are going to take a look at these features.

    What is the Benefit?

    Let's start with a web forms example: say we have a Customer class stored in a LINQ model. The form to represent the customer could be embedded within an ASP.NET page along with other related code like adding or updating orders for the customer, etc. However, it might be more efficient to put the portion of the page to insert or update a customer into a user control instead. Then anytime insert or update functionality for a customer is needed, this user control can be dragged into the page and is reused across the application. There may even be a user control to display a customer too.

    In MVC 2 templating, a template represents this user control for inserting or updating a Customer. Additionally, separate templates for displaying a customer can also be defined, and linked to the customer in a special way. Simply by saying that we want to render an object of the Customer data type, the template can be dynamically linked to display this specific template every time we need to do something with the Customer. What is the template made from? A template is represented by a partial view.

    These templates can be specific to the views that belong to a single controller (by putting the templates in the controller's view folder), or can be put in the shared folder and shared across the entire application. Let's take a look through the process.

    Defining Templates

    Templates are defined in MVC 2 using a folder designation and a name. This designation looks like the following:

    Figure 1: The Folder Structure

    The Folder Structure

    In Figure 1, everything above the blue line are templates shared across all of the views, while the templates below the blue line are templates specific to a controller, the TemplatesController class, and all of its action methods. The name of the view is important too, as it has to specifically match the name of the object to render. If it doesn't match, we need a designation to link the two together.

    All templates use a standard folder called DisplayTemplates and EditorTemplates. Templates can be named the same as the data object they represent. For instance, the following is the display template for Address, which has the same name as the underlying entity (coming from the AdventureWorks database).

    Listing 1: Sample Display Template

    Note the structure here; the template uses a partial view with a generic definition (representing the model for the Address class). The template can then render the fields of the Address object. Note the edit template looks very similar.

    Listing 2: Edit Template

    The edit template happens to use EditorFor to represent textbox controls for the specified properties of the Address class, or whatever other control that may be appropriate. Note that templates aren't required to use the same name as the object; we could have used whatever name we wanted for the template; I'll be illustrating how this works later on in the article.

    To display the template for the element can be as simple as the following, when the view or partial view using the template has an Address class as its model.

    Listing 3: Displaying the Template

    If a template can be found for the underlying model type, this template gets displayed, instead of the default template rendering UI. The custom template in Listing 1 and 2 is illustrated below.

    Figure 2: Our Address Template

    Our Address Template

    Templates can also be applied using the DisplayFor or EditorFor action methods too. If the Address class is a property of the parent model, templates can be used here too, as shown in Listing 4. The DisplayFor and EditorFor methods examines the lambda expression to find it returns an Address type, then looks up the address template from the DisplayTemplates or EditorTemplates folders.

    Listing 4: Displaying the Address template as a child.

    This displays the same template for the address in Figure 2, and can help you render complex templates quickly. Where this can come in handy is in scenarios like the following, where the UI uses a looping structure to render multiple customer addresses, as in the following example.

    Listing 5: Setting Up Multiple Addresses

    Could partial views work in this situation? Yes, using partial views directly also work in this scenario because it's a reusable template that can work with a specific data model. Even though templating uses partial views, the templating feature is different in how it's rendered in the UI. This is where the templating feature provides one added benefit over partial views: the dependency between the view and the UI for the Address are dynamically linked together. The template is applied in an agnostic fashion; the view knows nothing about the template, and vice versa. No static references, no instantiations of a specific class.

    Variations in Templating

    What if the template you use does not match the underlying data type? In Figure 1, we had seen a ContactTemplate.ascx, which does not match the Contact type from the AdventureWorks LINQ data model. If we would have used DisplayFor to return a reference to a contact, an exception would be thrown because the templates cannot be matched automatically. MVC likes to match up references by naming convention, rather than by directly instantiating the reference. To link up the template, specify the name of the template by matching the file without the suffix, as in the following.

    Listing 6: Using a Custom Named Template

    The ContactTemplate.ascx file is sought for in the shared/displaytemplates folder, or the <controller name>/displaytemplates folder for the view that it resides in. This feature allows developers to use multiple templates for a single type. We now lose the dynamic linking capability because of hard-coding the template name, which is the drawback.

    Conclusion

    Dynamic data features are starting to spill out over into ASP.NET MVC 2, for the better. Templating is the next great feature that links up a user control to the template of some object. That object could be a bool, decimal, string, or a complex object like Customer or Address. Some templates are pre-defined within the MVC framework, but you can override these templates simply by specifying the name of the template as the data type to display for.

    Additionally, we can see how easy the framework can display data from the AdventureWorks LINQ-to-SQL model, and help us display data through its drill-down model.

    The ASP.NET MVC 2 Series

  • Introduction to ASP.NET MVC 2.0 In this article, we'll begin examining the new features of ASP.NET MVC 2.0 by comparing what ASP.NET MVC offers against its predecessor, ASP.NET web forms.
  • ASP.NET MVC 2.0 User Interfaces The next part to this article series on MVC 2.0 is the user interface. We saw in the last article some basics on the changes of the user interface, which we'll delve into more in this article series. Here we will begin to look at how developers can construct the view user interface.
  • ASP.NET MVC 2.0 Using Multiple Actions Brian Mains explains how to use multiple actions in ASP.NET MVC 2.0.
  • ASP.NET MVC 2.0 Templating Templating is now in the ASP.NET MVC 2.0 framework, for .NET framework 3.5 and 4.0. We are going to take a look at these features.
  • ASP.NET MVC 2.0 Attributes An overview of ASP.NET MVC 2.0 Attributes.
  • ASP.NET MVC 2.0 Validation An overview of validation in ASP.NET MVC 2.0.
  • ASP.NET MVC 2.0 Areas A look at ASP.NET MVC 2.0 Areas.
  • ASP.NET MVC 2.0 and AJAX Part 1 ASP.NET MVC makes working with AJAX really easy; it's quite impressive how powerful the framework can be. JQuery adds extra features and makes AJAX calls really easy; we'll see that all here soon.
  • ASP.NET MVC 2.0 and AJAX Part 2 In this article, we are going to look at how you can utilize AJAX in your views, and utilize a concept called unobtrusive JavaScript to take advantage of a variety of situations. ASP.NET MVC provides AJAX features very easily as we previously saw, but this comes with a caveat, and it has mostly to do with the planning of the implementation. We’re going to examine these concerns in this article.
  • ASP.NET MVC 2.0 and ADO.NET Entity Framework - Part 1 In this article, we'll examine using the ADO.NET Entity Framework (ADO.NET EF). The 4.0 version has received some major upgrades, with some major API enhancements and fixes for most of the pain points within the designer.
  • ASP.NET MVC 2.0 and ADO.NET Entity Framework - Part 2 Out of the .NET framework 4.0 comes many great enhancements, the ADO.NET entity framework (ADO.NET EF) is among the top. The framework has improved upon some of the previous bugs (in version 1), as well as enhanced the API, including many new LINQ-to-SQL-like improvements. We're going to examine using these API features to create a generic version of of a data repository.
  • Complexity in ASP.NET MVC, Part 1: Dealing With Large Models At times, every developer has a web forms page or MVC view that ends up getting pretty complex, for various reasons. Whether it pulls in and integrates a lot of data (such as a portal page) or allows users to edit a lot of information, applications require data, and the amount of data grows over time. It’s a simple reality. We’re going to examine what a larger ASP.NET MVC view looks like, and some actions we can take to keep the model instantiation code as slim as possible.
  • Complexity in ASP.NET MVC, Part 2: Plan your AJAX Carefully Brian Mains discusses management of Ajax requests in ASP.NET MVC.
  • Using DI Containers in ASP.NET MVC How to use Dependency Injection containers in ASP.NET MVC.
  • Using Microsoft Unity in ASP.NET MVC Brian Mains continues his asp.net series with the unity application block.
  • <<  Previous Article Continue reading and see our next or previous articles Next Article >>

    About Brian Mains

    Brian Mains is an application developer consultant with Computer Aid Inc. He formerly worked with the Department of Public Welfare. In both places of business, he developed both windows and web applications, small and large, using the latest .NET technologies. In addition, he had spent many hou...

    This author has published 73 articles on DotNetSlackers. View other articles or the complete profile here.

    Other articles in this category


    Code First Approach using Entity Framework 4.1, Inversion of Control, Unity Framework, Repository and Unit of Work Patterns, and MVC3 Razor View
    A detailed introduction about the code first approach using Entity Framework 4.1, Inversion of Contr...
    jQuery Mobile ListView
    In this article, we're going to look at what JQuery Mobile uses to represent lists, and how capable ...
    Exception Handling and .Net (A practical approach)
    Error Handling has always been crucial for an application in a number of ways. It may affect the exe...
    JQuery Mobile Widgets Overview
    An overview of widgets in jQuery Mobile.
    Book Review: SignalR: Real-time Application Development
    A book review of SignalR by Simone.

    You might also be interested in the following related blog posts


    Why ASP.NET MVC?(ASP.NET MVC vs ASP.NET webforms) read more
    Learning MVC - Part 5 Repository Pattern in MVC3 Application with Entity Framework read more
    Learning MVC - Part 5 Repository Pattern in MVC3 Application with Entity Framework read more
    Learning MVC Part 6: Generic Repository Pattern in MVC3 Application with Entity Framework read more
    Understanding the MvcRouteHandler and MvcHandler in ASP.NET MVC read more
    Code First with Entity Framework 5 using MVC4 and MVC Scaffold read more
    New Mvc4 RTM compatible Release of the Mvc Controls Toolkit read more
    Building an Senchas ExtJS 4.0 MVC Application With Microsofts ASP.NET MVC3 Series / Basics read more
    MvcContrib grid paging and searching in Asp.NET MVC3 read more
    Use MvcContrib Grid to Display a Grid of Data in ASP.NET MVC read more
    Top
     
     
     

    Discussion


    Subject Author Date
    placeholder Great article. Patrick Smith 5/6/2010 12:09 PM
    Great :) But one question. René Kuss 5/16/2010 5:19 AM

    Please login to rate or to leave a comment.