Editor HTML Helper in ASP.NET MVC

Back to: ASP.NET MVC Tutorial

Editor HTML Helper in ASP.NET MVC Application

In this article, I am going to discuss how to use Editor HTML Helper in ASP.NET MVC Application to generate input HTML elements. Please read our previous article where we discussed how to generate a list box using List Box HTML Helper in ASP.NET MVC Application.

As of now, we have seen and use different types of HTML Helper methods to generate different types of HTML elements in ASP.NET MVC applications. The ASP.NET MVC Framework also provides the Editor HTML Helper method which is used to generate HTML input elements based on the data type we supplied. If this is not clear at the moment don’t worry we will discuss this with an example.

The ASP.NET MVC Framework provides Editor() HTML Helper method for simple type view and EditorFor() HTML Helper method for strongly type view to generate HTML elements based on the data type of the model object’s property.

Data Types and Its Equivalent HTML elements:

The following diagram lists the HTML element that is created for each data type by Editor() or EditorFor() method.

How to use Editor HTML Helper in ASP.NET MVC Application?

Let us understand how to use Editor HTML Helper in ASP.NET MVC Application with one example. To do so, first, create an empty ASP.NET MVC application. Then create the following models within the Models folder.

namespace HTML_HELPER.Models
{
    public class Employee
    {
        public int EmployeeId { get; set; }
        [Display(Name = "Name")]
        public string EmployeeName { get; set; }    
        public string Gender { get; set; }
        public int Age { get; set; }
        public bool isNewlyEnrolled { get; set; }
        public DateTime? DoB { get; set; }
    }
}

Editor HTML Helper in ASP.NET MVC:

The Editor HTML Helper method requires a string expression as a parameter to specify the property name. This Editor() extension method creates the input HTML element based on the data type of the specified property. The signature of the Editor() HTML Helper method is given below.

MvcHtmlString Editor(string propertyname)

Creating MVC 5 Controller:

Create a controller with the name as EmployeeController and then copy and paste the following code into it.

namespace HTML_HELPER.Controllers
{
    public class EmployeeController : Controller
    {
        public ActionResult Index()
        {
            Employee emp = new Employee()
            {
                EmployeeId = 101,
                EmployeeName = "Pranaya",
                Gender = "Male",
                Age = 30,
                isNewlyEnrolled = true,
                DoB =Convert.ToDateTime("02-02-1988")
            };
            return View(emp);
        }
    }
}

Creating Views:

Let’s create the index view and then copy and paste the below code into it.

@using HTML_HELPER.Models
@model Employee
<table>
    <tr>
        <td>EmployeeId</td>
        <td>@Html.Editor("EmployeeId")</td>
    </tr>
    <tr>
        <td>EmployeeName</td>
        <td>@Html.Editor("EmployeeName")</td>
    </tr>
    <tr>
        <td>Gender</td>
        <td>@Html.Editor("Gender")</td>
    </tr>
    <tr>
        <td>Age</td>
        <td>@Html.Editor("Age")</td>
    </tr>
    <tr>
        <td>isNewlyEnrolled</td>
        <td>@Html.Editor("isNewlyEnrolled")</td>
    </tr>
    <tr>
        <td>DoB</td>
        <td>@Html.Editor("DoB")</td>
    </tr>
</table>

Now, run the application, it will give you the following output.

In the above example, we have specified the property names of the Employee model. So, the Editor HTML Helper method creates the appropriate input elements based on the datatype of Employee model properties as shown in the above image.

EditorFor HTML Helper in ASP.NET MVC:

The EditorFor HTML Helper method is a strongly typed helper method. As it is a strongly typed method we need to use a lambda expression to specify the name. The signature of the EditorFor() HTML Helper method is given below:

MvcHtmlString EditorFor(<Expression<Func<TModel, TValue>> expression)

Modify the index view as shown below to use EditorFor extension method

@using HTML_HELPER.Models
@model Employee
    <br/>
<table>
    <tr>
        <td>EmployeeId</td>
        <td>@Html.EditorFor(emp => emp.EmployeeId)</td>
    </tr>
    <tr>
        <td>EmployeeName</td>
        <td>@Html.EditorFor(emp => emp.EmployeeName)</td>
    </tr>
    <tr>
        <td>Gender</td>
        <td>@Html.EditorFor(emp => emp.Gender)</td>
    </tr>
    <tr>
        <td>Age</td>
        <td>@Html.EditorFor(emp => emp.Age)</td>
    </tr>
    <tr>
        <td>isNewlyEnrolled</td>
        <td>@Html.EditorFor(emp => emp.isNewlyEnrolled)</td>
    </tr>
    <tr>
        <td>DoB</td>
        <td>@Html.EditorFor(emp => emp.DoB)</td>
    </tr>
</table>

The output is as shown below.

In the above example, we specified the property name using the lambda expression. There is no difference in the result whether you use the Editor() or the EditorFor() extension method.

In the next article, I am going to discuss Password Field and Hidden Field HTML Helper in the ASP.NET MVC application. Here, in this article, I try to explain how to use Editor HTML Helper in the ASP.NET MVC application with an example. I hope this Editor HTML Helper in ASP.NET MVC article will help you with your needs.