Работа с формами и валидация

Встроенные компоненты ввода

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

Blazor позволяет работать со стандартными элементами ввода html, но в дополнение к этому также предоставляет дополнительные компоненты, которые определены в пространстве имен Microsoft.AspNetCore.Components.Forms и которые упрощаются работу с данными и их валидацию:

  • InputCheckbox рендерится как

    <input type="checkbox">

  • InputDate<TValue> рендерится как

    <input type="date">

  • InputFile рендерится как

    <input type="file">

  • InputNumber<TValue> рендерится как

    <input type="number">

  • InputRadio<TValue> рендерится как

    <input type="radio">

  • InputRadioGroup<TValue> рендерится как группа компонентов InputRadio<TValue>

  • InputSelect<TValue> рендерится как

    <select>

  • InputText рендерится как

    <input>

    Особенностью этого компонента является то, что он изменяет привязанное значение и валидирует его, используя событие oninput. То есть значение изменяется при вводе каждого отдельного символа.

  • InputTextArea рендерится как

    <textarea>

Встроенные компоненты ввода позволяют получить введенные данные и валидировать их. Валидация производится при изменении ввода и при отправке формы.

Все эти компоненты ввода поддерживают произвольные атрибуты. Любой атрибут, который не соответствует параметру компонента, добавляется к визуализируемому элементу HTML. Все они наследуется от базового класса InputBase<TValue>. Этот класс компонента предоставляет ряд общих свойств, среди которых отмечу следующие:

  • AdditionalAttributes: представляет коллекцию дополнительных атрибутов, которые применяются к компоненту

  • CurrentValue: получает или устанавливает текущее значение элемента ввода

  • DisplayName: представляет метку, которая используется идентификации поля при некорректном вводе для генерации сообщения об ошибке

  • Value: получает или устанавливает значение элемента ввода

  • ValueChanged: получает или устанавливает обработчик изменения значения

  • Value: получает или устанавливает значение элемента ввода

Также стоит отметить, что все эти элементы можно применять по отдельности сами по себе вне формы.

Рассмотрим использование большинства этих компонентов на примере. Пусть в проекте у нас есть класс Student и два компонента - App.razor и Home.razor:

Работа с формами в компонентах Blazor в ASP.NET Core

В классе Student определим следующий код:

public class Student
{
    public string Name { get; set; } = "";
    public int Age { get; set; }

    public DateTime EnrollmentDate { get; set;} = DateTime.Now; // дата поступления
    public bool HasWork { get; set; }                           // работает или нет
    public string Subject { get; set; } = "";                   // специальность
    public string[] Courses { 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 форму ввода данных для объекта этого типа:

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

<h2>Student</h2>
<div>
    <p>
        Name:<br />
        <InputText @bind-Value="student.Name" />
    </p>
    <p>
        Age:<br />
        <InputNumber @bind-Value="student.Age" />
    </p>
    <p>
        Enrollment Date:<br />
        <InputDate @bind-Value="student.EnrollmentDate" />
    </p>
    <p>
        Has Work:<br />
        <InputCheckbox @bind-Value="student.HasWork" />
    </p>
    <p>
        <InputRadioGroup @bind-Value="student.Subject">
            Subject: <br/>
            @foreach(var subject in subjects)
            {
                <InputRadio Value="@subject" />@subject<br />
            }
        </InputRadioGroup>
    </p>
    <p>
        Courses:<br />
        <InputSelect @bind-Value="student.Courses" multiple >
            @foreach(var course in courses)
            {
                <option value="@course">@course</option>
            }
        </InputSelect>
    </p>
</div>
<hr />
<div>
    <p>Name @student.Name</p>
    <p>Age: @student.Age</p>
    <p>Day: @student.EnrollmentDate.ToShortDateString()</p>
    <p>Working: @student.HasWork</p>
    <p>Subject: @student.Subject</p>
    <p>Courses: @string.Join(", ", student.Courses)</p>
</div>
@code{
    Student student = new();
    List<string> subjects = ["Math", "Programming"];
    List<string> courses = ["C#", "JavaScript", "HTML", "CSS"];
}

Здесь в коде C# компонента определяется объект Student, к свойствам которого привязываются различные поля ввода. Для наполнения списка радиокнопок и списка <select> определены два дополнительных списка - subjects и courses.

После компонентов ввода для проверки выводим значения свойств объекта Student.

Свойства объекта Student привязываются компоненты ввода таким же образом, как и стандартные элементы ввода html, только у компонентов ввода для установки привязки применяется атрибут @bind-Value. Единственное различие заключается в установке привязки к радиокнопкам:

<InputRadioGroup @bind-Value="student.Subject">
    Subject: <br/>
    @foreach(var subject in subjects)
    {
        <InputRadio Value="@subject" />@subject<br />
    }
</InputRadioGroup>

Здесь привязка идет к компоненту группы радиокнопок - InputRadioGroup. А этот компонент сам позволяет изменить привязанное свойство на основе выбранной радиокнопки. Что упрощает работу с радиокнопками.

Создание формы ввода данных в компонентах Blazor на C#

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

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