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

Article
01/15/2012

Добавление автоматического шаблона 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 (большой зеленый).

Comments

Anonymous
April 16, 2014
полезная статья, не как автора книги понять не мог с этими шаблонами, а тут все как на ладони, спасибо!

Share via