Предыдущий ролик Следующий ролик  

Видео урок: Displaying and validating model properties

Основы ASP.NET MVC 5

В этом видео мы покажем, как сделать так, чтобы свойства модели отображались на экране должным образом, и как создать эффективные формы, с помощью которых создаются новые экземпляры объектов-моделей и выполняется валидация этих экземпляров. Вернемся к представлению Details, которое мы создали в предыдущем видео и которое олицетворяет функцию запроса баланса. В этом представлении нужно изменить несколько элементов. Вот здесь слово "Details" (Подробно) не нужно. Добавим пробел между словами "Checking" и "account". Спустимся вниз. Вот эти ссылки "Edit" и "List" нам тоже не нужны, поскольку эти действия может выполнять только администратор.

Поэтому удалим соответствующие строки. Затем преобразуем этот код в сетку Bootstrap, указав для элемента div атрибут class со значением "row" и добавив в него еще один элемент div для столбца. Ограничим сетку шестью столбцами с помощью класса col-md-6. Отмечу также то, что сетка должна начинаться не с первого столбца, а после третьего. Сделать это можно с помощью класса col-md-offset-3. Не забудьте добавить внизу соответствующий закрывающий тег для элемента div.

Теперь обратимся к свойствам модели. По умолчанию вспомогательный метод отображает имя свойства. Но такое поведение нам нужно не всегда. Одно из решений - просто заменить код Razor на статический HTML. Но лучше всего внести некоторые изменения в нашу модель CheckingAccount, благодаря которым движок представлений поймет, что имена некоторых свойств нужно отображать по-другому.

Для этого сначала добавим атрибут Display. Итак, открываем квадратные скобки над строкой со свойством AccountNumber и вводим слово "Display". Затем нажимаем клавишу Ctrl+Space, что поможет нам закончить слово. Далее введем параметр name и передадим в него имя любой нужной нам метки. Например, "Account #". Для лучшего восприятия этого кода давайте сгруппируем атрибуты с соответствующими свойствами. То же самое проделаем со свойствами FirstName и LastName.

Возможно, мне понадобится новое свойство с именем "Name", которое реализует только запрос get. В нем с помощью String.Format будут объединяться два значения: FirstName и LastName. После этого в представлении Details можно удалить два элемента, используемых для свойства LastName, и поменять FirstName на Name. Наконец, мы должны обеспечить, чтобы баланс всегда отображался в соответствии с имеющимися стандартами для валюты. Для этого воспользуемся атрибутом DataType и передадим в него значение Datatype.Currency.

Запустим приложение по клавише Ctrl+F5 и посмотрим, что произойдет. Ага, теперь мы видим подходящую страницу для запроса баланса. Давайте построим форму для создания нового счета. Вернемся к созданному нами контроллеру. Тут есть два метода create: один - для отображения формы, второй - для ее обработки. Нажмите правой кнопкой мыши на любом из этих методов и выберите пункт "Добавить представление" (Add View). На этот раз выберите шаблон "Создать" (Create) и класс CheckingAccountModel. Также нужно установить отметку в поле "Библиотеки скриптов" (Reference Script Libraries), чтобы можно было воспользоваться автоматически генерируемой валидацией на стороне клиента, осуществляемой благодаря библиотеке jQuery validate.

Итак, посмотрим, что же в результате сгенерируется. На этот раз вместо вспомогательных методов, которые просто отображают имена и значения, мы видим методы LabelFor и EditorFor, которые будут создавать соответствующие поля и надписи формы на основании типа свойства и дополнительных атрибутов, с помощью которых мы выделяем эти свойства. Кроме того, мы видим метод ValidationMessageFor, который будет порождать HTML, содержащий сообщения об ошибках, возникающих в процессе валидации на стороне клиента, которые можно использовать вместе с библиотекой jQuery validate. Метод ValidationSummary можно использовать и для отображения ошибок валидации на стороне клиента. Но для параметра ExcludePropertyErrors мы передаем значение "true", поскольку будем отображать ошибки прямо под соответствующим полем.

Метод ValidationSummary все равно будет использоваться для отображения других общих ошибок, относящихся к связыванию моделей, но не к конкретному свойству. Ниже мы видим, что будет отображаться связка jqueryval, которая приводит в действие логику валидации на стороне клиента. В нашем приложении пока нет ссылки на эту страницу, но нажатие клавиши Ctrl+F5 должно приводить нас на нее, пока мы не зададим стартовую страницу по умолчанию. Если я прямо сейчас попробую нажать кнопку Create, то увижу сообщение, в котором говорится о необходимости задания баланса.

Даже если я еще не настроил валидацию, я все равно увижу это сообщение, поскольку свойство balance имеет тип decimal и не может иметь значение null. Вернемся к нашей модели и добавим несколько атрибутов валидации. Сначала перед свойствами AccountNumber, FirstName и LastName я добавлю атрибут Required. Теперь представим, что в номере счета должно быть от 6 до 10 знаков. Возможно, стоит начать с валидатора StringLength, который в качестве параметра принимает максимальную длину строки и необязательные именованные параметры, одним из которых является MinimumLength.

Но так как я хочу, чтобы номер счета имел цифровое выражение, лучше всего сделать это с помощью валидатора RegularExpression. Воспользуемся символом "@", чтобы выделить обратный слэш, необходимый для регулярного выражения, которое определяет попадание в промежуток от 6 до 10 знаков. На этот раз давайте просто построим решение по клавише Ctrl+Shift+B, а затем обновим страницу в браузере. Как видите, теперь все 4 поля обязательны для заполнения. Но если ввести некорректный номер счета, появившиеся сообщение об ошибке будет не совсем понятно обычному пользователю.

Чтобы это исправить, вернемся к нашей модели и добавим параметр ErrorMessage в атрибут валидации RegularExpression. Этот параметр можно добавить и к валидатору Required, и к любому другому валидатору, если нужно изменить и соответствующие им сообщения об ошибках. Снова построим решение по клавише Ctrl+Shift+B и обновим страницу. На этот раз мы видим более информативное сообщение. Это видео станет для вас хорошей отправной точкой при работе с моделями и поможет разработать функциональность отображения и ввода данных. Перед тем как начать работать с реальной базой данных, рассмотрим одну из разновидностей этого паттерна, в которую входит так называемая модель представления.