Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Подсветка полей с недопустимыми значениями
Вспомогательные методы HTML, которые создают текстовые поля, раскрывающиеся списки и другие элементы, обладают удобным средством, которое можно использовать в сочетании с привязкой модели. Тот же самый механизм, который сохраняет данные, введенные в форму пользователем, можно применять также для подсветки отдельных полей, которые не прошли проверку достоверности. Если свойство класса модели не пройдет проверку достоверности, вспомогательные методы HTML будут генерировать несколько иную HTML-разметку. В качестве примера ниже приведена HTML-разметка, генерируемая в результате вызова Html.TextBoxFor(х => x.Name) при отсутствии ошибок проверки достоверности: HTML <input data-val="true" data-val-required="Пожалуйста, введите свое имя" id="Name" name="Name" type="text" value="" /> А вот HTML-разметка, генерируемая этим же вызовом, когда пользователь не вводит значение (что является ошибкой проверки достоверности, поскольку мы применили атрибут Required к свойству Name в классе модели GuestResponse)
HTML <input class="input-validation-error" data-val="true" data-val-required="Пожалуйста, введите свое имя" id="Name" name="Name" type="text" value="" /> Этот вспомогательный метод добавил к элементу input класс по имени input-validation-error. Мы можем воспользоваться этой возможностью, создав таблицу стилей, которая содержит стили CSS для этого класса и другие стили, применяемые различными вспомогательными методами HTML. Соглашение, принятое в проектах MVC, предусматривает помещение статического содержимого, такого как таблицы стилей CSS, в папку по имени Content. Создайте эту папку, щелкнув правой кнопкой мыши на элементе PartyInvites в окне Solution Explorer, выбрав в контекстном меню пункт Add --> New Folder (Добавить --> Новая папка) и указав Content в качестве имени папки. Чтобы создать файл CSS, щелкните правой кнопкой мыши на только что созданной папке Content, выберите в контекстном меню пункт Add --> New Item (Добавить --> Новый элемент) и выберите Style Sheet (Таблица стилей) из набора шаблонов элементов. Установите имя нового файла Styles.css, как показано на рисунке ниже:
Щелкните на кнопке Add и Visual Studio создаст файл Content/Styles.css. Приведите содержимое этого файла в соответствие со следующим кодом:
CSS .field-validation-error { color: #f00; }
.field-validation-valid {
display: none; }
.input-validation-error { border: 1px solid #f00; background-color: #fee; }
.validation-summary-errors { font-weight: bold; color: #f00; }
.validation-summary-valid { display: none; } Для использования этой таблицы стилей добавляется новая ссылка в раздел head представления RsvpForm, как показано в примере ниже. Элементы link добавляются к представлениям точно так же, как к обычным статическим файлам HTML, хотя позже будет продемонстрировано средство пакетов, которое позволяет объединять сценарии JavaScript и таблицы стилей CSS и доставлять их в браузеры с помощью единственного HTTP-запроса
HTML @model PartyInvites.Models.GuestResponse
@{ Layout = null; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="/> <title>RsvpForm</title> <link rel="stylesheet" type="text/css" href="~/Content/Styles.css" /> </head> <!--... -->
Файлы JavaScript и CSS можно перетаскивать из окна Solution Explorer в редактор кода. Среда Visual Studio создаст элементы script и link для выбранных файлов. Если вы перешли на MVC 5 непосредственно с MVC 3, то могли ожидать, что файл CSS добавляется к представлению за счет указания атрибута href в виде @Href("~/Content/Site.css") или @Url.Content("~/Content/Site.css"). Начиная с MVC 4, механизм Razor обнаруживает атрибуты, начинающиеся с ~/ и автоматически вставляет вызов @Href или @Url. После применения таблицы стилей при отправке данных, которые вызывают ошибку проверки достоверности, отображается визуально очевидное указание на причины проблем:
Стилизация содержимого Базовая функциональность приложения на месте (кроме отправки электронной почты, к которой мы вскоре приступим), однако его внешний вид в целом довольно-таки непривлекателен. Несмотря на то что это руководство по MVC сосредоточено на разработке серверной стороны, полезно рассмотреть несколько библиотек с открытым кодом, которые приняты Microsoft и включены в ряд шаблонов проектов Visual Studio. Я не являюсь большим поклонником упомянутых шаблонов, но мне нравятся некоторые из используемых ими библиотек, и одним таким примером из числа задействованных в MVC 5 является Bootstrap, которая представляет собой удобную библиотеку CSS, первоначально разработанную в Twitter и получившую широкое применение. Разумеется, вы не обязаны применять шаблоны проектов Visual Studio, чтобы пользоваться библиотеками вроде Bootstrap. Можно загрузить файлы напрямую из веб-сайтов с нужными библиотеками или воспользоваться инструментом NuGet, интегрированным в Visual Studio и предоставляющим доступ к каталогу заранее упакованного программного обеспечения, которое может быть загружено и установлено автоматически.
Одной из лучших характеристик NuGet является то, что данный инструмент управляет зависимостями между пакетами, так что во время установки, к примеру, библиотеки Bootstrap инструмент NuGet также загрузит и установит библиотеку jQuery, от которой зависит Bootstrap.
|
||||||
|
|
Последнее изменение этой страницы: 2020-11-28; просмотров: 96; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.223.114.142 (0.006 с.) |
