In this article, we are going to learn how to control the output of Html.EditorFor helper method in ASP.NET MVC.
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
- 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="" />
- 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" />
- 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.