Display And Edit Templated Helpers In ASP.NET MVC

In this tutorial we will discuss Template helper in ASP.NET MVC. Template helper is introduced in MVC-2, and it is classified into two categories.

1. Display template
2. Editor Template

Display Template Helper Type

1. @Html.DisplayForModel() :- This Display template helper is used with strongly typed views. It goes through the every property in the model for displaying object.
   
   
2. @Html.DisplayFor(modal => modal) :- This Display template helper is used with strongly typed views , if model has properties which return complex objects then this template helper is very useful.
   
   
3. @Html.Display(“StudentData”) :- This Display template helper is not a strongly typed view. If we store data in viewData then this template helper is used to get that data by key.

Editor Template Helper Type

Like Display template Editor template also has three types,

1. @Html.EditorForModel()
2. @Html.Editor("StudentData")
3. @Html.EditorFor(model => model)

These helpes also work like display template.

@Html.DisplayForModel() And @Html.EditorForModel()

For understanding this template we will take previous example class which we have designed like following. Previous example link is,

[MetadataType(typeof(StudentMetaData))]
public partial class Student
{
}
public class StudentMetaData
{
#region dataType attribute
[HiddenInput(DisplayValue = false)]
public int Id { get; set; }
[ReadOnly(true)]
[DataType(DataType.EmailAddress)]
public string EmailAddress { get; set; }
[DataType(DataType.Currency)]
public int? WinningPrize { get; set; }
// Generate a hyperlink
[DataType(DataType.Url)]
[UIHint("OpenInNewWindow")]
public string PersonalWebSite { get; set; }
[DataType(DataType.Date)]
public DateTime? AdmissionDate { get; set; }
[DisplayAttribute(Name = "Full Name")]
public string FullName { get; set; }

[DisplayFormat(DataFormatString = "{0:d}")]
public DateTime? HireDate { get; set; }

[DisplayFormat(NullDisplayText = "Gender not specified")]
public string Gender { get; set; }
#endregion
}

Now create a Home Controller and create Action method for Detail and Edit, we are taking previous example there we have already designed these action method.

The Detail action method code is like following,

public ActionResult Details(int id)
{
MVCVariousAttributeEntities _context = new MVCVariousAttributeEntities();
Student _studentDetail = _context.Students.Where(c => c.Id == id).SingleOrDefault();
return View(_studentDetail);
}

Create a view for Detail Action method with the strongly typed view and Scaffold template as “Detail”. When you add this view then you will see lot of HTML code in this DetailView like following.

@model MVCApplicationWithVariousAttribute.Models.Student
@{
ViewBag.Title = "Details";
}
<div style = >
<h2>Details</h2>
<fieldset>
<legend>Student</legend>
<div class="display-label">
@Html.DisplayNameFor(model => model.FullName)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.FullName)
</div>
<div class="display-label">
@Html.DisplayNameFor(model => model.Gender)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.Gender)
</div>
<div class="display-label">
@Html.DisplayNameFor(model => model.EmailAddress)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.EmailAddress)
</div>
<div class="display-label">
@Html.DisplayNameFor(model => model.PersonalWebSite)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.PersonalWebSite)
</div>
</fieldset>
</div>

Instead of this we can use one the Display template so the view code will be like,

@model MVCApplicationWithVariousAttribute.Models.Student
@{
ViewBag.Title = "Details";
}
<div style = >
<h2>Details</h2>
@Html.DisplayForModel()
For the edit action method we can do same
@model MVCApplicationWithVariousAttribute.Models.Student
@{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
<div style= Arial>
@using (@Html.BeginForm())
{
@Html.EditorForModel()
}
</div>

@Html.Display(“StudentData”) And @Html.Editor(“StudentData”)

This template is used when do not use scaffold template and we pass data through ViewData or ViewBeg. Code for Edit Action method will be like following,

public ActionResult Details(int id)
{
MVCVariousAttributeEntities _context = new MVCVariousAttributeEntities();
Student _studentDetail = _context.Students.Where(c => c.Id == id).SingleOrDefault();
ViewData["StudentData"] = _studentDetail;
return View();
return View(_studentDetail);
}

And the view code will be like following,

@{
ViewBag.Title = "Details";
}

<h2>Details</h2>

<fieldset>
<legend>Student</legend>
@Html.Display("StudentData")
</fieldset>

We can do the same with Edit template also, so when we run this application in all the conditions, output will be the same for the display template output.

The edit template will be,

you can go to my blog also.