Модели в ASP.NET Core MVC. Tag-хэлперы валидации

Содержание

ValidationMessageTagHelper
ValidationSummaryTagHelper
Стилизация вывода сообщений об ошибках
Итого

В предыдущей части мы затронули такую тему как tag-хэлперы. Тема достаточно интересная и обширная и здесь мы продолжим её рассмотрение с точки зрения использования различных tag-хэлперов для валидации модели в ASP.NET Core MVC.

Для изучения темы нам потребуется приложение из предыдущей части. Там мы использовали следующую модель:

public class Person
{
    [Required(ErrorMessage = "Поле Name обязательно к заполнению")]
    public string Name { get; set; }
    [EmailAddress]
    [Remote(action: "CheckMail", controller:"Home", ErrorMessage ="Ошибка: такой email нельзя использовать")]
    public string Email { get; set; }
    [Range(1, 100, ErrorMessage = "Возраст должен находится в пределах от 1 до 100 лет")]
    public int Age { get; set; }
}

и использующее эту модель представление:

@model Person
@{
    ViewData["Title"] = "Home Page";
}

<form method="post">
    <div>
        <p>
            <label asp-for="Name">Name</label><br />
            <input type="text" asp-for="Name" />
            <span asp-validation-for="Name" />
        </p>
        <p>
            <label asp-for="Age">Age</label><br />
            <input asp-for="Age" />
            <span asp-validation-for="Age" />
        </p>
        <p>
            <label asp-for="Email">Email</label><br />
            <input asp-for="Email" />
            <span asp-validation-for="Email" />
        </p>
        <p>
            <input type="submit" value="Send" />
        </p>
    </div>
</form>


<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.js"></script>

ValidationMessageTagHelper

Этот tag-хэлпер используется для валидации модели на стороне клиента. Хелпер определяется с помощью атрибута asp-validation-for к элементу <span>. Например,

<span asp-validation-for="Email" />

Атрибут asp-validation-for в качестве значения принимает название свойства модели, для которого будет выводиться сообщение об ошибке валидации. Такие атрибуты мы можем применять ко всем полям, которые необходимо проверить, что, собственно и было сделано в форме выше. В итоге, применение этого tag-хэлпера приведет к тому, что будет сгенерирована следующая html-разметка:

<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true" />

data-valmsg-for — это значение атрибута name элемента input, которому принадлежит контейнер.
data-valmsg-replace — указывает будет ли сообщение ошибке изменяться в зависимости от того, какое правило будет нарушено. По умолчанию, значение установлено по умолчанию в true. Разница между значениями true и false следующая: если установлено в true, то сообщение об ошибке в контейнере будет изменяться в зависимости от того, какой правило валидации было нарушено, если false, то будет постоянным и содержание не будет меняться, будет меняться только класс с valid на invalid.

ValidationSummaryTagHelper

Этот tag-хелпер применяется для отображения сводки ошибок валидации. Он должен применяется к элементу <div> в виде атрибута asp-validation-summary. Например, изменим нашу веб-форму следующим образом:

<form method="post">
    <div asp-validation-summary="All"></div>
    <div>
       здесь код полей input формы
    </div>
</form>

Теперь запустим приложение и посмотрим, как будут выводится сообщения об ошибках:

Вверху (в месте, где мы определили тэг div с атрибутом asp-validation-summary) выводит сводка, содержащая все сообщения об ошибках в форме. Для asp-validation-summary могут определяться следующие значение:

None — ошибки валидации не отображаются
ModelOnly — отображаются только ошибка валидации уровня модели, ошибки валидации для отдельных свойств не отображаются
All — отображаются все ошибки валидации

Сводку об ошибках удобно использовать именно в том случае, когда мы проводим какие-то дополнительные проверки модели на стороне сервера, когда форма проходит формальную валидацию на стороне клиента. Например, изменим метод Index() к контроллере следующим образом:

[HttpPost]
public IActionResult Index(Person person)
{
    if (person.Name == "admin")
    {
        ModelState.AddModelError("", "Имя admin запрещено использовать");
    }
    if (ModelState.IsValid)
        return Ok(person);
    return View();
}

если пользователь введет имя admin, то при выполнении метода Index() будет изменено состояние модели:

ModelState.AddModelError("", "Имя admin запрещено использвоать")

Пустая строка в первом параметре указывает, что ошибка относится к уровню модели. Теперь мы можем использовать в атрибуте asp-validation-summary значение ModelOnly

form method="post">
    <div asp-validation-summary="ModelOnly"></div>
    ....
</form>

и посмотреть на результат:

Стилизация вывода сообщений об ошибках

Когда происходит валидация, то при отображении ошибок соответствующим полям присваиваются определенные классы css:

<form method="post">
    <div class="validation-summary-errors">
      <ul>
        <li>
        </li>
     </ul>
    </div>
    <div>
        <p>
            <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true" />
        </p>
        <p>
            <span class="field-validation-valid" data-valmsg-for="Age" data-valmsg-replace="true" />
        </p>
        <p>
            <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true" />
        </p>
        <p>
            <input type="submit" value="Send" />
        </p>
    </div>

для блока ошибок, который генерируется хелпером ValidationSummaryTagHelper, при наличии ошибок устанавливается класс validation-summary-errors. Если ошибок нет, то данный блок не отображается
для элемента <span>, который отображает ошибку для каждого отдельного поля и который генерируется хелпером ValidationTagHelper, при наличии ошибок устанавливается класс field-validation-error. Если ошибок нет, то данный элемент имеет класс field-validation-valid
для поля ввода при наличии ошибок устанавливается класс input-validation-error. Если ошибок нет, то устанавливается класс valid

Используя эти классы, мы можем настроить отображение сообщений об ошибках. Добавим в файл wwwroot/css/site.css следующие строки

.field-validation-error {
    color: #ff0000;
}

input.input-validation-error {
    border: 1px solid #ff0000;
}

input.valid {
    border: 1px solid #16a085;
}

.validation-summary-errors {
    color: #b94a48;
}

Посмотрим на результат:

Итого

Tag-хэлперы валидации позволяют выводить сообщения об ошибках непосредственно в представлении. Ошибки можно выводить как отдельно для каждого поля, так и в виде сводки. При необходимости, мы можем использовать CSS для стилизации вывода сообщений об ошибках.