Click here to Skip to main content
Click here to Skip to main content

ASP.Net MVC – Different kinds of Templated Helpers

, 22 Jun 2014
Rate this:
Please Sign up or sign in to vote.
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 bro

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.

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

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

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

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

MVC5
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();
}

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

MVC7
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);
}

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

MVC8
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()
}

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

MVC10
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.

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


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Arun Ramachandran India
Software Developer
India India
Arun Ramachandran is a Software Engineer having hands on experience in different Microsoft Technologies who is presently working in Experion Technologies, India. He has written over 95 articles on the subject on his blog at http://BestTEchnologyBlog.com. Along with 3 years of hands on experience he holds a Master of Computer Applications degree from Cochin University of Science & Technology (CUSAT).

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 23 Jun 2014
Article Copyright 2014 by Arun Ramachandran India
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid