Далеко не последнюю роль при работе с Blazor играет заполнение пользователем различных форм и верификация введенных данных. На данный момент мы уже знаем как проводится обработка событий в Blazor и двухсторонняя привязка данных, поэтому сегодня мы можем начинать разбираться с формами в Blazor и тем, как верифицировать введенные пользователем данные.
EditForm vs <form>
Технически, в Blazor для работы с формами мы можем использовать стандартный html-элемент <form>, как и любые другие html-элементы. Но, при этом, в Blazor также имеется (и рекомендуется к использованию) специальный компонент — EditForm. В отличие от обычного <form> компонент EditForm имеет дополнительные возможности, делающие работу с формами в Blazor более комфортной и удобной, а именно:
- возможность указания контекста (модели) данных с которыми мы будем работать
- возможность верификации введенных пользователем данных с использованием атрибутов модели.
Именно поэтому мы, в дальнейшем и будем использовать именно EditForm.
Простой пример формы Blazor
Для начала, рассмотрим простой пример формы Blazor, в которой пользователь вводит свой данные:
@inject ILogger<PersonModel> Logger
<EditForm Model="person" OnSubmit="OnSubmit">
<label for="personName">
Введите имя
<InputText @bind-Value="person.Name" id="personName"></InputText>
</label>
<br/>
<label for="personAge">
Введите возраст
<InputNumber @bind-Value="person.Age"></InputNumber>
</label>
<br/>
<button type="submit">Отправить</button>
</EditForm>
@code
{
public class PersonModel
{
public string Name { get; set; }
public int Age { get; set; }
}
PersonModel person = new PersonModel();
private void OnSubmit()
{
Logger.LogInformation("Сработало событие OnSubmit");
}
}
Здесь используется компонент EditForm, для которого определена модель типа PersonModel. На форме расположены два компонента Blazor — InputText и InputNumber для ввода пользователем своих данных, а также кнопка «Отправить». В работающем приложении эта форма будет выглядеть следующим образом:
Для формы определен обработчик события OnSubmit, который сработает, когда пользователь нажмет кнопку «Отправить». При этом, обратите внимание, что для самой кнопки никаких обработчиков событий типа @onclick определять не требуется, а необходимо только указать тип кнопки type="submit".
Html-код формы в приложении будет выглядеть следующим образом:
<form>
<label for="personName">
Введите имя
<input id="personName" class="valid"></input></label>
<br>
<label for="personAge">
Введите возраст
<input step="any" type="number" class="valid" value="0"></input></label>
<br>
<button type="submit">Отправить</button>
</form>
Здесь мы не проводим никаких проверок введенных пользователем данных, поэтому, если нажать на кнопку «Отправить», то в консоли мы увидим следующий текст:
Валидация модели в EditForm
При работе с формами (и, в принципе с моделями данных) нам желательно делать какие-либо проверки введенных данных. Например, чтобы пользователь не вводил отрицательное значение возраста или его имя состояло более, чем из одного символа и так далее.
Опять же, чисто технически, мы можем проводить все эти проверки вручную, например. в том же методе OnSubmit и, при обнаружении ошибок, каким-либо образом сообщать об этом пользователю. Но это не самый удобный и универсальный метод, особенно, если наша модель используется в нескольких местах приложения.
Компонент EditForm может проводить валидацию модели (правильность введенных пользователем данных), используя атрибуты модели. Доработаем наш пример, чтобы увидеть как работает валидация модели в EditForm.
@using System.ComponentModel.DataAnnotations
<EditForm Model="person" OnInvalidSubmit="OnInvalidSubmit" OnValidSubmit="OnSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<label for="personName">
Введите имя
<InputText @bind-Value="person.Name" id="personName"></InputText>
</label>
<br/>
<label for="personAge">
Введите возраст
<InputNumber @bind-Value="person.Age"></InputNumber>
</label>
<br/>
<button type="submit">Отправить</button>
</EditForm>
@code
{
public class PersonModel
{
[Required]
[StringLength(50, MinimumLength = 2, ErrorMessage = "Длина строки с именем должна быть не менее 2х и не более 50ти символов")]
public string Name { get; set; }
public int Age { get; set; }
}
PersonModel person = new PersonModel();
private void OnInvalidSubmit()
{
Logger.LogInformation("Сработало событие OnInvalidSubmit");
}
private void OnSubmit()
{
Logger.LogInformation("Сработало событие OnSubmit");
}
}
На что в этом примере обратить внимание:
во-первых, для компонента EditForm определено два обработчика события:
OnInvalidSubmit— обработчик сработает в том случае, если при валидации модели будут обнаружены какие-либо ошибки;OnValidSubmit— сработает, если все данные будут верными
во-вторых, у компонента EditForm дополнительно включены два элемента:
<DataAnnotationsValidator />— включает поддержку валидации модели на основе атрибутов<ValidationSummary />— выводит список сообщений об обнаруженных ошибках валидации
в-третьих, в классе модели (PersonModel) для свойства Name использованы два атрибута:
[Required]— указывает на то, что свойство является обязательным для заполнения-
[StringLength(50, MinimumLength = 2, ErrorMessage = "Длина строки с именем должна быть не менее 2х и не более 50ти символов")]— устанавливает минимальную и максимальную длину строки имени, а также задает текст ошибки, который будет выведен пользователю.
Теперь запустим приложение и проверим его работу. При попытке оставить поле с именем пустым, мы увидим:
При вводе в поле только одного символа:
Ну и, соответственно, когда мы введем более одного символа в поле с именем, то валидация формы пройдет успешно:
Итого
Для работы с формами в Blazor мы имеем возможность использовать обычный html-элемент <form>, однако, с точки зрения удобства и комфортной работы, желательно использование специального компонента Blazor — EditForm, который позволяет нам проводить верификацию модели, используя атрибуты модели и выводить список ошибок пользователю, не прибегая к использованию каких-либо сторонних средств и js-скриптов.