Глобализация формата даты в MVC 3 или Non-English date validation

В текущем проекте на MVC3 возникла необходимость (ну это и понятно, куда же без дат) использовать глобализацию в плане формата дат для разных культур. Дамы и господа, далее будет представлен опыт и поиски в области разрешения подобных вопрос, так как перед решением вопроса глобализации валидации в MVC3 сам потратил много времени на выяснения и написания работающего кода.

Не буду вдаваться в подробности и утверждать, что глобализация не нужна и заниматься прочей ерундой и перейду сразу к сути. Текущий проект Ternado реализован с использованием  ASP.NET MVC3. И ради поддержки пользователей из разных стран, я использовал подход локализации и глобализации (для удобного пользования сайтом). Как Вы уже успели заметить никаких проблем с локализацией сообщений, текстов, меню и прочее не возникло, однако открытым вопросом остался вопрос глобализации, и особенно глобализации дат: например даты окончания лота. Что русскому дд.мм.гггг, то англичанину – MM/dd/yyyy:-).  Также открытым остается вопрос глобализации валидации jQuery.

Для теста использовалось следующие библиотеки и софт:

• Microsoft Visual Studio 2010
• Microsoft .Net 4.0
• jQuery
  • jquery-1.5.1.js
  • jquery.validate.js
  • jquery.validate.unobtrusive.js
  • jquery-ui-1.8.11.js

Конечная цель статьи

Реализовать рабочий MVCпроект в котором будет реализована глобализация (русский и английский язык). Формат вводимой даты должен соответствовать текущей культуре, также jQueryvalidation должна быть глобализированной. И в качестве бонуса дату пользователь будет вводить с помощью jQuery UI Datepicker.

Реализация

Создаем тестовый пример проекта, с который мы дальше будем экспериментировать.

Следующий шагом будет скачивание и подключение к проекту необходимых скриптов и стилей проекта jQuery. Думаю, найти файлы для работы jQueryбудет не сложно, тем более, что большая часть необходимых файлов идет в поставке при создании нового проекта. Файлы для работы jQuery UI Datepicker находятся на сайте проекта.
Файлы глобализации можно взять прямо из репозитория. Все файлы локализации виджетов, типа datepicker, можно найти по адресу http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/ .

После создание мвс 3 проекта необходимо сконфигурировать, так называемый, «masterpage» или _Layout.cshtml, указав вставку всех требуемых скриптов и стилей.  Мой файл странички Layout выглядит примерно так:

   <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/Default/jquery-ui-theme.css")" rel="stylesheet" type="text/css" /> 
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jQueryUI/jquery.ui.datepicker-ru.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.global.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/globinfo/jQuery.glob.ru-RU.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

Как мы видим из кода подключения библиотек для работы с jQuery, необходимо подключить файлы для поддержки валидации, UI, unobtrusive валидации, глобализации, а также файлы глобализации для конкретного языка (jQuery.glob.ru-RU.js) и виджета (jquery.ui.datepicker-ru.js). Далее приступаем к реализации модели тестового приложения. Для примера возьмем задачу по созданию пользователя системы. Созданный пользователь должен иметь имя, пароль и дату рождения. Программная часть модели CreateMemberModel выглядит так:

using System;
using System.ComponentModel.DataAnnotations;

namespace MvcGlobalizedApp.Models
{
    //Model for create new user of the system
    public class CreateMemberModel
    {
        [Required(ErrorMessageResourceName = "UserNameValidation", ErrorMessageResourceType = typeof(Resources.Common))]
        [DataType(DataType.Text)]
        public string Name { get; set; }

        [Required(ErrorMessageResourceName = "PasswordValidation", ErrorMessageResourceType = typeof(Resources.Common))]
        [DataType(DataType.Password)]
        public string Password { get; set; }

        //Date of birthday
        [DataType(DataType.Date, ErrorMessageResourceName = "DOBValidation", ErrorMessageResourceType = typeof(Resources.Common))]
        public DateTime DOB { get; set; }
    }
}

Такую модель очень просто наложить на страницу для создания пользователя. Я создал страничку index.cshtml с реализацией форм для ввода данных о пользователе. Но также следует учесть нашу цель. А для этого необходимо создать ресурсы локализирующие лейблы и сообщения валидации. С этой целью был создан еще один проект типа class library. В этом проекте требуется добавить файл ресурсов - Common и его версию для культуры ru-RU. Следует заметить, что файл ресурсов должен генерироваться с помощью PublicResXFileCodeGenerator генератора. Для этого меняем свойство Custom tool на PublicResXFileCodeGenerator и указываем Custom Tool namespace - MvcGlobalizedApp.Resources.
Реализация Index View выглядит примерно так:

@model MvcGlobalizedApp.Models.CreateMemberModel
@using MvcGlobalizedApp.Resources

@{
    ViewBag.Title = @Common.Title;
}
<script type="text/javascript">
    $(document).ready(function () {
        $("#DOB").datepicker();
    });
</script>
<h2>@Common.Title</h2>

@using (Html.BeginForm())
{ 
    @Common.UserNameLabel @Html.TextBoxFor(m=>m.Name) @Html.ValidationMessageFor(m=>m.Name)<br />
    @Common.PasswordLabel @Html.PasswordFor(m => m.Password) @Html.ValidationMessageFor(m => m.Password)<br />
    @Common.DOBLabel @Html.TextBoxFor(m => m.DOB) @Html.ValidationMessageFor(m => m.DOB)<br />
    <input type="submit" value="@Common.CreateButton" />
}

Готовое приложение мы уже имеет, но как выдно из задания, очень важным дополнением приложения - должна быть возможность использования jQuery UI Datepicker для выбора даты пользователем. Для использования всех прелестей jQuery UI виджетов добавим код:

<script type="text/javascript">
    $(document).ready(function () {
        $("#DOB").datepicker();
    });
</script>

в view страницы создания пользователя. #DOB селектор поля даты рождения пользователя. Данный код инициализирует виджет datepicker для поля, где id = "DOB". 

А при запуске готового примера мы получим такой вот результат:

Но при текущем коде, существует конфликт имен jQuery validation и jQuery global при валидации дат и чисел при использовании глобализации. Для решения это проблемы при использовании глобализации валидации jQuery в MVC приложениях необходимо вставить следующий код в требуемую страницу:
 

Полезные ссылки:

MVC ModelBinder and Localization