Create HTML Controls for Model Class Properties using EditorFor()

ASP.NET MVC includes the method that generates HTML input elements based on the datatype. The Html.Editor() or Html.EditorFor() extension methods generate HTML elements based on the data type of the model object's property.

The following table list the data types and releted HTML elements:

We will use the following model class.

public class Student
{
    public int StudentId { get; set; }
    [Display(Name="Name")]
    public string StudentName { get; set; }
    public int Age { get; set; }
    public bool isNewlyEnrolled { get; set; }
    public string Password { get; set; }
    public DateTime DoB { get; set; }
}

Html.EditorFor()

The Html.EditorFor() method is a strongly typed method. It requires the lambda expression to specify a property of the model object.

Visit MSDN to know all the overloads of EditorFor() method

@model Student

StudentId:      @Html.EditorFor(m => m.StudentId) <br />
Student Name:   @Html.EditorFor(m => m.StudentName) <br />
Age:            @Html.EditorFor(m => m.Age)<br />
Password:       @Html.EditorFor(m => m.Password)<br />
isNewlyEnrolled: @Html.EditorFor(m => m.isNewlyEnrolled)<br />
DoB:            @Html.EditorFor(m => m.DoB)

StudentId:      <input data-val="true" data-val-number="The field StudentId must be a number." data-val-required="The StudentId field is required." id="StudentId" name="StudentId" type="number" value="" /> 
Student Name:   <input id="StudentName" name="StudentName" type="text" value="" />
Age:            <input data-val="true" data-val-number="The field Age must be a number." data-val-required="The Age field is required." id="Age" name="Age" type="number" value="" />
Password:       <input id="Password" name="Password" type="text" value="" />
isNewlyEnrolled:<input class="check-box" data-val="true" data-val-required="The isNewlyEnrolled field is required." id="isNewlyEnrolled" name="isNewlyEnrolled" type="checkbox" value="true" />
                <input name="isNewlyEnrolled" type="hidden" value="false" />
DoB:            <input data-val="true" data-val-date="The field DoB must be a date." data-val-required="The DoB field is required." id="DoB" name="DoB" type="datetime" value="" />

In the above exampl, MVC framework generates an appropriate control based on the data type of a property, e.g. textbox for string type property, number field for int type property, checkbox for boolean property, etc.

Html.Editor()

The Html.Editor() method requires a string parameter to specify the property name. It creats a HTML element based on the datatype of the specified property, same as EditorFor() method.

Visit MSDN to know all the overloads of Editor() method

Consider the following example to understand the Editor() method.

StudentId:      @Html.Editor("StudentId")
Student Name:   @Html.Editor("StudentName")
Age:            @Html.Editor("Age")
Password:       @Html.Editor("Password")
isNewlyEnrolled: @Html.Editor("isNewlyEnrolled")
Gender:         @Html.Editor("Gender")
DoB:            @Html.Editor("DoB")