Exploring Display and Editor Templates in ASP.NET MVC3/4

Introduction

In this article I am going to describe an excellent (extended) feature of ASP.NET MVC 3. I have demonstrated Display/Editor Templates which is a very useful feature of MVC while working with large projects (for consistent UI).

MVC framework is smart enough to render HTML for all types of data (string, int, bool, etc.) but sometimes we want something different/special for our project (for example, if we don't want a check box for Boolean then we cant use the  EditorFor method). This article is all about consistent HTML markup for all types of data.

Background

I personally love to explore technology. When I was new in ASP.NET MVC I use to write a custom editor and display for each property although I was aware about @Html.EditorForModel() but the HTML which it rendered was not familiar so I used to do like this: @Html.TextBox(Mode.value, new {@class="fancyTextbox"}).

It was always painful to generate HTML for each property when we have a great feature in the MVC framework (@Html.EditorForModel() and @Html.DisplayForModel() and site.css (Default) where we can modify the user interface).

Using the code

Before going to start coding I must tell you:

In my default MVC application folder structure I, have to add 2 folders inside Views/Shared folder which will hold my views.

1. DisplayTemplates: this folder will contain read only HTML controls for primitive property (default data)
2. EditorTemplates: this folder will contain editable HTML controls for primitive property (default data)

Note: Please use the same naming convention, not only for this article its for whole MVC framework.

Now lets start from Model which is all about what type of data we are going to present in my view.

I am going to make it simple to understand. So I am using two common types integer and boolean.

Here is my Model code:

Model

public class MyModel
{
    public bool boolProp { get; set; }
    public int intProp { get; set; }
}

Here is my Controller Code

which is passing model object into view

public class HomeController : Controller
{
   public ViewResult CheckMyTemplate()
    {
        MyModel model = new MyModel();
        model .boolProp = true;     
        model.intProp = 10;
        return View(model);
    }  
}    

Finally here are my Views :

Display View Templates

For Boolean type

View Name : Boolean.cshtml

@model System.Boolean?

<h2>boolean</h2>
Its a boolean Display Template
<br />Boolean Value : @Model  

For Integer type :

View Name : Int32.cshtml

@model System.Int32? 
<h2>integer</h2>
Its a integer Display Template 
<br /> Max Value=@((Int32)Model) 

Editor View Templates

For Boolean type

display drop down for boolean type

View Name : Boolean.cshtml

@Html.DropDownList("", new SelectList( new[] { 
new { Value = "true", Text = "Yes" }, 
new { Value = "false", Text = "No" },
        }, 
        "Value", 
        "Text",
        
        Model
    ))  

For Integer type

write integer values in drop down.

View Name: Int32.cshtml

@model System.Int32? 
<h2>integer</h2>
Its a integer Editor Template
<select name="options" id="options">
@for (int i = 0; i<(Int32)Model; i++ )
{
<option id="">@(i+1)</option>
}
</select> 

Note: I am using ? for handling nullable values .

Editor View must be place inside EditorTemplates an Display View must placed inside DisplayTemplate.

Points of Interest

It is very interesting and easy to write templates which is universal for all the models and it will really kill your valuable time. Not only this, we can create Display and View Templates for the Object (class) type.

Apart from this there is an interesting feature Custom Model Binding in MVC :).