Это вторая часть серии «Понимание ненавязчивой проверки в ASP.Net MVC».
1. Работа с плагином проверки jQuery изнутри 2. Понимание HTML-кода, созданного путем ненавязчивой проверки в ASP.Net MVC. 3. Внутренняя работа ненавязчивого плагина проверки jQuery в ASP.Net MVC. О чем мы поговорим в этой статье:
- Идея ненавязчивого JavaScript
- Разница между обычной и ненавязчивой проверкой
- Понимание ненавязчивой проверки:
- Ээлементы ввода, правила их проверки и как они работают
- Сообщения проверки и как они работают при ненавязчивой проверке.
Основная идея ненавязчивого JavaScript
Microsoft представила первый модуль проверки в первой версии MVC. Модуль улучшался с каждой версией и стал выполнять ненавязчивую проверку в ASP.Net MVC 3. Короче говоря, даже в современном JavaScript, который мы пишем в основном в отдельном js-файле, нам иногда нужны данные, связанные с Html, и поэтому записываем метаданные объектов JavaScript внутри Html-страницы.Вызываем функцию из js-файла, в которую передаем метаданные объекта на странице.
Одна из целей ненавязчивого JavaScript — отделить JavaScript от разметки HTML. Вы можете прочитать об этом больше здесь (автор отсылает нас к статье о ненавязчивом JavaScript в англоязычной Википедии, прим.
переводчика)
Разница между обычной и ненавязчивой проверкой.
Ниже приведен код модели и HTML-разметка, созданные с использованием проверки MVC 2 и ненавязчивой проверки MVC 3. Наша модель С#
Презентация в MVC 2 с использованием помощников html HTMLpublic class ValidationModel { [Required] public string FirstName { get; set; } [Required, StringLength(60)] public string LastName { get; set; } [Range(1, 130)] public int Age { get; set; } }
<label for="FirstName">FirstName</label>
<input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" />
<span id="FirstName_validationMessage" class="field-validation-valid"></span>
<label for="LastName">LastName</label>
<input id="LastName" class="text-box single-line" type="text" name="LastName" value="" />
<span id="LastName_validationMessage" class="field-validation-valid"></span>
<label for="Age">Age</label>
<input id="Age" class="text-box single-line" type="text" name="Age" value="" />
<span id="Age_validationMessage" class="field-validation-valid"></span>
<script type="text/javascript">// <![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; } window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"FirstName","ReplaceValidationMessageContents":true,"ValidationMessageId":"FirstName_validationMessage","ValidationRules":[{"ErrorMessage":"The FirstName field is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"LastName","ReplaceValidationMessageContents":true,"ValidationMessageId":"LastName_validationMessage","ValidationRules":[{"ErrorMessage":"The LastName field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field LastName must be a string with a maximum length of 60.","ValidationParameters":{"max":60},"ValidationType":"length"}]},{"FieldName":"Age","ReplaceValidationMessageContents":true,"ValidationMessageId":"Age_validationMessage","ValidationRules":[{"ErrorMessage":"The field Age must be between 1 and 130.","ValidationParameters":{"min":1,"max":130},"ValidationType":"range"},{"ErrorMessage":"The Age field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Age must be a number.","ValidationParameters":{},"ValidationType":"number"}]}],"FormId":"form0","ReplaceValidationSummary":true,"ValidationSummaryId":"validationSummary"});
// ]]></script>
Презентация в MVC 3 с использованием html-хелперов и ненавязчивой проверки.
HTML <label for="FirstName">FirstName</label>
<input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" data-val="true" data-val-required="The FirstName field is required." />
<label for="LastName">LastName</label>
<input id="LastName" class="text-box single-line" type="text" name="LastName" value="" data-val="true" data-val-length="The field LastName must be a string with a maximum length of 60." data-val-length-max="60" data-val-required="The LastName field is required." />
<label for="Age">Age</label>
<input id="Age" class="text-box single-line" type="text" name="Age" value="" data-val="true" data-val-number="The field Age must be a number." data-val-range="The field Age must be between 1 and 130." data-val-range-max="130" data-val-range-min="1" data-val-required="The Age field is required." />
Этот код взят из статьи Брэд Уилсон «Ненавязчивая проверка клиента в ASP.NET MVC 3».
Как мы видим, элементы «входа» HTML понятия не имеют, какие правила проверки к ним применяются.
Существует только один большой объект JavaScript, содержащий информацию о проверке, примененной к каждому элементу страницы.
С другой стороны, если мы посмотрим на «входные» элементы, сгенерированные MVC 3, мы увидим, что они содержат больше метаданных.
Вся информация, необходимая для проверки, содержится в атрибутах «data-*».
Устраняет необходимость в огромном объекте JavaScript.
Понимание ненавязчивой проверки
1. «входные» элементы, правила их проверки и как они работают
Итак, давайте выясним, что происходит с атрибутами «data-*».MVC создает атрибуты «data-*» на основе правил проверки.
jquery.validate.unobtrusive считывает правила и преобразует их в путь.
Как только ненавязчивая проверка преобразует эти правила, она вызывает метод «validate()» и передает массив правил с их настройками для их проверки.
Любое ненавязчивое правило любого элемента Html состоит из трех частей:
- data-val="true" — это просто флаг, указывающий, что к элементу прикреплена ненавязчивая проверка.
- data-val-rulename="message" - делает две вещи.
Часть «data-val-rulename» указывает имя правила, а «message» содержит текст сообщения проверки.
- data-val-rulename-additionalvalues="value" для добавления дополнительных значений, необходимых правилу проверки для завершения проверки.
(Например, проверка диапазона значений «диапазона», когда значение должно быть меньше некоторого значения и больше другого)
<input id="Name" class="ignore" type="text" name="Name" value="" data-val="true"
data-val-required="*" data-val-atleastonerequired="Enter at least Name, Email or Lastname"
data-val-atleastonerequired-attributes="Email,LName" />
К элементу применяются два правила.
Один из них — это встроенный атрибут «required», а другой — настраиваемый атрибут под названием «atleastonerequired».
Когда пользователь не вводит никаких данных и нажимает «Отправить форму», в качестве сообщения проверки появляется «*», указывающее, что элемент является обязательным.
Если пользователь нарушает правило atleastonerequired, появится сообщение о проверке.
2. Сообщения валидации и как они работают при ненавязчивой валидации.
Начнем с примера <!-- Required input using unobtrusive validation -->
<input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" data-val="true" data-val-required="The FirstName field is required." />
<!-- The input's validation message placeholder -->
<span data-valmsg-replace="true" data-valmsg-for="Name" class="field-validation-valid help-inline" />
Как мы видим, в контейнере для сообщения об ошибке есть два элемента data-*.
- «data-valmsg-for» — это значение атрибута «name» элемента «input», которому принадлежит контейнер.
И элемент «input», и контейнер должны находиться в одном теге формы.
- По умолчанию для параметра «data-valmsg-replace» установлено значение true. Разница между значениями true и false следующая: если установлено значение true, то сообщение об ошибке в контейнере будет меняться в зависимости от того, какое правило проверки было нарушено, если false, то оно будет постоянным и содержимое не изменится.
, только класс с «действительным» на «недействительный».
Перевод статьи Надима Хедра «Понимание HTML, созданного в результате ненавязчивой проверки в Asp.net MVC» обновление 01.06.13: добавлены ссылки на другие посты серии Теги: #перевод #плагины jquery #asp.net mvc #JavaScript #.
NET #ASP #ASP
-
Почему Рейтинг Alexa Важен
19 Oct, 24 -
Специалист По Маркировке Данных
19 Oct, 24 -
Расширения Firebug
19 Oct, 24 -
Опасности Обучения По Книгам
19 Oct, 24
