What is Customizing Templated Helpers in ASP.NET MVC?. The Complete ASP.NET MVC Developer Course 2023 [Videos].

In this Video, I will discuss how to Customizing Templated Helpers in ASP.NET MVC application with examples. Please read our previous Video before proceeding to this Video where we discussed the Templated Helpers in MVC application. Here in this Video, 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 Video.

At the moment, when we navigate to http://localhost:61629/Employee/Edit it will display the following page.

Customizing Templated Helpers in ASP.NET MVC Application

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.

Customizing Templated Helpers in MVC application

The following convention is used by the MVC Framework to find the customized templates
  1. 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.
  2. 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.
  3. 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

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToString("dd/MM/yyyy") : string.Empty), new
@class = "date"

Step5: Copy and paste the following code within the Edit.cshtml view

@model TemplateHelpersMVC.Models.Employee
ViewBag.Title = "Edit";
Layout = null;
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/themes/base/datepicker.css" rel="stylesheet" />
<script type="text/javascript">
dateFormat: "dd/mm/yy"
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
@using (@Html.BeginForm())
<h2>Edit Employee</h2>
<br />
<input type="submit" value="Save" />

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.

See All

Comments (294 Comments)

Submit Your Comment

See All Posts

Related Posts

ASP.NET MVC / Youtube

What is MVC?

MVC is an architectural software design pattern that is used for developing interactive applications where their user interaction is involved and based on the user interaction some event handling has occurred. It is not only used for web-based applications but it can also be used for Desktop or mobile-based applications where there are user interactions involved.
28-jan-2022 /28 /294

ASP.NET MVC / Youtube

How to Creat First ASP.NET MVC Application using Visual Studio?

In this article, I am going to discuss how to create the first ASP.NET MVC Application step by step from scratch using Visual Studio 2015. You can use any version as per your choice but the step will remain the same. Please read our previous article before proceeding to this article where we gave a brief introduction to ASP.NET MVC Framework.
28-jan-2022 /28 /294

ASP.NET MVC / Youtube

What is ASP.NET MVC File and Folder Structure?

In this article, I am going to discuss the auto-generated ASP.NET MVC File and File Structure when we create a new ASP.NET MVC application. Please read our previous article before proceeding to this article where we discussed how to create ASP.NET MVC 5 application step by step from scratch.
28-jan-2022 /28 /294