- PVSM.RU - https://www.pvsm.ru -
Это 2 часть серии «Понимание ненавязчивой валидации в ASP.Net MVC»
О чем мы поговорим в этой статье:
Microsoft представил первый модуль валидации в первой верисии MVC. Модуль совершенствовался с каждой версией, и превратился в ненавязчивую валидацию в ASP.Net MVC 3.
Если коротко, даже в современном JavaScript, который мы пишем в основном в отдельном js файле, мы нуждаемся иногда в данных, связанных с Html, и поэтому записываем метаданные объектов JavaScript внутри страницы Html. Мы вызываем функцию из файла js, которой передаем метаданные объекта на странице.
Одна из целей ненавязчивого JavaScript отделить JavaScript от Html разметки.
Почитать больше об этом можно тут [1] ( автор отсылает нас к статье о ненавязчивом JavaScript в англоязычной Википедии, прим. переводчика)
Ниже представлен код модели и Html разметки, сгенерированной используя валидацию MVC 2 и ненавязчивую валидацию MVC 3.
Наша модель
C#
public class ValidationModel {
[Required]
public string FirstName { get; set; }
[Required, StringLength(60)]
public string LastName { get; set; }
[Range(1, 130)]
public int Age { get; set; }
}
Представление в MVC 2 c использованием html helper-ов
Html
<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>
Представление в МVC 3 с использованием html helper-ов и ненавязчивой валидации
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." />
Этот код взят из статьи Brad Wilson «Unobtrusive Client Validation in ASP.NET MVC 3». [2]
Как мы можем увидеть, Html элементы «input» не нимеют никакого представления о том, какие правила валидации к ним применены. Есть только один большой JavaScript объект, содержащий информацию о валидации, примененной к каждому элементу страницы.
С другой стороны, если мы посмотрим на элементы «input», сгенерированные MVC 3, то увидим, что они содержат больше метаданных. Вся информация, необходимая для валидации содержится в атрибутах «data-* ». Отпадает необходимость в огромном объекте JavaScript
Итак, давайте выясним, что происходит с атрибутами «data-*».
MVC создает атрибуты «data-*», основываясь на правилах валидации.
jquery.validate.unobtrusive читает правила и преобразовывает их в путь.
После того, как ненавязчивая валидация преобразовала эти правила, она вызовет метод «validate()» и передаст массив правил с их настройками, чтобы провалидировать их.
Существует три части любого ненавязчивого правила любого Html элемента:
Рассмотрим подробнее сгенерированный элемент «input» и объясним атрибуты «data-*».
<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», появится его сообщение валидации.
Давайте начнем с примера
<!-- 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-*» в контейнере для сообщения об ошибке
Если будет нарушено одно из правил валидации, значение атрибута «class» будет содержать “field-validation-error”, а если нет, то “field-validation-valid”.
Автор: Juty
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/35687
Ссылки в тексте:
[1] тут: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
[2] Brad Wilson «Unobtrusive Client Validation in ASP.NET MVC 3».: http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html
[3] Источник: http://habrahabr.ru/post/181754/
Нажмите здесь для печати.