A simple CSS accordion menu with support for sub level items. What are some of the advantages of using one over the other How to use CSS template in my ASP. Creating first asp. Creating asp. net websites using css templates, master page. No more missed important software updates UpdateStar 11 lets you stay up to date and secure with the software on your computer. Custom Templates, Data Annotations and UI Hints in ASP. NET MVCThis article is from our ASP. NET MVC 1. 01 Tutorial Series. Today we look at a feature in ASP. NET MVC that is not really new but immensely useful if we are building ASP. NET MVC applications that lean on the server to do the UI rendering rather than using Java. Script frameworks like Knockout. JS. Display Templates conceptually are tied to how a particular rendering engine Razor or Webforms etc. Type of the model element it is trying to render and then using that information, pick up the Display Template that needs to be used. Along with type, other attributes like Data Annotations and UI Hints are also used to determine the final outcome of our UI. A Simple ASP. NET MVC Demo. Lets look at these concepts in a little more details using a simple demo app. Webform Css Templates WebsitesSay we start off with the Internet Application ASP. NET MVC4 Project Add an Entity in the Model folder with the following propertiespublic class Time. Card public int Id get set public string Subject get set public string Description get set public Date. Time Start. Date get set public Decimal Number. Adobe Photoshop End User License Agreement here. Of. Hours get set Use the Add Controller method to scaffold up the Controller and Views for it. If we run the Application now and Navigate to the Create page for the Default. Controller, it looks like this. Webform Css Templates For Websites' title='Webform Css Templates For Websites' />Now we will go back to the Time. Card entity and decorate it with attributes as followspublic class Time. Card public int Id get set public string Subject get set Data. Golden Earring Discography there. TypeData. Type. Multiline. Webform Css Templates' title='Webform Css Templates' />Text public string Description get set Display. NameStart Date public Date. Time Start. Date get set Data. TypeData. Type. Duration Display. NameNumber of Hours public Decimal Number. Of. Hours get set When we run the application again, the view changes to the following. As we can see, the Description box is now much bigger thanks to the Data. Type annotation, and the labels look better thanks to the Display. Name attribute. However we still dont have any Date. Picker for our Dates, and what if we wanted the Number of hours to be a select going from 1 to 2. We could always go ahead and edit the view and cram in the required j. Query to put in a Date Picker. Similarly we could remove the default text box that our MVC scaffolding is generating and replace it with a custom Select. Or, there is another way around it Custom Templates. Webform Css Templates With DropCustom Templates in ASP. NET MVC. Universal Template. Lets see how we can use Custom Templates to replace the Start Date with a Date Picker. By universal template, I mean the changes that we are going to do is going to apply to the entire project. In the Shared folder, well add a folder called Editor. Templates Next we add a CSHTML file called Date. Webform Css Templates Free' title='Webform Css Templates Free' />Time. Date. TimeHtml. Text. Serial Port Mscomm. Box, Model. Has. Value Model. Value. To. Short. Date. String string. Empty, new class datepicker As we can see, it simply drops in a Text. Box with a CSS class called datepicker. This magically doesnt convert it into a date picker. To tie it up with a date picker Java. Script control, you need to do a couple of additional steps. First thing, add a new Java. Script file in the Scripts folder and call it jquery. In the JS file we drop the following Java. Scriptfunction . Now weve to include it in one of our Java. Script bundles. Lets update the Bundle. Config. cs and add it to the jquery bundles as followsbundles. Addnew Script. Bundlebundlesjqueryval. Include Scriptsjquery. Scriptsjquery. validate, Scriptsjquery. We are all set. Note we have not touched any of the cshtml files. Webform Css Templates' title='Webform Css Templates' />Lets run the application. The create page will be as follows If you save the entry and navigate back to it for Editing, youll see that the Edit page also has a date picker. Fact is, here on when we use the Html. Editor. For any Date. Time type of field, it will get the date picker for free. Reducing Scope of the Editor. Now if we wanted to reduce the scope of the Template, we could very well define it under ViewsDefaultEditor. Templates. This would have restricted it to the view in the Default controller. Inverting the Template Association. Now that weve seen how to do a Universal Template and a Template per controller, lets see what it takes to create a template that will be used only if we want to use it. Lets add another cshtml file under the Editor. Templates folder and call it Hours. Of. The. Day. cshtml Add the following markup to itmodel Decimal Please Selectlt option for int i 1 i lt 2. Model. Has. Value intModel. Value i lt option valuei selectedselected ilt option else lt option valuei ilt option lt select What this does is for Decimal values it provides a drop down with items 1 to 2. It also checks if the input value is between 1 2. Now since it has a name Hours. Of. The. Day it will not get bound to all Decimal fields automatically. Instead there are two options to bind it. Option 1 Using the UIHint attribute on our Model as followsData. TypeData. Type. Duration Display. NameNumber of Hours UIHintHours. Of. The. Day public Decimal Number. Of. Hours get set As we can see, the UIHint provides the name of the Template to use. Again this makes it applicable to all pages to which this Entity Type is bound. Option 2 If we want even finer grained control over when the template should be used, we can remove the UIHint from the attribute and use it in the cshtml markup as followslt div classeditor field Html. Editor. Formodel model. Number. Of. Hours, Hours. Of. The. Day Html. Validation. Message. Formodel model. Number. Of. Hours lt div Conclusion. With that we wrap up this peek into Custom Templates. We looked at Editor Templates specifically and how to use them either universally or in a fine grained manner. We can also use Template for managing the Display only. These go under the folder Display. Templates. For example we could use a Display template to show all datetime fields as short dates only. Download the entire source code of this article Github. Will you give this article a 1 Thanks in advance.