MSDN Magazine Issues. Free HTML Website Maker. Create awesome website with slideshow in seconds. For Mac and WindowsUsing Display Templates and Editor Templates in ASP. NET MVCWEBINAR On demand webcast. How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2. REGISTER Introduction to MVC Editor Templates. ASP. NET MVC developers often use HTML helpers such as Label. For and Text. Box. For to display model properties on a view. Although this approach works fine in many situations, it proves to be inadequate when you wish to customize how data is presented to the user for displaying and for editing. Luckily, you can use display templates and editor templates to overcome this limitation. This article discusses what display templates and editor templates are and how to use them in an ASP. NET MVC application. What Are MVC Display Templates and Editor Templates When you an HTML helper, such as Label. For or Text. Box. For, it displays a model property in a fixed manner. For example, Label. For renders a model property name in a lt label tag and Text. Box. For renders a textbox in which a model property is shown for editing. Although this arrangement works fine in many cases, at times you need more control over the way data is shown to the end user. WkfNYLUeU-k/VPb7j5w4v9I/AAAAAAAAAGc/djr4bilNUAI/s1600/webform.jpg' alt='Website Templates In Asp Net Tutorials Visual Basic' title='Website Templates In Asp Net Tutorials Visual Basic' />Consider, for example, that you have a model property that represents currency. While displaying this property value to the end user, you want to show a currency symbol such as along with the property value. Such a customization is not possible with the above mentioned HTML helpers. Another example could be a Date. Website Templates In Asp Net Tutorials Visual Basic' title='Website Templates In Asp Net Tutorials Visual Basic' />Step Two. If you are not already on Default. Default. aspx. vb. You will see a private sub called. Sir You Are my ITCareerWay, In YesterdayOn 20102012 I faced One Interview in that i got several Questions on Asp. Below. Bipin Joshi discusses what display templates and editor templates are and how to use them in an ASP. NET MVC application. Discover how to add MVC editor templates to. ASP. NET Core is a new opensource and crossplatform. NET framework for building modern cloudbased web applications on Windows, Mac, or Linux. Learn the benefits of. Time model property that needs to be displayed in a specific custom format. Luckily, ASP. NET MVC comes with templated helpers that can be used in such cases. The following MVC editor templates are available Display. ForDisplay. For. ModelEditor. ForEditor. For. ModelThe Display. For helper displays a model property using what is known as a Display Template. A display template is simply a user interface template that is used to display a model property. If no custom display template is provided by developers, a default one is used. The Display. For. Model helper is similar to Display. For but displays the whole model not just a single property using a display template. The Editor. For helper displays a user interface for editing a model property. This user interface is known as Editor Template. The Editor. For. Model helper displays the whole model for editing using a given editor template. All the helpers listed above pick a template based on the data type of a model property. When creating views, you can use Display. For, Display. For. Model, Editor. For, and Editor. For. Model helpers even if you dont intend to have a customized user interface. Later, if you decide to have a customized interface, all you need to do is define the display and editor templates. Just to get an idea of how these helpers work, look at the following figure Display Helper The preceding figure shows a model property named Birth. Date System. Date. Time displayed using a custom display template and editor template respectively. This user interface is the result of the following view code Html. Display. Formodel model. Birth. Date. Html. Editor. Formodel model. Birth. Date. Creating and Using Display Templates. Now that you know what display and editor templates are, lets begin with an example of creating a custom display template. Create a new ASP. NET MVC application Empty project template and add Entity Framework Data Model for the Employees table of Northwind database. This model is shown in the following figure Entity Framework Data Model. Then, add Home. Controller and Index view to the project. Next, add the following code in the Index action method. Action. Result Index. Northwind. Entities dbnew Northwind. Entities. Employee emp db. Employees. Find1. Viewemp. The preceding code retrieves an Employee from the database whose Employee. ID is 1. It then passes this Employee object to the Index view. The Index view contains the following markup model Display. Editor. Templates. Demo. Models. Employee. Layout null. usingHtml. Begin. Form. Html. Display. Form m. Employee. ID. Html. Display. Form m. First. Name. Html. Display. Form m. Birth. Date. The Index view sets the model for the view to be Employee class. It then uses the Display. For helper to show three model properties Employee. ID, First. Name, and Birth. Date. At this stage, you havent defined any custom display templates. If you run the application, you will find that the Display. For helper uses default templates to output the model properties, as shown in the following figure Default Template Now, lets define some custom templates. To do so, create a Shared sub folder under the Views folder. Then, add a Display. Templates sub folder inside the Shared folder. Remember that this folder name must be Display. Templates. As mentioned earlier, the Display. For helper looks for custom display templates inside this folder based on the data type of a model property being displayed. In the previous example, the Employee. ID, First. Name, and Birth. Date properties are of type Int. String, and Date. Time respectively. To create custom display templates, add three partial views to the Display. Templates folder and name them Int. String. cshtml, and Date. Time. cshtml, respectively. Remember that the names of these display template files must reflect the data types they deal with. Then, add the following code to the Int. Int. 32. lt h. 1 Modellt h. As you can see, this display template sets its model to be Int. It then renders the Model property in the lt h. On the same lines, create String. Date. Time. cshtml as shown String. Modellt strong. Date. Time. cshtml. Date. Time. lt strong Model. To. Stringdd MMM yyyylt strong. Notice how the string data is being rendered by using the lt string tag and how the Date. Time data is being formatted by using the dd MMM yyyy format. If you run the application again, you will see the following in the browser dd MMM yyyy format. Remember that once the templates are created, all the model properties of Int. The same holds true for String and Date. Time model properties. Creating and Using Editor Templates. Now, lets create a custom editor template for the Date. Time data type. To do so, create an Editor. Templates sub folder under the Shared folder and add a Date. Time. cshtml file there. This process is quite similar to what you did for creating display templates. Then, add the following code to the Date. Time. cshtml editor template model Date. Time. Listlt Select. List. Item days new Listlt Select. List. Item. Addnew Select. List. Item Text i. To. String, Value i. To. String, Selected i Model. Day true false. Listlt Select. List. Item months new Listlt Select. List. Item. Addnew Select. List. Item Text i. To. String, Value i. To. String, Selected i Model. Month true false. Listlt Select. List. Item years new Listlt Select. List. Item. Year. Count View. Bag. Previous. Year. Count. int next. Year. Count View. Bag. Next. Year. Count. Model. Year prev. Year. Count i lt Model. Year next. Year. Count i. Addnew Select. List. Item Text i. To. String, Value i. To. String, Selected i Model. Year true false. Html. Ben 10 Omniverse Psp Iso. Drop. Down. Listdays, days. Html. Drop. Down. Listmonths, months. Html. Drop. Down. Listyears, years.