Templated Helpers in ASP.NET MVC are used to generate HTML elements based on the data type of a model property. These helpers provide a flexible way to render UI elements without explicitly specifying their structure.
1. Automatic Rendering – Generates HTML based on the model's data type. Consistency – 2. Ensures uniform UI elements throughout the application. Customization – 3. Allows creating custom templates for specific data types. 4. Reduced Code Duplication – Eliminates repetitive HTML code.
Templated helpers were introduced in MVC 2 and are categorized into two main types:
1.Display Templates
2.Editor Templates
Additionally, you can create custom templated helpers as per your requirements, which we will cover in the next article.
ASP.NET MVC provides three types of Display Templated Helpers, which are:
@Html.Display("EmployeeData") – Used in non-strongly typed views. This is useful when data is stored in ViewData or ViewBag, as it allows accessing the stored data using the corresponding key.
@Html.DisplayFor(model => model) – Designed for strongly typed views. It is particularly helpful when the model contains properties that return complex objects.
@Html.DisplayForModel() – Also used in strongly typed views. This helper iterates through each property of the model and displays its values accordingly.
Let's explore Templated Helpers in ASP.NET MVC with an example. Start by creating an empty ASP.NET MVC application named TemplateHelpersMVC. Next, add a class called Employee inside the Models folder, as demonstrated below.
namespace TemplateHelpersMVC.Models
{
public class Employee
{
public int Id { get; set; }
public string EmailAddress { get; set; }
public int? Salary { get; set; }
public string PersonalWebSite { get; set; }
public string FullName { get; set; }
public DateTime? HireDate { get; set; }
public string Gender { get; set; }
}
}
Next, create a controller named EmployeeController inside the Controllers folder, then insert the following code into it.
namespace TemplateHelpersMVC.Controllers
{
public class EmployeeController : Controller
{
public ActionResult Details()
{
//Here we are hardcoded the Employee Details
//In Realtime you will get the data from any data source
Employee employee = new Employee()
{
Id = 1,
FullName = "shaista",
Gender = "Female",
HireDate = Convert.ToDateTime("2017-01-02 17:53:46.833"),
EmailAddress = "www.aitaurangabad.com",
Salary = 500000,
PersonalWebSite = "https://aitaurangabad.com/"
};
ViewData["EmployeeData"] = employee;
return View();
}
}
}
In the above code, we have defined an action method named Details and stored the employee object in ViewData using the key "EmployeeData".
Create the Details view and then copy and paste the below code in it.
@{
ViewBag.Title = "Details";
}
<fieldset>
<legend>Employee Details</legend>
@Html.Display("EmployeeData")
</fieldset>
As shown in the code above, we use the `@Html.Display("EmployeeData")` templated helper method to render the data. Currently, the "Details.cshtml" view does not have an associated model, making it a non-strongly typed view. Now, run the application and go to the following URL.
http://localhost:61629/Employee/Details
Now, modiy the implementation of the “Details” action method within the Employee controller as shown below.
namespace TemplateHelpersMVC.Controllers
{
public class EmployeeController : Controller
{
public ActionResult Details()
{
//Here we are hardcoded the Employee Details
//In Realtime you will get the data from any data source
Employee employee = new Employee()
{
Id = 1,
FullName = "Shaista",
Gender = "Female",
HireDate = Convert.ToDateTime("2017-01-02 17:53:46.833"),
EmailAddress = "www.aitaurangabad.com",
Salary = 500000,
PersonalWebSite = "https://aitaurangabad.com/"
};
return View(employee);
}
}
}
As seen in the code above, instead of storing the "Employee" object in ViewData, we are passing it directly to the View.
Now, update the Details.cshtml view as shown below.
@model TemplateHelpersMVC.Models.Employee
@{
ViewBag.Title = "Details";
}
<fieldset>
<legend>Employee Details</legend>
@Html.DisplayFor(model => model)
</fieldset>
In the Details view above, we have defined "Employee" as the model object, making it a strongly typed view. As a result, we use the @Html.DisplayFor(model => model) templated helper method. Since none of the properties in the Employee class return a complex object, the best approach here is to use the @Html.DisplayForModel() templated helper, as demonstrated below.
@model TemplateHelpersMVC.Models.Employee
@{
ViewBag.Title = "Details";
}
<fieldset>
<legend>Employee Details</legend>
@Html.DisplayForModel()
</fieldset>
Whether we use DisplayFor() or DisplayForModel() templated helper, the output remains the same in both cases. Now, run the application and verify that everything is functioning correctly.
Just as we use Display Template Helpers, we follow the same approach when working with Editor Template Helpers in ASP.NET MVC. Now, let's explore this concept by adding the Edit action method inside the EmployeeController, as shown below.
namespace TemplateHelpersMVC.Controllers
{
public class EmployeeController : Controller
{
public ActionResult Edit()
{
//Here we are hardcoded the Employee Details
//In Realtime you will get the data from any data source
Employee employee = new Employee()
{
Id = 1,
FullName = "Shaista",
Gender = "Female",
HireDate = Convert.ToDateTime("2017-01-02 17:53:46.833"),
EmailAddress = "www.aitaurangabad.com",
Salary = 500000,
PersonalWebSite = "https://aitaurangabad.com/"
};
return View(employee);
}
}
}
@model TemplateHelpersMVC.Models.Employee
@{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
@using (@Html.BeginForm())
{
@Html.EditorForModel()
}
Start the application and go to the following URL to ensure everything is functioning correctly.
http://localhost:61629/Employee/Edit
it will display the output