How to control the output of Html.EditorFor in ASP.NET MVC?

Sheonarayan
Posted by in ASP.NET MVC category on for Advance level | Points: 250 | Views : 19852 red flag
Rating: 4.67 out of 5  
 3 vote(s)

In this article, we are going to learn how to control the output of Html.EditorFor helper method in ASP.NET MVC.
Recommendation
Read Working with DropDownList in ASP.NET MVC before this article.

Introduction


Html.EditorFor helper method is used to bind the data from Model to the Vew page in respective html form elements. Html.EditorFor helper method is very dynamic in nature and very smart as it changes its output based on what data type is given to it.

@Html.EditorFor(model => model.FirstName) 

For example
  1. If Model.Property is of string type, it renders a simple TextBox on the page
    <input class="text-box single-line" id="LastName" name="LastName" type="text" value="" />
    
  2. If Model.Property is of boolean type, it renders a CheckBox on the page
    <input class="check-box" id="Active" name="Active" type="checkbox" value="true" />
  3. If Model.Property is of integer type, it renders a number (HTML 5) type of TextBox
    <input class="text-box single-line" id="Age" name="Age" type="number" value="" />
    
    

The problem


However all these benefits comes with certain restrictions. For example, if we have to create a standard form where we are using Bootstrap or other CSS frameworks to control the look and feel of the form and its elements; we will not be able to do that by just using Html.EditorFor. The reason is that it uses fixed set of css class (like text-box single-line etc.) attribute value and we do not have any other nicer way to override this class attribute values.

In our case, we were trying to use Bootstrap to design a form and its elements so that the texboxes looks nicer however we couldn't do that as we were not be able to specify bootstrap css class as class attribute to these textboxes in Html.EditorFor method.

Form without Bootstrap classes


The Solution (EditorTemplates)


We can solve above issue with Html.EditorFor by specifying different EditorTemplates in ASP.NET MVC. Ideally, different EditorTemplates for different data types of fields.



EditorTemplates can be created under /Shared/EditorTemplates folder and in our case as we want to create standard editor templates for a specific data type, we have to keep their names as the data type name. In our case it is boolean.cshtml and string.cshtml.


So right click Shared folder and create a folder called EditorTemplates and add string.cshtml file. Copy-paste below code into this file.

@model string

@Html.TextBoxFor(model => model, new { @class = "form-control" })
In the above code snippet, we are using Html.TextBoxFor helper method and passing class attribute as Bootstrap's "form-control". 

After adding this any string type of Model property with EditorFor renders like this.
<input class="form-control" id="LastName" name="LastName" type="text" value="" />
Notice the class attribute above.

Similarly, add boolean.cshtml into EditorTemplates folder and copy-paste below code into this file.
@model Nullable<bool>
    @{
        bool active = false;
        
        if (Model != null && Model.HasValue)
        {
            active = Model.Value;
        }
    }
@Html.Label("" + "true", "Yes") @Html.RadioButton("", "True", active ? true : false, new { id = "Active_true" })
@Html.Label("" + "false", "No") @Html.RadioButton("", "False", active ? false : true, new { id = "Active_false" })


NOTICE that by default, EditorFor helper method gives a checkbox output to the boolean field. However, in this case we have decided to change its output to radio buttons.

In above code snippet, we are checking if Model property being passed to EditorFor method is not null and then specifying its value to the active variable. The same is being used to set the default selection for the respective Radio button.

Now, when a boolean data type property of the Model is used with Html.EditorFor we get following output
<label for="Active_true">Yes</label> 
<input id="Active_true" name="Active" type="radio" value="True" />

<label for="Active_false">No</label> 
<input checked="checked" id="Active_false" name="Active" type="radio" value="False" />

All this gives below output to the same form above

Form with Bootstrap classes

Notice the look and feel of the TextBoxes and the output of Active field.

Similarly, we can create different EditorTemplates for different types of fields and can completely control the output of Html.EditorFor helper method.

Conclusion


Html.EditorFor helper method advantages comes with a little bit of restrictions. Thanks to EditorTemplates that help us to control and customize it's output as per our need.

Thanks for reading. If you liked this article, do subscribe for the Articles RSS feed by clicking on Orange image at top right.
Page copy protected against web site content infringement by Copyscape

About the Author

Sheonarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Gurumatrix2004 on: 7/18/2014 | Points: 25
Great blog post..@Sheo Sir
Posted by: Sheonarayan on: 7/23/2014 | Points: 25
Thanks Gurunatha sir !

Login to post response

Comment using Facebook(Author doesn't get notification)