Best resource for Online free Education
In this article, I will discuss how to Customizing Templated Helpers in ASP.NET MVC application with examples. Please read our previous article before proceeding to this article where we discussed the Templated Helpers in MVC application. Here in this article, we are going to customize the date-time editor template which is going to render DateTime in a specific format. We are going to work with the same example that we created in our previous article.
At the moment, when we navigate to http://localhost:61629/Employee/Edit it will display the following page.
Notice that in the above image, for the HireDate, the users have to type the date in the date text box. As we all know the date-time has different formats. For example, it may be MM/DD/YYYY or DD/MM/YY, etc. So, different users may enter the date value in a different manner. Also, from the users point of view, it is always better to display a DateTime picker from which the user can easily select the date.
The built-in DateTime editor template used by ASP.NET MVC Framework simply displays a textbox for editing the Dates. So, lets customize the DateTime editor template, to use the jQuery calendar. We want the output as shown in the below image.
The following convention is used by the MVC Framework to find the customized templates
- The customized display templates must be stored in a sub-folder with the name DisplayTemplates. Similarly, the customized Editor templates must be stored in a sub-folder with the name EditorTemplates.
- These sub-folders can be created within the “Shared†folder or within a specific view folder. If these folders are present within the Shared folder, then the templates are available for all the views. If they are present within a specific views folder, then, they are only available the views which are present in that specific views folder.
- The most important point that you need to keep in mind is the name of the template must match the name of the data type. For example, as we are going to customizing the DateTime template, the name of the template must be DateTime.cshtml.
Adding a Custom DateTime Editor template
Step1: If the “Shared†folder does not already exist in your project within the views folder, then right-click on the Views folder and add it.
Step2: Right-click on the “Shared†folder, and “EditorTemplates†folder.
Step3: Right-click on “EditorTemplates†folder and add a partial view with the name DateTime
Step4: Copy and paste the following code in DateTime.cshtml partial view
Step5: Copy and paste the following code within the Edit.cshtml view
Now run the application and you will see a jquery date picker is used to display the DateTime as expected. Please download the latest version of Jquery and Jquery UI from the NuGet in order to work it properly. If there is some version mismatch then it will not work.