Editor HTML Helper in MVC

Editor HTML Helper in MVC Application

In this article, I am going to discuss how to use Editor HTML Helper in MVC application to generate input HTML elements. 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 application. The ASP.NET MVC Framework also provides the Editor HTML Helper method which is used to generate HTML input elements based on the datatype 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.

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 MVC

Let’s understand how to use Editor HTML Helper in MVC with an example

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; }
    }
}
The Editor HTML Helper in 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 datatype of the specified property. The signature of the Editor() HTML Helper method is given below.

MvcHtmlString Editor(string propertyname)

Create a controller with the name as EmployeeController and then copy and paste the following code in 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);
        }
    }
}
Let’s create the index view and copy and paste the below code.

Index.cshtml

@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>

When we run the application, it will give us the following output

how to use Editor HTML Helper in ASP.NET MVC

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

The EditorFor HTML Helper in 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

EditorFor HTML Helper in MVC

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

In the next article, I will discuss Password Field and Hidden Field HTML Helper in ASP.NET MVC application.

SUMMARY:

In this article, I try to explain how to use Editor HTML Helper in MVC application step by step with a real-time example. I hope this Editor HTML Helper in MVC article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *