Display and edit templated helpers in asp.net mvc

In this tutorial we will discuss about 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 3 types

@Html.EditorForModel()

@Html.Editor("StudentData")
@Html.EditorFor(model => model)

These helper also work like display template.

1.    @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 = "font-family:Arial"> <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 = "font-family:Arial"> <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="font-family" Arial> @using (@Html.BeginForm()) {     @Html.EditorForModel() } </div>

2.    @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>

Same we can do with Edit template also

So when we run this application in all the condition output will be the same

For the display template output will be

The edit template will be