Blazor Forms

💡 Усі статті, обговорення, новини про .NET — в одному місці. Приєднуйтесь до .NET спільноти!

Привіт! Подивимось, як можна створити форму в BlazorServer.

Розпочнемо з моделі. Створю файл Models/User.cs, який буде містити поля для форми.

namespace BlazorLearn.Models
{
    public class User
    {
        public string UserName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
        public int Age { get; set; }
        public string Gender { get; set; }
    }
}

Для того, щоб модель була доступна для razor-компонентів, її потрібно добавити в _Imports.razor, @using BlazorLearn.Models.

Basic Form

Тепер я створю razor компонент Register.razor, який буде містити в собі форму. Для того, щоб форму можна було відкрити в браузері зверху сторінки, додам @page "/register". В code секції потрібно створити новий обєкт класу User, і також пусту стрінгу в яку буде записано дані після сабміту форми. І додам <p>@_formResult</p> для того, щоб відобразити внесені дані після сабміту.

Тепер перейдемо до самої форми.

В blazor форма створюється за допомогою тегу EditForm, в який потрібно передати модель. В нас це об’єкт типу User який створено в секції code — <EditForm Model="_user"></EditForm>. Тепер в форму потрібно додати input поля. Для тексту це буде <InputText></InputText> для інших типів даних є свої теги, наприклад InputNumber для числових типів. Додам інпут поле для кожного елемента з моделі. Також в формі можна викликати метод на івенти типу OnValidSubmit чи OnInvalidSubmit. Для цього я зроблю метод HandleValidSubmit, який запише в UserName i LastName з формив пусту стрінгу створену вище.

@page "/register"

<p>@_formResult</p>

<EditForm Model="_user" OnValidSubmit="HandleValidSubmit" On>
    <InputText id="UserName" @bind-Value="_user.UserName"></InputText>
    <InputText id="LastName" @bind-Value="_user.LastName"></InputText>
    <InputText id="Email" @bind-Value="_user.Email"></InputText>
    <InputSelect id="Gender" @bind-Value="_user.Gender">
        <option value="">Select Gender</option>
        <option value="1">Male</option>
        <option value="2">Female</option>
    </InputSelect>
    <InputNumber id="Age" @bind-Value="_user.Age"></InputNumber>
    <button class="btn btn-primary" type="submit">Submit</button>
</EditForm>

@code {
    private User _user = new User();
    private string _formResult = "";

    private void HandleValidSubmit()
    {
        _formResult = $"{_user.UserName}, {_user.LastName} was created";
    }
}

Форма працює, але в полі Age я ввів −30 і ніякої валідації не відбулось. Додамо тепер валідацію.

Form Validation

Валідація додається за допомогою атрибутів. Повернемось до моделі і внесемо декілька змін.

using System.ComponentModel.DataAnnotations;

namespace BlazorLearn.Models
{
    public class User
    {
        [Required]
        [StringLength(maximumLength: 20, MinimumLength = 5, ErrorMessage = "Invalid UserName length")]
        public string UserName { get; set; }
        [Required]
        [StringLength(maximumLength: 10, MinimumLength = 5, ErrorMessage = "Invalid LastName length")]
        public string LastName { get; set; }
        [Required]
        [EmailAddress(ErrorMessage = "Provide a valid email address")]
        public string Email { get; set; }
        [Required]
        [Range(1, 100, ErrorMessage = "You need to enter valid range")]
        public int Age { get; set; }
        public string Gender { get; set; }
    }
}

Тепер для UserName та LestName діє валідація на довжину і також ці поля обов’язкові для заповнення. Для Email додана валідація на email адрес. І для Age додана валідація на вік від 1 до 100. Також ці поля є обовязковими. Для поля Gender ніякої валідації не додано.

Для того, щоб валідація відбувалась, потрібно додати <DataAnnotationsValidator></DataAnnotationsValidator> тег в форму.

Тепер валідація працює, але ніякі повідомлення не відображаються. Для повідомлень, я додам ще один тег <ValidationSummary></ValidationSummary>. В результаті форма набуде такого вигляду

@page "/register"

<p>@_formResult</p>

<EditForm Model="_user" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator></DataAnnotationsValidator>
    <ValidationSummary></ValidationSummary>
    <label>
        First Name:
        <InputText id="UserName" @bind-Value="_user.UserName"></InputText>
    </label>
    <label>
        Last Name:
        <InputText id="LastName" @bind-Value="_user.LastName"></InputText>
    </label>
    <label>
        Email:
        <InputText id="Email" @bind-Value="_user.Email"></InputText>
    </label>
    <label>
        Gender:
        <InputSelect id="Gender" @bind-Value="_user.Gender">
            <option value="">Select Gender</option>
            <option value="1">Male</option>
            <option value="2">Female</option>
        </InputSelect>
    </label>
    <label>
        Age:
        <InputNumber id="Age" @bind-Value="_user.Age"></InputNumber>
    </label>
    <button class="btn btn-primary" type="submit">Submit</button>
</EditForm>

@code {
    private User _user = new User();
    private string _formResult = "";

    private void HandleValidSubmit()
    {
        _formResult = $"{_user.UserName}, {_user.LastName} was created";
    }
}