Using EditorTemplates in MVC 3

How many time in ASP.net web development do you find yourself writing the same three elements for every input field – the label, the input field itself and the validation element(s).

For example,

 
@Html.LabelFor(x=>x.Firstname) 
@Html.TextBoxFor(x=>x.Firstname) 
@Html.ValidationMessageFor(x=>x.Firstname)

This is better than the equivalent in webforms for sure, but when a site contains hundreds of these sets of elements, changing the way they present is still an uninviting task.

The MVC team have provided a hook for site developers to create “templates” for the rendering of elements of the ViewModel. To use the template you use Html.EditorFor or Html.DisplayFor, depending on whether you are editing or simply reading the information.

This method looks for a folders either called EditorTemplates or DisplayTemplates int eh view folder hierarchy, and then tries to find the file with a name that matches the type of property being rendered. For example, if Firstname is a string, the view called String.ascx or String.chtml is sought.

image

The file is a partial view with the model defined as the type of property – in this case a string.

@model System.String
@Html.Label("")
@Html.TextBox("",Model)
@Html.ValidationMessage("")

What is interesting here is that we are already in the context of a resolved property, so the ViewData property metadata is all in the correct context for the Html helpers. This means we do not need to further specify the property name. We would do that if the model was more complex, say a child entity with distinct properties of it’s own.

Note that Model is passed into the Html.Texbox helper in case the Model has a value set on an initial GET request (Learn more about how ASP.net MVC populates fields values, and the differences between GET and POST requests here).

With the editor template now created, I can change the initial three line of code to:

@Html.EditorFor(x => x.Firstname);

And get the label, input field and validation rendered as previously.

This quick note has demonstrated how the use of templates can reduce the mark-up in files significantly without any loss of functionality while enable easier site wide modifications. This has demonstrated the use of EditorTemplates and shown the conventions required. Similar conventions control the use of the DisplayTemplates.

Advertisements
This entry was posted in ASP.Net MVC, Razor and tagged , . Bookmark the permalink.

3 Responses to Using EditorTemplates in MVC 3

  1. Brett Daniels says:

    I’d rather approach this another way, since this method does not allow for different methods of editing (ie. A mass-edit List view vs the regular single-record view… especially a concern for custom controls), but also you’d have to define this for every single datatype, including any custom ones. Sounds like a lot of duplicate code that would be better applied to some sort of helper function?

    • xhalent says:

      You only need to apply the editors or display templates for those datatypes of interest to you. HtmlHelpers are one approach you can use, however I’m not too sure if they result in any less code though.

      It’s a bit like the usercontrol vs server control argument – there are pros and cons of each. I think the decision comes down to whether you intend to reuse the presentation across multiple projects, in which case the htmlhelper makes sense, but otherwise I would proably lean to templates.

      • Brett Daniels says:

        Fair call. Anyway, thanks for the article 🙂 I’m sure a lot of people will get good mileage. Great to reduce and reuse code as much as possible!

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