Компонент EditForm

Для оформления всех элементов ввода в одну форму и упрощения валидации применяется компонент EditForm. Фактически он рендерится в элемент <form>

Класс EditForm предоставляет следующие свойства:

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

• ChildContent: вложенное содержимое - набор компонентов ввода и элементов html

• EditContext: контекст редактирования - по сути те данные, для работы с которыми применяется форма

• Model: объект, привязанный к форме. Это свойство и EditContext - взаимоисключающиеся, нам нало установить только одно из этих свойств, поскольку если установлено свойство Model, то EditContext создается на основе значения свойства Model

• OnInvalidSubmit: метод-обработчик, который вызывается при отправке формы, если данные EditContext не проходят ввалидацию

• OnSubmit: метод-обработчик, который вызывается при отправке формы (нажатии на кнопку типа submit)

• OnValidSubmit: метод-обработчик, который вызывается при отправке формы, если данные EditContext проходят ввалидацию

Основная задача EditForm обеспечить валидацию введенных данных. Пример компонента, который использует EditForm:

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

<EditForm Model="@person" OnSubmit="Submit">
    <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>
<h3>@message</h3>

@code {
    Person person = new();
    string message = "";

    void Submit()
    {
        message = $"Name: {person.Name} Age: {person.Age}";
    }

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

Здесь данные представлены классом Person, который определяется в коде компонента App и имеет два свойства. В коде компонента App также определяется объект класса Person. Этот объект выступает в качестве модели формы EditForm - для этого установлено свойство Model:

<EditForm Model="@person" 

А поля ввода формы привязаны к свойствам объекта Person.

Кроме того, у EditForm установлен обработчик нажатия кнопки - метод Submit(), который выводит данные объекта Person на страницу.

EditContext

Вместо установки свойства Model у формы EditForm также можно использовать свойство EditContext, которое принимает объект одноименного типа EditContext и которое устанавливает констект формы. Например:

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

<EditForm EditContext="editContext" OnSubmit="Submit">
    <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>
<h3>@message</h3>

@code {
    string message = "";
    Person person = new();
    EditContext? editContext;

    protected override void OnInitialized()
    {
        editContext = new(person);
    }


    void Submit()
    {
        message = $"Name: {person.Name} Age: {person.Age}";
    }

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

Для установки объекта EditContext у класса EditForm применяется одноименное свойство

<EditForm EditContext="editContext"

Стоит отметить, что если у EditForm устанавливается свойство EditContext, то свойство Model устанавливать не надо.

Здесь объект EditContext создается в методе OnInitialized(), который вызывается при инициализации компонента:

Person person = new();
EditContext? editContext;

protected override void OnInitialized()
{
    editContext = new(person);
}

В конструктор EditContext передается отслеживаемый объект - здесь объект Person (это может быть объет любого типа). В итоге результат работы приложения будет тот же, что и при использовании свойства Model. Стоит также отметить, что у EditContext есть свойство Model, через которое можно получить отслеживаемую модель. Например:

void Submit()
{
    // преобразуем editContext.Model в тип Person
    if(editContext!=null && editContext.Model is Person p)
        message = $"Name: {p.Name} Age: {p.Age}";
}

Оба свойства - и Model, и EditContext применяются прежде всего для валидации данных, что будет рассмотрено в последующих статьях. Основная разница между ними, что EditContext позволяет настроить некоторые моменты валидации, что может потребоваться в некоторых сценариях.