ASP.NET MVC View Templates

View Templates: 

The MVC Framework supports view templates to specify which model object or property we want to display or edit and leave the MVC Framework to figure out what HTML elements should be used.

The template view helpers use to specifying the HTML element to represent a model property. MVC Framework automatically figures out HTML element use to render property. We do not need to update our views when we update a view model.

MVC framework has some html helper functions to generate HTML element based on model property or attribute:

@Html.EditorFor()/Editor(): Generates an HTML element for editing the property. For example if property is string type then input type text box will generate and if property type is Boolean then check box will renders.

@Html.DisplayFor()/Display(): Render HTML elements that display values from the model property value in a read-only form.

@Html.LabelFor()/Label(): Render HTML label elements that display model property name.

@Html.DisplayTextFor()/DisplayText():Bypasses all templates and renders a simple string representation of the specified model property.

ASP.Net MVC framework also provide helper method which map to all property of entire model using a helper method. This helper generates HTML labels and editor elements for the properties in the model object; we don’t need to pass the model to the helper as a parameter because it is read directly from the view by the helper.

@Html.DisplayForModel():Renders a read-only view of the entire model object.

@Html.EditorForModel():Renders editor elements for the entire model object.

Model Metadata: We can use model metadata to provide instructions to the helpers about how to handle our model types. Metadata is expressed using attributes, where attributes and parameter values provide a range of instructions to the view helpers.

We can use the HiddenInput attribute, which causes the helper to render a hidden input field.

Exp:  [HiddenInput]

If we want to hide a property entirely, then we can set the value of the DisplayValue property in the DisplayName attribute to false.

[HiddenInput(DisplayValue = false)]

We can also use “Display” property to set display name of model property.

[Display(Name = "Date of Birth")]

We can also use metadata to provide instructions about how a model property should be displayed.

[DataType(DataType.Date)]

DataType	Description
DateTime	Displays a date and time
Date	Displays the date only
Time	Displays the time only
Text	Displays a single line of text
MultilineText	Renders the value in a textarea element
Password	Displays the data so that individual characters are masked from view
Url	Displays the data as a URL.
EmailAddress	Displays the data as an e-mail address.

Metadata to Select a Display Template: We can use the UIHint attribute to specify the template we want to use to render HTML for a property.

Metadata to an entity model class: We can apply metadata to an entity model class. To make this happen is to ensure that the model class is defined as partial and to create a second partial class that contains the metadata.

Partial class same as auto generate class (Like Entity framework class)

[MetadataType(typeof(EmployeeMetadataSource))]

    public partial class Employee

    {

    }

Metadata class :

    class EmployeeMetadataSource

    {

        [HiddenInput(DisplayValue = false)]

        public int EmployeeId { get; set; }

        [DataType(DataType.Date)]

        [Display(Name = "Date of Birth")]

        public DateTime DateofBirth { get; set; }

    }

Custom Editor/Display Template: Custom Editor Template allows us to render exactly the HTML we want. To create a custom editor template first we need to create a folder named “EditorTemplates” in the ~/Views/Shared folder of our project. We can create a partial view as custom template for Address to reuse all over the site for same identical look in “EditorTemplates” folder. We can create display template same as editor one in folder “DisplayTemplates”.

We can also create a generic template like for dropdown of enum and can set that template using [UIHint("Enum")]. Can create a template where enum will pass as model.

@model Enum

@Html.DropDownListFor(m => m, Enum.GetValues(Model.GetType())

.Cast<Enum>()

.Select(m => {

string enumVal = Enum.GetName(Model.GetType(), m);

return new SelectListItem() {

Selected = (Model.ToString() == enumVal),

Text = enumVal,

Value = enumVal

};

}))

[UIHint("Enum")]

public Desination Desination { get; set; }

Note:  If we create a custom template with same name as built in template then MVC framework give preference to custom template.