Friday 16 August 2013

Using Display Templates or Editor Templates

DisplayTemplates or EditorTemplates is used for providing custom template for a model property whether it is of a single object type or a collection of an object type. DisplayTemplates or EditorTemplates can be used to automatically render an object type in all views in the application or in all views of a particular controller. It can also only be called when needed.

To use that, first create the template (view) for the object type with this name 'object_type.cshtml' under DisplayTemplates or EditorTemplates folder under Views\Shared or a particular controller's views folder (e.g.; Views\Home). By default the framework will search under a controller views folder first then the Shared folder. If we put the template under Shared folder then it will apply to all views. Whenever a particular object type is rendered using EditorFor or DisplayFor, the framework will use the template.

For example, below is a template for a class object type called ItemViewModel:
@model ItemViewModel

@Html.DisplayNameFor(model => model.ItemId)
@Html.DisplayFor(model => model.ItemId)

@Html.DisplayNameFor(model => model.ItemName)
@Html.DisplayFor(model => model.ItemName)

Then render the property with EditorFor or DisplayFor helper method on a view.
EditorFor(model => model.Items)

That's all that we need to do. If the property is a collection of an object type then the template will be rendered multiple times for each item.

If we want the new template to be used only when we call it, then we could name the template using other name other than the object type (e.g.; MyCustomTemplate.cshtml). Then to use it we can specify the template name as the second argument on EditorFor or DisplayFor method
EditorFor(model => model.Items, "MyCustomTemplate")
or by using UIHint attribute on the object property
[UIHint("MyCustomTemplate")]
public IList<ItemViewModel> Items { get; set; }

No comments: