MVC3 - Utiliser facilement le Datepicker de JQuery.

Un des points apportant le plus de productivité dans le framework ASP.NET MVC est surement l'avènement des Display & Editor Templates.

Je m'explique si vous suivez les best practices et que vos vues ressemblent plus ou moins à cela :

@model CustomMVCScaffolder.Models.Employee

@* This partial view defines form fields that will appear when creating and editing entities *@

    @Html.LabelFor(model => model.NationalIdNumber)

    @Html.EditorFor(model => model.NationalIdNumber)
    @Html.ValidationMessageFor(model => model.NationalIdNumber)

    @Html.LabelFor(model => model.Login)

    @Html.EditorFor(model => model.Login)
    @Html.ValidationMessageFor(model => model.Login)

    @Html.LabelFor(model => model.JobTitle)

    @Html.EditorFor(model => model.JobTitle)
    @Html.ValidationMessageFor(model => model.JobTitle)

    @Html.LabelFor(model => model.BirthDate)

    @Html.EditorFor(model => model.BirthDate)
    @Html.ValidationMessageFor(model => model.BirthDate)

    @Html.LabelFor(model => model.Maried)

    @Html.EditorFor(model => model.Maried)
    @Html.ValidationMessageFor(model => model.Maried)

    @Html.LabelFor(model => model.Gender)

    @Html.EditorFor(model => model.Gender)
    @Html.ValidationMessageFor(model => model.Gender)

    @Html.LabelFor(model => model.HireDate)

    @Html.EditorFor(model => model.HireDate)
    @Html.ValidationMessageFor(model => model.HireDate)

alors au runtime, le framework choisira le composant graphique HTML (Input, select etc...) le plus adapté à afficher les propriétés du model et ca sur toutes vos vues.

La bonne nouvelle, c'est que l'on peut créer nous même des templates pour les nouveaux types et encore mieux modifier les templates liés aux types de base (int, string, DateTime etc..)

Stop le blabla, place au Datepicker.

Ok, on commence par créer dossier un EditorTemplates sous Views/Shared et on y place une nouvelle vue que l'on nommera DateTime.cshtml.

@using MVCTest
@model DateTime?

@Html.Datepicker("", Model.HasValue ? Model.Value.ToShortDateString() : string.Empty, 0)

Remarquez la simplicité, on ne fait qu'appeler une méthode d'extension (que nous allons étudier de suite) et on formatte très légèrement la date (ToShortDateString).

Rajoutons une classe dans notre projet comportant le code suivant :

using System.Collections.Generic;
using System.Web.Mvc;

namespace MVCTest
{
    public static class JQueryHtmlHelpers
    {
        public static MvcHtmlString Datepicker(this HtmlHelper htmlHelper, string name, object value)
        {
            return System.Web.Mvc.Html.InputExtensions.TextBox(htmlHelper, name, value, new Dictionary { { "class", "datepicker" } });
        }
    }
}

Dans cette méthode d'extension, on se contente de demander le rendu d'une TextBox (input html) a laquelle on applique la class css datepicker.
Vous l'aurez compris il ne nous reste plus qu'a écrire un peu de JQuery dans la master page pour que toute les texbox du site ayant la class datepicker se transforment par magie en DatePicker.

$(document).ready(function () {
    $(".datepicker").datepicker();
});

Voila ce que ça donne :

 

Je vous laisse imaginer tous les widgets que l'on peut intégrer facilement!