Customizing Templated Helpers in ASP.NET MVC

Back to: ASP.NET MVC Tutorial

Customizing Templated Helpers in ASP.NET MVC Application

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 user’s 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, let’s 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

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">
    $(function()
    {
        $("input:text.date").datepicker(
        {
            dateFormat: "dd/mm/yy"
        });
    });
</script>

<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            @using (@Html.BeginForm())
            {
                <h2>Edit Employee</h2>
                @Html.EditorForModel()
                <br />
                <input type="submit" value="Save" />
            }
        </div>
    </div>
</div>

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.

In the next article, I will discuss how to create Custom HTML Helpers in ASP.NET MVC application. Here, in this article, I try to explain how to Customizing Template Helpers in MVC application with one real-time example. I hope this article will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this article.