Display and Editor templates in ASP.NET Core

Display and Editor templates specify the user interface layout of custom types. Consider the following Address model:

public class Address < public int Id < get; set; >public string FirstName < get; set; >= null!; public string MiddleName < get; set; >= null!; public string LastName < get; set; >= null!; public string Street < get; set; >= null!; public string City < get; set; >= null!; public string State < get; set; >= null!; public string Zipcode < get; set; >= null!; > 

A project that scaffolds the Address model displays the Address in the following form:

A web site could use a Display Template to show the Address in standard format:

Display and Editor templates can also reduce code duplication and maintenance costs. Consider a web site that displays the Address model on 20 different pages. If the Address model changes, the 20 pages will all need to be updated. If a Display Template is used for the Address model, only the Display Template needs to be updated. For example, the Address model might be updated to include the country or region.

Tag Helpers provide an alternative way that enables server-side code to participate in creating and rendering HTML elements in Razor files. For more information, see Tag Helpers compared to HTML Helpers.

Display templates

DisplayTemplates customize the display of model fields or create a layer of abstraction between the model values and their display.

A DisplayTemplate is a Razor file placed in the DisplayTemplates folder:

• For Razor Pages apps, in the Pages/Shared/DisplayTemplates folder.
• For MVC apps, in the Views/Shared/DisplayTemplates folder or the Views/ControllerName/DisplayTemplates folder. Display templates in the Views/Shared/DisplayTemplates are used by all controllers in the app. Display templates in the Views/ControllerName/DisplayTemplates folder are resolved only by the ControllerName controller.

By convention, the DisplayTemplate file is named after the type to be displayed. The Address.cshtml template used in this sample:

@model Address 
@Model.FirstName @Model.MiddleName @Model.LastName
 
@Model.Street
 
@Model.City @Model.State @Model.Zipcode
 
 

The view engine automatically looks for a file in the DisplayTemplates folder that matches the name of the type. If it doesn't find a matching template, it falls back to the built in templates.

The following code shows the Details view of the scaffolded project:

@page @model WebAddress.Pages.Adr.DetailsModel @ < ViewData["Title"] = "Details"; >
Details
 
Address
 
 
 
@Html.DisplayNameFor(model => model.Address.FirstName)
 
@Html.DisplayFor(model => model.Address.FirstName)
 
@Html.DisplayNameFor(model => model.Address.MiddleName)
 
@Html.DisplayFor(model => model.Address.MiddleName)
 
@Html.DisplayNameFor(model => model.Address.LastName)
 
@Html.DisplayFor(model => model.Address.LastName)
 
@Html.DisplayNameFor(model => model.Address.Street)
 
@Html.DisplayFor(model => model.Address.Street)
 
@Html.DisplayNameFor(model => model.Address.City)
 
@Html.DisplayFor(model => model.Address.City)
 
@Html.DisplayNameFor(model => model.Address.State)
 
@Html.DisplayFor(model => model.Address.State)
 
@Html.DisplayNameFor(model => model.Address.Zipcode)
 
@Html.DisplayFor(model => model.Address.Zipcode)
 
 
 
Edit | Back to List 
 

The following code shows the Details view using the Address Display Template:

@page @model WebAddress.Pages.Adr2.DetailsModel @ < ViewData["Title"] = "Details"; >
Details
 
Address DM
 
 
 
@Html.DisplayFor(model => model.Address)
 
 
 
Edit | Back to List 
 

To reference a template whose name doesn't match the type name, use the templateName parameter in the DisplayFor method. For example, the following markup displays the Address model with the AddressShort template:

@page @model WebAddress.Pages.Adr2.DetailsCCModel @ < ViewData["Title"] = "Details Short"; >
Details Short
 
Address Short
 
 
 
@Html.DisplayFor(model => model.Address,"AddressShort")
 
 
 

Use one of the available DisplayFor overloads that expose the additionalViewData parameter to pass additional view data that is merged into the View Data Dictionary instance created for the template.

Editor templates

Editor templates are used in form controls when the model is edited or updated.

An EditorTemplate is a Razor file placed in the EditorTemplates folder:

• For Razor Pages apps, in the Pages/Shared/EditorTemplates folder.
• For MVC apps, in the Views/Shared/EditorTemplates folder or the Views/ControllerName/EditorTemplates folder.

The following markup shows the Pages/Shared/EditorTemplates/Address.cshtml used in the sample:

@model Address 
 
Name:   
 
Street: 
 
city/state/zip:   
 
 

The following markup shows the Edit.cshtml page which uses the Pages/Shared/EditorTemplates/Address.cshtml template:

@page @model WebAddress.Pages.Adr.EditModel @ < ViewData["Title"] = "Edit"; >
Edit
 
Address
 
 
 
 
 @Html.EditorFor(model => model.Address) 
 
 
 
 
 
Back to List 
 @section Scripts < @> 

Additional resources

• View or download sample code (how to download)
• Tag Helpers
• Tag Helpers compared to HTML Helpers

The source for this content can be found on GitHub, where you can also create and review issues and pull requests. For more information, see our contributor guide.