Using Display Templates and Editor Templates in ASP. NET MVCIntroduction 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 < 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. 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. 5 Creating RTF Templates Using the Template Builder. If you select New Page per. Such a customization is not possible with the above- mentioned HTML helpers. Another example could be a Date. Time model property that needs to be displayed in a specific custom format.
Sublime Text is a sophisticated text editor for code, markup and prose. Style a Select Box Using Only CSS. It's a common practice to apply CSS to a page that styles elements such that. Colors: Text */.slate select. ![]() The following MVC editor templates are available: Display. For()Display. For. Model()Editor. For()Editor. For. Model()The 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 don't 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. For(model => model. Birth. Date). @Html. Editor. For(model => model. Birth. Date). Creating and Using Display Templates. Now that you know what display and editor templates are, let's 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(). It then passes this Employee object to the Index view. The Index view contains the following markup: @model Display. Editor. Templates. Demo. Models. Employee. It then uses the Display. For() helper to show three model properties: Employee. ID, First. Name, and Birth. Date. At this stage, you haven't 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, let's 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. < h. 1> #@Model< /h. As you can see, this display template sets its model to be Int. It then renders the Model property in the < h. On the same lines, create String. Date. Time. cshtml as shown: String. Model< /strong>. Date. Time. cshtml. Date. Time. < strong> @Model. To. String(. The same holds true for String and Date. Time model properties. Creating and Using Editor Templates. Now, let's 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. @? The three for loops create generate a List of Select. List. Item objects that contain days, months, and years, respectively. Notice how the default selection in these dropdownlists is made using the current model value and Selected property. The year dropdownlist contains a certain number of years from the past and future. These offsets are passed from the view using the Previous. Year. Count and Next. Year. Count View. Data / View. Bag properties. To display the Birth. Date model property using the editor template you just created, add the following code to the Index view.@Html. Editor. For(m => m. Birth. Date, new . Notice how the Previous. Year. Count and Next. Year. Count values are passed as an anonymous object. These properties are translated to equivalent View. Data entries and are accessible inside the editor template (as you did in the editor template code earlier). If you run the application, you will see this: The Birth. Date Model Property. Using Display. For. Model() and Editor. For. Model()The Display. For() and Editor. For() helpers work for a single model property. At times, you need to render a user interface for the whole model. For example, you may have a model property that is of a complex type (say, a property that is of type Address). In such cases, you can use the Display. For. Model() and Editor. For. Model() helpers. These helpers pick display and editor templates based on the model type. If no template is found, they use a default template. To see Display. For. Model() and Editor. For. Model() in action, add Employee. Display. Templates and Editor. Templates. Add the following markup in the Employee. Display. Templates folder: @model Display. Editor. Templates. Demo. Models. Employee. Notice how Display. For() is used to display the Birth. Date property (and we have a custom template for Date. Time properties). Add the following code in the Employee. Editor. Templates folder.@model Display. Editor. Templates. Demo. Models. Employee. At times, you may want some of the model properties of the said data type to use some different templates. You can hint your intention by using the . If you run the application, you will see the Birth. Date property being displayed like this: Birth. Date Property Summary. Display templates and editor templates allow you to display model properties using a custom UI template. The Display. For(), Display. For. Model(), Editor. For(), and Editor. For. Model() helpers pick display / editor templates based on the data type of a model property. Custom display / editor templates are . Display. Templates and Editor. Templates folders under the Views > Shared folder. Together, they provide a flexible way to display or edit model properties as compared to helpers such as Label. For() and Text. Box. For(). Extra Reading Links.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
November 2017
Categories |