Использование html5 и jQuery UI Datepicker Popup Calendar с ASP.NET MVC — часть 2

Рик Андерсон

В этом руководстве вы узнаете, как работать с шаблонами редактора, шаблонами отображения и всплывым календарем datepicker в пользовательском интерфейсе jQuery в веб-приложении ASP.NET MVC.

Добавление автоматического шаблона даты и времени

В первой части этого руководства вы узнали, как добавить атрибуты в модель для явного указания форматирования и как явно указать шаблон, используемый для отрисовки модели. Например, атрибут DisplayFormat в следующем коде явно задает форматирование ReleaseDate для свойства .

[DisplayFormat(DataFormatString = "{0:d}")]
public DateTime  ReleaseDate { get; set; }

В следующем примере атрибут DataType , использующий Date перечисление , указывает, что шаблон даты должен использоваться для отрисовки модели. Если в проекте нет шаблона даты, используется встроенный шаблон даты.

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

Однако asp. MVC может выполнять сопоставление типов с помощью конфигурации по соглашению, искать шаблон, соответствующий имени типа. Это позволяет создать шаблон, который автоматически форматирует данные без использования атрибутов или кода. В этой части руководства вы создадите шаблон, который автоматически применяется к свойствам модели типа DateTime. Вам не нужно использовать атрибут или другую конфигурацию, чтобы указать, что шаблон должен использоваться для отрисовки всех свойств модели типа DateTime.

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

Для начала давайте удалим существующие сведения о форматировании и отобразим полные даты в приложении.

Откройте файл Movie.cs и закомментируйте DataType атрибут свойства ReleaseDate :

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

Для запуска приложения нажмите сочетание клавиш CTRL+F5.

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

Добавление стилей CSS для тестирования новых шаблонов

Перед созданием шаблона для форматирования дат добавьте несколько правил стиля CSS, которые можно применить к новым шаблонам. Это поможет убедиться, что на отрисоченной странице используется новый шаблон.

Откройте файл Content\Site.csи добавьте следующие правила CSS в нижнюю часть файла:

/* Styles to test new editor and display templates.
----------------------------------------------------------*/
.loud-1 {
    font-weight: bold;
    color: Red;
}
.loud-2 {
    font-size:  2.0em;
    color:Green;
}
.loud-3 {
    font-style: italic;
    color: yellow;
    background-color: blue;
}

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

Теперь вы можете создать новый шаблон. В папке Views\Movies создайте папку DisplayTemplates .

В папке Views\Shared создайте папку DisplayTemplates и папку EditorTemplates .

Шаблоны отображения в папке Views\Shared\DisplayTemplates будут использоваться всеми контроллерами. Шаблоны отображения в папке Views\Movie\DisplayTemplates будут использоваться только контроллером Movie . (Если шаблон с одинаковым именем отображается в обеих папках, шаблон в папке Views\Movie\DisplayTemplates , то есть более конкретный шаблон, имеет приоритет для представлений, возвращаемых контроллером Movie .)

В Обозреватель решений разверните папку Представления, папку Общие, а затем щелкните правой кнопкой мыши папку Views\Shared\DisplayTemplates.

Нажмите кнопку Добавить , а затем — Вид. Откроется диалоговое окно Добавление представления .

В поле Имя представления введите DateTime. (Это имя необходимо использовать, чтобы оно соответствовало имени типа.)

Установите флажок Создать как частичное представление проверка. Убедитесь, что флажки Использовать макет или master и Создать строго типизированное представление проверка не выбраны.

Нажмите кнопку Добавить. Шаблон DateTime.cshtml создается в views\Shared\DisplayTemplates.

На следующем рисунке показана папка Views в Обозреватель решений после DateTime создания шаблонов отображения и редактора.

Откройте файл Views\Shared\DisplayTemplates\DateTime.cshtml и добавьте следующую разметку, которая использует метод String.Format для форматирования свойства как даты без времени. (Формат {0:d} указывает короткий формат даты.)

@String.Format("{0:d}", Model.Date)

Повторите этот шаг, чтобы создать DateTime шаблон в папке Views\Movie\DisplayTemplates . Используйте следующий код в файле Views\Movie\DisplayTemplates\DateTime.cshtml .

<span class="loud-1">   
@String.Format("{0:d}", Model.Date)
</span>

Класс loud-1 CSS приводит к отображению даты полужирным красным шрифтом. Вы добавили loud-1 класс CSS в качестве временной меры, чтобы можно было легко увидеть, когда используется этот конкретный шаблон.

Вы создали и настроили шаблоны, которые ASP.NET будут использовать для отображения дат. В более общем шаблоне (в папке Views\Shared\DisplayTemplates ) отображается простая короткая дата. Шаблон, предназначенный специально для Movie контроллера (в папке Views\Movies\DisplayTemplates ), отображает короткую дату, которая также имеет полужирный красный текст.

Для запуска приложения нажмите сочетание клавиш CTRL+F5. Браузер отрисовывает представление индекса для приложения.

Теперь ReleaseDate свойство отображает дату полужирным красным шрифтом без времени. Это позволяет убедиться, что DateTime шаблонная вспомогающая функция в папке Views\Movies\DisplayTemplates выбрана вместо DateTime шаблонной вспомогательной функции в общей папке (Views\Shared\DisplayTemplates).

Теперь переименуйте файл Views\Movies\DisplayTemplates\DateTime.cshtml в Views\Movies\DisplayTemplates\LoudDateTime.cshtml.

Для запуска приложения нажмите сочетание клавиш CTRL+F5.

На этот ReleaseDate раз свойство отображает дату без времени и без полужирного красного шрифта. Это показывает, что шаблон с именем типа данных (в данном случае DateTime) автоматически используется для отображения всех свойств модели этого типа. После переименования файла DateTime.cshtml в LoudDateTime.cshtml ASP.NET больше не нашли шаблон в папке Views\Movies\DisplayTemplates , поэтому он использовал шаблон DateTime.cshtml из папки *Views\Movies\Shared*.

(При сопоставлении шаблонов регистр не учитывается, поэтому вы могли бы создать имя файла шаблона с любым регистром. Например, DATETIME.cshtml, datetime.cshtml и DaTeTiMe.cshtml будут соответствовать типу DateTime .)

Проверка: на этом этапе ReleaseDate поле отображается с помощью шаблона Views\Movies\DisplayTemplates\DateTime.cshtml , который отображает данные в коротком формате даты, но в противном случае не добавляет специальный формат.

Использование UIHint для указания шаблона отображения

Если веб-приложение содержит много DateTime полей и по умолчанию вы хотите отобразить их все или большинство из них в формате только для даты, рекомендуется использовать шаблон DateTime.cshtml . Но что делать, если у вас есть несколько дат, в которых вы хотите отобразить полные дату и время? Это не проблема. Вы можете создать дополнительный шаблон и использовать атрибут UIHint для указания форматирования полной даты и времени. Затем можно выборочно применить этот шаблон. Можно использовать атрибут UIHint на уровне модели или указать шаблон в представлении. В этом разделе вы узнаете, как использовать UIHint атрибут для выборочного изменения форматирования для некоторых экземпляров полей даты и времени.

Откройте файл Views\Movies\DisplayTemplates\LoudDateTime.cshtml и замените существующий код следующим:

<span class="loud-2">   
@Model.ToString()
</span>

Это приводит к отображению полной даты и времени и добавляет класс CSS, который делает текст зеленым и большим.

Откройте файл Movie.cs и добавьте атрибут UIHint в ReleaseDate свойство , как показано в следующем примере:

[UIHint("LoudDateTime")]
public DateTime ReleaseDate { get; set; }

Это сообщает ASP.NET MVC, что при отображении ReleaseDate свойства (в частности, а не только любого DateTime объекта) следует использовать шаблон LoudDateTime.cshtml .

Для запуска приложения нажмите сочетание клавиш CTRL+F5.

Обратите внимание, что ReleaseDate теперь свойство отображает дату и время крупным зеленым шрифтом.

Вернитесь к атрибуту UIHint в файле Movie.cs и закомментируйте его, чтобы шаблон LoudDateTime.cshtml не использовался. Повторный запуск приложения Дата выпуска не отображается большой и зеленый. Это проверяет, используется ли шаблон Views\Shared\DisplayTemplates\DateTime.cshtml в представлениях Индекс и Сведения.

Как упоминалось ранее, можно также применить шаблон в представлении, что позволяет применить шаблон к отдельному экземпляру некоторых данных. Откройте представление Views\Movies\Details.cshtml . Добавьте "LoudDateTime" в качестве второго параметра вызова Html.DisplayFor для ReleaseDate поля. Завершенный код выглядит следующим образом:

<div class="display-label">ReleaseDate</div>
<div class="display-field">
    @Html.DisplayFor(model => model.ReleaseDate,"LoudDateTime")
</div>

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

Для запуска приложения нажмите сочетание клавиш CTRL+F5.

Убедитесь, что на странице индекса фильма используется шаблон Views\Shared\DisplayTemplates\DateTime.cshtml (красное полужирное), а на странице Movie\Details используется шаблон Views\Movies\DisplayTemplates\LoudDateTime.cshtml (большой и зеленый).

В следующем разделе вы создадите шаблон для сложного типа.

НазадВперед