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

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

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

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

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

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

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

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

Для начала давайте удалим существующие определения форматирования. Откройте Movie.cs и закомментируйте атрибут DataType для свойства ReleaseDate.

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

Запустите приложение и убедитесь, что данные отображаются в виде «дата плюс время», поскольку информация о форматировании была удалена.

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

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

Откройте файл Content\Site.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 будет использоваться, как более предпочтительный).

В Solution Explorerв контекстном меню на папке Views/Shared нажмите Add и выберите пункт View. Появится диалог Add View. Укажите в поле View name тип DateTime.

Выберите пункт Create as a partial view, убедитесь, что пункты Use a layout or master page и Create a strongly-typed view остались не выбранными.

Нажмите Add. В папке Views\Shared\DisplayTemplates будет создан новый шаблон.

Откройте файл Views\ Shared\ DisplayTemplates\ DateTime. cshtml и добавьте в него следующую разметку, в которой для форматирования данных используется метод String.Format.

@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>

Использование класса CSS loud-1 приведет к тому, что текст данных даты будет отображен в полужирном начертании и в красном цвете и без указания времени.

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

Запустите приложение, убедитесь, что шаблоны применяются правильно: для контроллера Movie данные отображаются с классом CSS.

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

Запустите приложение. Данные ReleaseDate отформатированы, но теперь не используют CSS-класс. Это показывает то, что не найдя шаблона к данному типу специфического для контроллера Movie система стала использовать имеющийся общий шаблон.

Имейте в виду, что название файлов шаблонов может иметь любой регистр для определения имени типа, например, DATETIME.chstml, datetime.cshtml и DaTeTiMe.cshtml – все три имени будут соответствовать типу DateTime.

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

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

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

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

Этот шаблон отображает дату и время и при этом использует стиль CSS loud-2 для отображения.

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

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

Использование этого атрибута подскажет ASP.NET MVC использовать шаблон LoudDateTime.cshtml для отображения данных свойства ReleaseDate.

Запустите приложение. Убедитесь, что данные свойства ReleaseDate теперь отображаются в формате «дата и время» с использованием стиля CSS loud-2.

Если теперь вы удалите атрибут UIHint у свойства ReleaseDate, то сможете убедиться, что данные отображаются по-старому.

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

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

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

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