In this session of ASP.NET Core Tutorial we talk about DisplayTemplates and EditorTemplates and customize the Views that we created in session 34 and 35 with DisplayForModel and EditorForModel. As their names imply, DisplayTemplates is for customizing Views that are created by DisplayForModel. Moreover, EditorTemplates is able to customize Views which are implemented by EditorForModel.
DisplayTemplates in ASP.NET Core MVC
To customize a View that was implemented by DisplayForModel, first we should create a folder with name of DisplayTemplates in Views/Shared folder. But, if we want to modify just views of a specific controller, we can create above mentioned folder in Views/ControllerName. Then, for modifying each property or group of properties we should create a View file inside above mentioned created folder with specific name.
Open URL link in new window through DisplayTemplates in ASP.NET Core MVC
For this purpose, we should create a View file in Views/Shared/DisplayTemplates folder with name of Url.cshtm. Then, use Anchor Tag inside the file and use ViewData.Model as href and label of the link.
|
1 2 3 4 5 |
<a href="@ViewData.Model" target="_blank">@ViewData.Model</a> |
Customize Properties with String type with DisplayTemplates in ASP.NET Core MVC
For this purpose we should create a View file in Views/Shared/DisplayTemplates folder with name of string.cshtm. Then, inside this file, we can modify style of the properties with type of “String”. Also, for accessing the value of the property, we can use ViewData.Model.
|
1 2 3 4 5 |
<strong style="color:blue">@ViewData.Model</strong> |
Change DateTime display format with DisplayTemplates in ASP.NET Core MVC
For this purpose we should create a View file in Views/Shared/DisplayTemplates folder with name of DateTime.cshtm. Then, bind the View to DateTime type with Model Directive and for accessing the value of the property we can use @Model. Moreover, for customizing the DateTime format we can convert the value to string with ToString() method. Moreover, we can set the format as input parameter of ToString(“dd/MM/yyyy”) method.
|
1 2 3 4 5 6 |
@model DateTime @Model.ToString("dd/MM/yyyy") |
EditorTemplate in ASP.NET Core MVC
We can customize the Edit Form that use EditorForModel with EditorTemplates, for this purpose we should create a folder with name of EditorTemplates in Views/Shared folder. But, if we want to modify just views of a specific controller, we can create above mentioned folder in Views/ControllerName. Then, for modifying each property or group of properties, we should create a View file inside above mentioned created folder with specific name.
Change DateTime format in Textbox with EditorTemplate
For changing DateTime format in Edit Form, we can create a View file inside Views/Shared/EditorTemplates folder with name of DateTime.cshtml. Then, bind the view to DateTime with Model Directive. Next, use TextBox Html Helper and use Model.ToString(“dd/MMM/yyyy”) for customizing the format.
|
1 2 3 4 5 6 |
@model DateTime @Html.TextBox("",Model.ToString("dd/MMM/yyyy")) |
Customize TextBox of properties with String type
For this purpose, this time we create a view file inside Views/Shared/EditorTemplates with name of string.cshtml. Then, with help of TextBox HtmlHelper and Html Attribute we can modify the TextBox of properties with String type.
|
1 2 3 4 5 6 |
@model string @Html.TextBox("", Model, new {style="color: green; background-color: yellow" }) |
If you need more details, watch this session video. Also, for being updated about our coming sessions, follow us on Instagram, Facebook, Telegram or YouTube. Also you can have access to list of all sessions HERE.
You can download this Session Slides form HERE