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

Последнее обновление: 30.11.2023

Для вывода сообщений об ошибках в компонентах Blazor применяются два встроенных компонента - ValidationSummary и ValidationMessage. Оба они расположены в пространстве имен Microsoft.AspNetCore.Components.Forms.

ValidationSummary

ValidationSummary выводит все сообщения об ошибках. На уровне разметки html генерируется html-элемент <ul> с классом validation-errors

<ul class="validation-errors">
    <li class="validation-message">Сообщение об ошибке 1</li>
    <li class="validation-message">Сообщение об ошибке 2</li>
    ........................
    <li class="validation-message">Сообщение об ошибке N</li>
</ul>

В этот список добавляются все сообщения об ошибках в виде элемента с классом validation-message.

Пусть у нас в проекте есть класс Person, который представляет данные, и два компонента - App и Home:

Валидация в компонентах Blazor и ASP.NET

Пусть класс Person применяет атрибуты валидации:

using System.ComponentModel.DataAnnotations;

public class Person
{
    [Required]
    [StringLength(20, MinimumLength =2)]
    public string? Name { get; set; }
    [Required]
    [Range(1,110)]
    public int Age { get; set; }
}

Пусть компонент App представляет корневой компонент и просто выводит на страницу компонент Home:

@page "/"

<!DOCTYPE html>
<html>
<head>
    <title>METANIT.COM</title>
    <meta charset="utf-8" />
</head>
<body>
    <Home />
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

А в компоненте Home определим форму для ввода данных этого класса и с помощью ValidationSummary выведем ошибки валидации:

@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Web
@rendermode RenderMode.InteractiveServer

<EditForm Model="@person" OnSubmit="Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <p>
        Name:<br />
        <InputText id="name" @bind-Value="person.Name" />
    </p>
    <p>
        Age:<br />
        <InputNumber id="age" @bind-Value="person.Age" />
    </p>
    <button type="submit">Submit</button>
</EditForm>

@code {
    Person person = new();
    void Submit()
    {
        Console.WriteLine($"Name: {person.Name} \tAge: {person.Age}");
    }
}
ValidationSummary и вывод ошибок валидации в компонентах Blazor на C#

Если в данном случае мы введем некорректные значения, то компонент ValidationSummary будет формировать следующую разметку:

<ul class="validation-errors">
    <li class="validation-message">The field Age must be between 1 and 110.</li>
    <li class="validation-message">The field Name must be a string with a minimum length of 2 and a maximum length of 20.</li>
</ul>

ValidationMessage

Компонент ValidationMessage<T> отображает сообщение об ошибке для отдельного свойства модели. Этот компонент генерирует html-элемент <div> с классом validation-message, который содержит сообщение об ошибке.

С помощью свойства For компонент ValidationMessage устанавливает валидируемое свойство модели через передаваемое лямбда-выражение. Например, изменим компонент Home следующим образом:

@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Web
@rendermode RenderMode.InteractiveServer

<EditForm Model="@person" OnSubmit="Submit">
    <DataAnnotationsValidator />
    <p>
        Name:<br />
        <InputText id="name" @bind-Value="person.Name" /><br />
        <ValidationMessage For="@(() => person.Name)" />
    </p>
    <p>
        Age:<br />
        <InputNumber id="age" @bind-Value="person.Age" /><br />
        <ValidationMessage For="@(() => person.Age)" />
    </p>
    <button type="submit">Submit</button>
</EditForm>

@code {
    Person person = new();
    void Submit()
    {
        Console.WriteLine($"Name: {person.Name} \tAge: {person.Age}");
    }
}

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

Валидация и ValidationMessage в компонентах Blazor в приложениях на C#

Стилизация

Стилизируя классы validation-errors и validation-message, можно настроить вывод сообщений об ошибках. Например, определим в компоненте App примитивную стилизацию:

@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Web
@rendermode RenderMode.InteractiveServer

<style>
    .validation-errors {
        color: red;
    }
    div.validation-message{
        color: #2980B9;
    }
</style>
<EditForm Model="@person" OnSubmit="Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <p>
        Name:<br />
        <InputText id="name" @bind-Value="person.Name" /><br />
        <ValidationMessage For="@(() => person.Name)" />
    </p>
    <p>
        Age:<br />
        <InputNumber id="age" @bind-Value="person.Age" /><br />
        <ValidationMessage For="@(() => person.Age)" />
    </p>
    <button type="submit">Submit</button>
</EditForm>

@code {
    Person person = new();
    void Submit()
    {
        Console.WriteLine($"Name: {person.Name} \tAge: {person.Age}");
    }
}

В данном случае для ошибок в ValidationSummary применяется красный цвет, а для ValidationMessage - синий цвет:

Стилизация сообщений об ошибках валидации в компонентах Blazor в приложении на C#

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850