Html.EditorFor – Extend for custom type

In this Post, I am going to discuss about ASP.NET MVC and razor view engine. As we know that ASP.NET MVC provides many helper methods that helps in generating the UI based on the model. But there could be scenario where the available HTML helpers wont work and you require to create new custom one. There could be one scenario, where you have a class that has a enum property. Now if you create a Create/Edit view for that property then it will just create a TextBox for it. Obviously which is not a good idea. A User may enter some wrong string which cannot mapped to a enum value. So the better way to provide a dropdown to select any value. There could be many ways to render it. We’ll discuss one elegant way to do this.

First let’s understand that how does the available helpers work. Lets start with an example. Say we have a class like

    public class Speaker
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public bool IsAvailable { get; set; }
    }

So here, in this class there are three properties: Id, Name and IsAvaiable. The first two are of type string and third one is of bool. So when we create a View for this model It looks like

</pre>
<div class="editor-field">@Html.EditorFor(model => model.Name)
 @Html.ValidationMessageFor(model => model.Name)</div>
<div class="editor-field">@Html.EditorFor(model => model.IsAvailable)
 @Html.ValidationMessageFor(model => model.IsAvailable)</div>
<pre>

I have not included the whole source code of the View but if we see the above code then find an EditorFor (called templated helper) is used to generate the UI. Let’s run and see the UI We can see one Textbox and other Checkbox on the screen right. But how does it take place? Actually when it renders on the browser, it checks the type of the property, and based on the type, picks the appropriate template and renders it on screen. For type string(which is name here), it has a defined template as Textbox and for bool (which is here IsAvailable) also it has a template as Checkbox . So the same templated editor method renders different UI based on the type of the property. Let’s move ahead and add another enum property I have created a enum type as

 public enum ExpertiseArea
    {
        ASPNET,
        Csharp,
        WindowsAzure,
        WCF
    }

Now lets add one more property to the class of type enum defined as above

public ExpertiseArea Area { get; set; }

Now we need to add a new editor for Area as

</pre>
<div class="editor-field">@Html.EditorFor(model => model.Area)
 @Html.ValidationMessageFor(model => model.Area)</div>
<pre>

When it will be rendered on UI, it will simply add a Textbox for enum as

which is not a good Idea as discussed. To provide a Dropdownlist for the enum, we need to create a custom editor template.

To create a custom editor template, create a folder named EditorTemplates under Views->Shared folder. So that the editor templates gets available to all the Views.Now create a Partial View under that folder with name as your Enum (which is here ExpertiseArea so partial view file name will be ExpertiseArea.cshtml). Now in this View we need to create the drop down list. For dropdown list, we need to get all the item names from the Enum Type and create the items for drop down. So here my my partial view ExpertiseArea.cshtml contains

@using System.Web.Mvc;
@using Application1.Models;
@{
    var names = Enum.GetNames(typeof(ExpertiseArea));
    var values = Enum.GetValues(typeof(ExpertiseArea)).Cast();

    var items = names.Zip(values, (name, value) =>
        new SelectListItem { Text = name, Value = value.ToString() });
}

@Html.DropDownList("", items)

In above code, We are getting all the names and values from Enum and creating the items for dropdown and once we create the items, we used the dropdown list helper to populate the dropdown. So now lets render the create the page again.

Now a dropdown is rendered with all the possible enum type values for enum type property. And the same will be used at many places, wherever we want to get the user input on this enum value. And there will be no change in the Views.