Использование всплывающего календаря Datepicker в html5 и пользовательском интерфейсе jQuery с ASP.NET MVC — часть 1

  • Статья

Рик Андерсон

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

В этом руководстве описано, как работать с шаблонами редактора, шаблонами отображения и всплывым календарем datepicker пользовательского интерфейса jQuery в веб-приложении MVC ASP.NET. В этом руководстве вы можете использовать Microsoft Visual Web Developer 2010 Express с пакетом обновления 1 (SP1) (Visual Web Developer), который является бесплатной версией Microsoft Visual Studio, или Visual Studio 2010 с пакетом обновления 1 (SP1), если у вас уже есть.

Перед началом работы убедитесь, что вы установили необходимые компоненты, перечисленные ниже. Вы можете установить все из них, щелкнув следующую ссылку: Установщик веб-платформы. Кроме того, вы можете установить необходимое программное обеспечение по отдельности, используя следующие ссылки:

Если вы используете Visual Studio 2010 вместо Visual Web Developer, установите необходимые компоненты, щелкнув следующую ссылку: Предварительные требования Для Visual Studio 2010.

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

Что вы создадите

Вы добавите шаблоны (в частности, изменение и отображение шаблонов) в простое приложение для просмотра фильмов, созданное в начало работы с помощью MVC 3. Вы также добавите всплывающее окно календаря datepicker пользовательского интерфейса jQuery , чтобы упростить ввод дат. На следующем снимке экрана показано измененное приложение с отображением всплывающего календаря datepicker в пользовательском интерфейсе jQuery.

Снимок экрана: окно Movie jQuery с представлением

Чему вы научитесь

В этом учебнике вы узнаете:

  • Как использовать атрибуты из пространства имен DataAnnotations для управления форматом данных при их отображении и в режиме редактирования.
  • Создание шаблонов (изменение и отображение шаблонов) для управления форматированием данных.
  • Как добавить параметр datepicker пользовательского интерфейса jQuery для ввода полей даты.

Приступая к работе

Если у вас еще нет приложения для просмотра фильмов из начального проекта, скачайте его:

  • Нажмите Скачать.
  • В Windows Обозреватель щелкните правой кнопкой мыши файл MvcMovie.zip и выберите Свойства.
  • В диалоговом окне СвойстваMvcMovie.zip выберите Разблокировать. Разблокировка устраняет предупреждение системы безопасности, выводимое при попытке использовать ZIP-файл , загруженный из Интернета.

Снимок экрана: поле

Щелкните правой кнопкой мыши файл MvcMovie.zip и выберите команду Извлечь все , чтобы распаковать файл. В Visual Web Developer или Visual Studio 2010 откройте файл MvcMovieCS_TU.sln .

В Обозреватель решений дважды щелкните файл Views\Shared\_Layout.cshtml, чтобы открыть его. Измените H1 заголовок с MVC Movie App на Movie jQuery. Нажмите клавиши CTRL+F5, чтобы запустить приложение, и перейдите на вкладку Главная , где вы перейдете Index к методу контроллера фильма. Чтобы опробовать приложение, щелкните ссылку Изменить и ссылку Сведения для одного из фильмов. Обратите внимание, что в представлениях Индекс, Правка и Сведения дата выпуска и цена имеют хороший формат:

Снимок экрана: окно Movie jQuery с представлением

Форматирование даты и цены является результатом использования атрибута DisplayFormat для свойств Movie класса .

Откройте файл Movie.cs и закомментируйте DisplayFormat атрибут в свойствах ReleaseDate и Price . Итоговый Movie класс выглядит следующим образом:

public class Movie {
    public int ID { get; set; }

    [Required(ErrorMessage = "Title is required")]
    public string Title { get; set; }

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

    [Required(ErrorMessage = "Genre must be specified")]
    public string Genre { get; set; }

    [Range(1, 100, ErrorMessage = "Price must be between $1 and $100")]
    //[DisplayFormat(DataFormatString = "{0:c}")]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

Нажмите клавиши CTRL+F5 еще раз, чтобы запустить приложение, и выберите вкладку Главная , чтобы просмотреть список фильмов. На этот раз в дате выпуска отображаются дата и время, а в поле цена больше не отображается символ валюты. Изменение в Movie классе отменяется хорошим форматированием, которое вы видели ранее, но вы исправите это через некоторое время.

Снимок экрана: окно Movie jQuery с представлением

Использование атрибута DataType DataAnnotations для указания типа данных

Замените атрибут commented-out DisplayFormat для ReleaseDate свойства атрибутом DataType , используя перечисление Date . Замените DisplayFormat атрибут для Price свойства атрибутом DataType еще раз, на этот раз с помощью перечисления Currency . Готовый код выглядит следующим образом:

public class Movie {
    public int ID { get; set; }

    [Required(ErrorMessage = "Title is required")]
    public string Title { get; set; }

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

    [Required(ErrorMessage = "Genre must be specified")]
    public string Genre { get; set; }

    [Range(1, 100, ErrorMessage = "Price must be between $1 and $100")]
    [DataType(DataType.Currency)]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

Запустите приложение. Теперь дата выпуска и свойства price отформатированы правильно (то есть используются соответствующие форматы даты и валюты). Атрибут DataType предоставляет метаданные типа для встроенных ASP.NET шаблонов MVC, чтобы поля отображались в правильном формате. Использование атрибута DataType предпочтительнее, чем атрибут DisplayFormat , который изначально был в коде DataType , так как он делает модель более чистой и гибкой для таких целей, как интернационализация.

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

Вперед