Part 45 - Customize display and edit templates in asp.net mvc

Suggested Videos 
Part 42 - Opening a page in new browser window in mvc 
Part 43 - Hiddeninput and readonly attributes 
Part 44 - Display and edit templated helpers

In this video, we will discuss customizing datetime editor template. Please watch Part 44, before proceeding. We will be using the same example, that we worked with in Part 44.



At the moment, when you navigate to localhost/MVCDemo/Home/Edit/1, the output is as shown below.




Notice that, for HireDate, users have to type in the date. Dates have got different formats. For example, MM/DD/YYYY or DD/MM/YY etc. So, different users may type it differently. Also, from a user experience, it is better to display a DateTime picker from which the user can simply select the date.

The built-in DateTime editor template used by MVC, simply displays a textbox for editing Dates. So, let's customize the DateTime editor template, to use jQuery calendar. We want the output as shown below.


The following is the convention used by MVC to find the customized templates
1. The customized display templates must be in a sub-folder that is named - DisplayTemplates. Editor templates must be in a sub-folder that is named - EditorTemplates.
2. These sub-folders can live in "Shared" folder, or a specific views folder. If these folders are present in the Shared folder, then the templates are available for all the views. If they are in a specific views folder, then, they are available only for that set of views.
3. The name of the template must match the name of the type. For example, as we are customizing DateTime template, the name of the template in this case has to be DateTime.ascx or DateTime.cshtml.

Adding a Custom DateTime Editor template
Step 1: If "Shared" folder does not already exists in your project, right click on the project in solution explorer and add it.

Step 2: Right click on the "Shared" folder, and "EditorTemplates" folder.

Step 3: Right click on "EditorTemplates" folder and add a view with name = DateTime

Step 4: 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" })
Note: Please refer to the following MSDN articel for all the DateTime format strings
http://msdn.microsoft.com/en-us/library/8kb3ddd4.aspx

Step 5: Copy and paste the following code in Edit.cshtml view
@model MVCDemo.Models.Employee
@{
    ViewBag.Title = "Edit";
}

<h2>Edit</h2>

<script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    $(function() 
    {
        $("input:text.date").datepicker(
        {
            dateFormat: "dd/mm/yy"
        });
    });
</script>

@using (@Html.BeginForm())
{    
    @Html.EditorForModel()
    <br />
    <input type="submit" value="Save" />
}

Note: Please refer to the following jQuery link for DateTime format strings
http://jqueryui.com/resources/demos/datepicker/date-formats.html

The following jQuery scripts and css files are required for jQuery DateTime picker control. However, these files may change depending on the version of jQuery you are working with.
Scripts/jquery-1.7.1.min.js
Scripts/jquery-ui-1.8.20.min.js
Content/Site.css
Content/themes/base/jquery.ui.all.css