ASP.Net MVC – Different kinds of Templated Helpers

CodeProject

In the last blog post, we have discussed about HiddenInput and ReadOnly attributes in ASP.Net MVC. You can read that article here. In this article we will go over different kinds of Templated Helpers.

 Templated Helpers are introduced in MVC 2. These built in Templated Helpers can be broadly classified into 2 categories.

1. Display Templates
2. Editor Templates

There are 3 kinds of Display Templated Helpers.

1. @Html.DisplayForModel() - Used with strongly typed views. This templated helper will walk through each property in the model to display the object.
2. @Html.Display(“EmployeeData”) - Used with a view that is not strongly typed. For example, if we have stored data in ViewData, then we can use this templated helper using the key that was used to store data in ViewData.
3. @Html.DisplayFor(model => model) - Used with strongly typed views. If your model has properties that return complex objects, then this templated helper is very useful.

Let’s understand the use of Display Templated Helpers with an example. We will be using the same example which we have used in the previous article.

In the Home controller, we already have Details and Edit action methods implemented. We have Details and Edit Views as well. But now, I am going to delete them and readd the Details View. For this, right click on the Details action method and select Add View.

Set View name=Details, Model class=tblEmployee, Scaffold template=Details and click on Add.

This should add Details.cshtml View. Notice that there are a lot of HTML generated for this.

Let’s run the solution and navigate to Details action in Home controller. We can see the employee’s full details.

But within our View, there are a lot of HTML. Instead of this, let’s use DisplayForModel() Templated Helper. If you look at the Details View, a model object – tblEmployee is associated with the View. So this is a Strongly typed view. Instead of all the HTML, simply use @Html.DisplayForModel(). This templated helper is going to walk through each property in the tblEmployee object and inspects that property’s metadata.

@model MVCDemo.Models.tblEmployee

@{
ViewBag.Title = “Details”;
}

<h2>Details</h2>

<fieldset>
<legend>tblEmployee</legend>

@Html.DisplayForModel()

</fieldset>

Let’s build the solution and refresh the View. The output is going to be exactly the same.

We can use @Html.Display templated helper when we are dealing with a View that is not Strongly typed.

Let’s understand this with an example. Previously, we were passing tblEmployee object to the View. But now, I am going to store tblEmployee object in ViewData.

public ActionResult Details(int id)
{
SampleDBContext db = new SampleDBContext();
tblEmployee employee = db.tblEmployees.Single(x => x.Id == id);

ViewData["EmployeeData"] = employee;

return View();
}

In the Details View, I am going to get rid of the model. Now the View is not a Strongly typed one. Since it is not a Strongly typed view, I can’t use DisplayForModel() templated helper. So I am going to use Display templated helper like below.

@{
ViewBag.Title = “Details”;
}

<h2>Details</h2>

<fieldset>
<legend>tblEmployee</legend>

@Html.Display(“EmployeeData”)

</fieldset>

Let’s build the solution and refresh the View. The output should be exactly same as before.

Just like 3 Display Templated Helpers, there are 3 Edit Templated Helpers as well.

1. @Html.EditorForModel()
2. @Html.Editor(“EmployeeData”)
3. @Html.EditorFor(model => model)

Let’s quickly look at the use of one of the Edit templated helper. Within our Home controller, there is Edit action method.

public ActionResult Edit(int id)
{
SampleDBContext db = new SampleDBContext();
tblEmployee employee = db.tblEmployees.Single(x => x.Id == id);
return View(employee);
}

Right click on this action method and select Add View. Set View name=Edit, Model class=tblEmployee, Scaffold template=Empty and click on Add.

Inside the Edit.cshtml View, use EditorForModel() templated helper like below.

@model MVCDemo.Models.tblEmployee

@{
ViewBag.Title = “Edit”;
}

<h2>Edit</h2>

@using (@Html.BeginForm())
{
@Html.EditorForModel()
}

Let’s build the solution and navigate to Edit action in the Home controller. We will get the editing interface like below.

To associate metadata with model class properties, we use attributes. In the previous articles, we have discussed about using various data annotations attributes. These templated helpers use metadata associated with the model to render the user interface.

Reference: Arun Ramachandran (http://BestTEchnologyBlog.Com)