Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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

7 comments:

  1. Hi, i doit everything, but not fuction the app.

    Unhandled exception at line 51, column 9 in http://localhost:58339/home/editss

    0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'datepicker'

    I Work with MVC 4 i follow step by step and so, doesnt work, can you help me please

    tnks a lot.

    ReplyDelete
  2. $(function () {
    $("#HireDate").datepicker(
    {
    dateFormat: "dd/mm/yy"
    });

    ReplyDelete
  3. Could you please provide code snippet for making dropdown using such away?

    ReplyDelete
  4. jquery problem with visual stuio 2019

    ReplyDelete
    Replies
    1. for new MVC create VS 2015 or 2017 the register of jQuery scrpt and ccs are done by class BundleConfig(), which is located in /App_Start folder of a project

      For example

      public class BundleConfig
      {
      ......
      bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-ui-*"));
      bundles.Add(new StyleBundle("~/Content/themes/base").Include("~/Content/themes/base/jquery.ui.all.css"));

      Delete
    2. In BundleConfig.cs file, add these code

      bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
      "~/Scripts/jquery-ui-1.12.1.js"));
      bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
      "~/Content/themes/base/jquery-ui.css"));

      Also in _Layout.cshml master file, add these code
      [head]
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/jqueryui")
      [/head]

      .....

      [body]
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/jqueryui")
      [/body]

      Delete
  5. In Employee.cs File, make sure DataType attribute of HireDate is DateTime as below, because DateTime.cshtml will be rendered only when DataType attribute is DateTime

    [DataType(DataType.DateTime)]
    public DateTime? HireDate { get; set; }

    ReplyDelete

It would be great if you can help share these free resources