Back to: ASP.NET Core Tutorials For Beginners and Professionals
Editor HTML Helper in ASP.NET Core MVC
In this article, I am going to discuss How to Use Editor HTML Helper in ASP.NET Core 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 Core MVC Application.
Editor HTML Helper in ASP.NET Core MVC
As of now, we have seen and used different types of HTML Helper methods to generate different types of HTML elements in ASP.NET Core MVC applications. The ASP.NET Core 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 the Editor() HTML Helper method for simple type view and the 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 the Editor() or EditorFor() method.
How to use Editor HTML Helper MVC Application?
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 expression. The signature of the Editor() HTML Helper method is given below.
IHtmlContent Editor(this IHtmlHelper htmlHelper, string expression)
Let us understand how to use Editor HTML Helper in ASP.NET Core MVC Application with one example. Let us first create a class file with the name Employee.cs within the Models folder and then copy and paste the following code into it.
namespace HTML_HELPER.Models
{
public class Employee
{
public int EmployeeId { get; set; }
public string? Name { get; set; }
public Gender Gender { get; set; }
public int Age { get; set; }
public bool IsNewlyEnrolled { get; set; }
public DateTime? DOB { get; set; }
}
public enum Gender
{
Male,
Female
}
}
Next, modify the Home Controller as follows.
using HTML_HELPER.Models;
using Microsoft.AspNetCore.Mvc;
namespace HTML_HELPER.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
Employee emp = new Employee()
{
EmployeeId = 101,
Name = "Pranaya",
Gender = Gender.Male,
Age = 30,
IsNewlyEnrolled = true,
DOB = Convert.ToDateTime("29-02-1988")
};
return View(emp);
}
}
}
Next, modify the Index.cshtml view file as follows.
@using HTML_HELPER.Models
@model Employee
<table>
<tr>
<td>EmployeeId</td>
<td>@Html.Editor("EmployeeId")</td>
</tr>
<tr>
<td>Name</td>
<td>@Html.Editor("Name")</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:
IHtmlContent EditorFor<TModel, TResult>(this IHtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TResult>> expression)
Modify the index view as shown below to use the 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>Name</td>
<td>@Html.EditorFor(emp => emp.Name)</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>
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. Now, run the application; it will give you the same output.
What are the Differences Between Html.Editor and Html.EditorFor in ASP.NET Core MVC?
In ASP.NET Core MVC, both Html.Editor and Html.EditorFor are HTML Helper methods used to generate form input fields for properties in a view model. However, they serve different purposes and are used in different scenarios. Here’s a comparison of Html.Editor and Html.EditorFor:
Html.Editor:
This method is used to generate form input fields for properties in a view model. It generates input fields based on the property’s data type without considering metadata or display templates.
Syntax: @Html.Editor(“PropertyName”)
- PropertyName: The name property in the view model.
Example: @Html.Editor(“Name”)
Html.EditorFor:
This method is used to generate form input fields for properties in a view model. It considers model metadata, data annotations, and display templates, allowing for more customization and flexibility.
Syntax: @Html.EditorFor(expression)
- expression: An expression that identifies the property in the view model.
Example: @Html.EditorFor(emp => emp.Name)
Usage:
- Html.Editor: Used for generating input fields without considering metadata or display templates. It’s suitable for simple input fields where customization is not a primary concern.
- Html.EditorFor: Used for generating input fields while considering metadata, data annotations, and display templates. It’s more flexible and customizable for complex input scenarios.
Customization:
- Html.Editor: Limited customization options compared to Html.EditorFor. You can only specify the property name.
- Html.EditorFor: Provides more customization options. You can create custom display templates, pass additional attributes, and take advantage of model metadata.
The Html.Editor is a simpler method for generating basic input fields, while Html.EditorFor provides more advanced features for generating input fields with the ability to leverage model metadata and custom display templates. Use Html.Editor for straightforward scenarios and Html.EditorFor for scenarios that require more customization and flexibility.
In the next article, I am going to discuss the Password Field HTML Helper in the ASP.NET Core MVC application. I explain How to Use Editor HTML Helper in the ASP.NET Core MVC Application with Examples in this article. I hope this article will help you with your needs.
