Share via

Учебный курс по ASP.NET MVC: Часть 16. Клиент, JavaScript, jQuery, ч4

  • Article

Добавление шаблона для редактирования даты

В этом разделе вы создадите шаблон для редактирования дат, который будет отображаться на страницах ASP.NET MVC при необходимости ввести данные о дате. Шаблон будет будет отображать только дату, время будет опущено. В этом шаблоне вы будете использовать элемент управления jQuery UI Datepicker для предоставления удобного способа ввести данные.

Для начала откройте Movie.cs и добавьте атрибут DataType с перечислением Date к свойству ReleaseDate, так как показано ниже:

[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }

Этот код приведет к тому, что данные ReleaseDate будут отображаться без учета времени в обоих случаях: и при отображении и при редактировании. Если в приложении существует шаблон date.cshtml в папках Views\Shared\DisplayTemplates или Views\Movies\DisplayTemplates, то этот шаблон будет использован для отображения свойства с типом DateTime. Иначе встроенная система ASP.NET отобразит свойство даты без времени.

Запустите приложение и убедитесь, что при редактировании данных поле ввода даты отображает только дату.

image

В Solution Explorer добавьте новое представление в папку Views\ Shared\ EditorTemplates, в поле View name введите “Date”. Выберите галочку Create as a partial view. Убедитесь, что параметры Use a layout or master page и Create a strongly-typed view остались не выбранными. Нажмите Add. Будет создан шаблон Views\Shared\EditorTemplates\Date.cshtml.

Добавьте в этот шаблон следующий код:

 @model DateTime
Using Date Template
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date"  })

Первая строка определяет модель типа DateTime. Несмотря на то, что указывать тип модели для шаблонов отображения и редактирования не обязательно, хорошим тоном является указание этих данных для того, чтобы иметь возможность статической проверки компилятором и поддержки IntelliSense. Если тип модели не указан, то ASP.NET MVC будет использовать тип dynamic без проверок во время компиляции.

Вторая строка – это просто часть разметки, которая отобразит надпись «Using Date Template».

Следующая строка – это использование хелпера Html.TextBox для отображения поля ввода. Третий параметр этого хелпера использует анонимный тип для установки CSS-класса и типа для поля ввода (так как слово class является зарезервированным словом в языке C#, для экранирования используется символ @).

Тип type=”date” – это тип ввода HTML5, который позволяет браузерам с поддержкой HTML5 отобразить для ввода данных элемент управления календарем. Для других браузеров позднее вы добавите немного JavaScript-кода, чтобы воспользоваться элементами управления jQuery.

Запустите приложение и убедитесь, что данные свойства ReleaseDate отображаются с помощью нового шаблона.

image

Откройте исходный код страницы с помощью своего браузера. Вы должны обнаружить следующий код, который сгенерирован в разметке:

<input class="datefield" data-val="true" data-val-required="Date is required"

id="ReleaseDate" name="ReleaseDate" type="date" value="1/11/1989" />

Вернитесь в шаблон Views\Shared\EditorTemplates\Date.cshtml и удалите строку «Using Date Template». Теперь код шаблона выглядит следующим образом:

 @model DateTime
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date" })

Добавление элемента управления jQuery UI с помощью NuGet

В этом разделе вы добавите элемент управления jQuery UI для шаблона ввода данных даты. Библиотека jQuery UI предлагает поддержку анимации, эффектов и настраиваемых виджетов для ваших страниц. Эта библиотека построена на базе JavaScript-библиотеки jQuery.

Для начала вам необходимо установить библиотеки jQuery UI. В этом вам поможет пакетный менеджер NuGet, который поставляется с SP1 Visual Studio 2010 и Visual Web Developer.

В Visual Web Developer выполните пункт Manage NuGet Packages в меню Tools .

image

Замечание. Если в меню Tools отсутствуют соответствующие пункты, то вам необходимо установить NuGet следуя следующим инструкциям.

Если вы используете Visual Studio, то выполните следующий пункт меню:

image

В окне Manage NuGet Packages выберите вкладку Online и в строке поиска введите jQuery UI. Выберите пункт jQuery UI WIdgets:Datepicker и нажмите кнопку Install.

image

image

NuGet автоматически добавит отладочные и минимизированные версии следующих библиотек:

  • jquery.ui.core.js
  • jquery.ui.core.min.js
  • jquery.ui.datepicker.js
  • jquery.ui.datepicker.min.js

Для использования элемента управления jQuery вам необходимо создать скрипт, который подставит для ввода данных виджет календаря. Для этого добавьте в папку Scripts вашего проекта файл с именем DatePickerReady.js и следующим содержимым:

 $(function () {
    $(".datefield").datepicker(); 
});

Если вы не знакомы с jQuery, то ниже небольшое пояснение: первая строка определяет функцию jQuery которая будет вызвана сразу же после загрузки страницы браузером. Следующая строка выбирается все элементы на странице с CSS-классом .datefield и вызывает для них функцию datepicker(), которая добавит каждому элементу поддержку ввода данных даты.

Далее, откройте файл Views\ Shared\_ Layout. cshtml. Вам необходимо добавить несколько ссылок на следующие файлы, требующиеся для того, чтобы вы могли использовать новый элемент управления:

  • Content/themes/base/jquery.ui.core.css
  • Content/themes/base/jquery.ui.datepicker.css
  • Content/themes/base/jquery.ui.theme.css
  • jquery.ui.core.min.js
  • jquery.ui.datepicker.min.js
  • DatePickerReady.js

Следующий код демонстрирует то, что вам необходимо добавить в секцию <head>:

      <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>

Итоговый код секции Head будет следующим:

 <head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <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/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>
</head>

Хелпер Url помогает сконвертировать путь к ресурсам в абсолютный путь. Вы должны использовать @URL.Content для корректного вывода ссылок на эти ресурсы.

Запустите приложение и перейдите на редактирование элемента. Теперь, когда вы захотите ввести данные поля ReleaseDate, вы получите возможность сделать это с помощью удобного элемента ввода даты.

image

Как и все элементы управления jQuery UI этот элемент может быть кастомизирован. Для получения дополнительной информации смотрите страницу Visual customization: Designing a jQuery UI theme на официальном сайте jQuery.

Поддержка элемента управления HTML5

C широкой поддержкой браузерами HTML5 вы можете захотеть использовать встроенные возможности отображения элементов ввода, например, для ввода даты, вместо использования jQuery. Вы можете добавить логику в свое приложение для автоматического использования HTML5, если браузер поддерживает эти механизмы.

Для того чтобы сделать это замените код файла DatePickerReady.js следующим кодом:

 if (!Modernizr.inputtypes.date) {
    $(function () {
        $(".datefield").datepicker();
    });
}

Первая строка этого кода использует библиотеку Modernizr для того, чтобы проверить, поддерживает ли браузер элементы ввода данных HTML5. Если они не поддерживаются, вы используете jQuery.

После того, как вы произведете это изменение, вы можете проверить функционал в браузере, который поддерживает элементы ввода HTML5, например, Internet Explorer 10 или Opera 11. В этих браузерах вместо jQuery будет выведен собственный элемент управления, который упрощает ввод данных даты.

image

Поскольку новые версии браузеров реализуют HTML5 последовательно, хорошим тоном на сегодня будет добавление кода, который поддерживает ввод как через HTML5, так и jQuery.

 if (!Modernizr.inputtypes.date) {
    $(function () {
        $("input[type='date']")
                    .datepicker()
                    .get(0)
                    .setAttribute("type", "text");
    })
}

Этот скрипт выбирает элементы ввода HTML5 input с типом даты, которые не полностью поддерживают HTML5. Для этих элементов будет использоваться jQuery.

Добавление дат с поддержкой NULL в шаблоны

Если вы используете существующие шаблоны для работы с датой и передадите туда значение NULL, то вы получите ошибку во время исполнения. Для того, чтобы шаблоны могли поддерживать NULL-значения даты вам необходимо внести некоторые изменения в коде Views\Shared\DisplayTemplates\DateTime.cshtml:

@model Nullable<DateTime>

@(Model != null ? string.Format("{0:d}", Model) : string.Empty)

Код вернет пустую строку, когда модель равна NULL.

Измените код в файле Views\ Shared\ EditorTemplates\ Date. cshtml на следующий:

 @model Nullable<DateTime>

 @{
    DateTime dt = DateTime.Now;
    if (Model != null)
    {
       dt  = (System.DateTime) Model;
   
    }
    @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "datefield", type = "date"  })
}

Когда этот код выполняется, если модель не равна null, то используется значение модели. Если модель равна null, то вместо этого используется значение текущей даты.

Заключение

Это руководство описывало базовые механизмы работы с шаблонами ASP.NET MVC и то, как использовать элементы управления jQuery UI для упрощения ввода данных.

Для большей информации посетите следующие ссылки:

· Запись блога JQueryUI Datepicker in ASP.Net MVC

· Официальный сайт jQuery UI

· Для информации о том, как локализовать элементы управления jQuery - UI/Datepicker/Localization

· Больше о шаблонах можно узнать в серии статей ASP.NET MVC 2 Templates

--

Это перевод оригинальной статьи Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4.

Comments

  • Anonymous
    April 01, 2013
    Не устанавливается на проекте по умолчанию для MVC 4

  • Anonymous
    September 24, 2013
    (y)

  • Anonymous
    October 19, 2015
    Что делать если  jQuery UI WIdgets:Datepicker не устанавливаются