Встроенные компоненты Razor для работы с формами

В Blazor содержится ряд встроенных компонентов, содержащих необходимые параметры и события для работы с формами. Эти компоненты основаны на стандартных html-элементах, таких как <input> и делают работу с формами более удобной и комфортной для разработчиков.

Компонент EditForm

Технически, в Blazor Hybrid для работы с формами мы можем использовать стандартный html-элемент <form>, как и любые другие html-элементы. Но, при этом, в Blazor также имеется (и рекомендуется к использованию) специальный компонент — EditForm.  В отличие от обычного <form>  компонент EditForm имеет дополнительные возможности, делающие работу с формами в Blazor более комфортной и удобной, а именно:

  • возможность указания контекста (модели) данных с которыми мы будем работать
  • возможность верификации введенных пользователем данных с использованием атрибутов модели.

Ниже мы рассмотрим пример использования этого компонента в приложении Blazor Hybrid.

Компоненты InputText InputCheckbox, InputDate, InputFile, InputNumber, InputRadio

Все эти компоненты Razor используют для визуализации стандартный html-элемент <input>:

Компонент ввода Вид в Html-документе
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>
InputText <input>

Каждый из этих компонентов имеет свои параметры и события. Например, создадим новое приложение Blazor Hybrid и изменим код компонента Home следующим образом:

@page "/"
<EditForm Model="person" >
    <label>
        Имя:
        <InputText @bind-Value="person.Name" DisplayName="Имя пользователя"></InputText>
    </label>
    <br />
    <label>
        Возраст:
        <InputNumber TValue="int" @bind-Value="person.Age" DisplayName="Возраст пользователя"></InputNumber>
    </label>
    <br />
    <label>
        Является админом:
        <InputCheckbox @bind-Value="person.IsAdmin" DisplayName="Признак администратора"></InputCheckbox>
    </label>
    <br />
    <label>
        Пароль:
        <InputText type="password" @bind-Value="person.Password" DisplayName="Пароль"></InputText>
    </label>
</EditForm>

@code{
    PersonModel person = new();


    class PersonModel
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public bool IsAdmin { get; set; }
        public string Password { get; set; }
    }
}

Рассмотрим этот код подробнее. Здесь мы определили в коде компонента модель данных — класс PersonModel с объектами которого мы будем далее работать.

class PersonModel
{
    public string Name { get; set; }
    public int Age { get; set; }
    public bool IsAdmin { get; set; }
    public string Password { get; set; }
}

Также мы создали объект этого класса для того, чтобы в дальнейшем его использовать в работе с формой:

PersonModel person = new();

Теперь посмотрим на разметку компонента. Здесь представлена форма для ввода данных для пользователя. Для создания формы мы использовали компонент EditForm у которого определили обязательный параметр Model в котором в качестве значения указали созданный в коде объект person:

<EditForm Model="person" >

Внутри этого компонента мы располагаем встроенные компоненты Razor для работы с формами. И здесь обратите внимание, как используются компоненты InputText для ввода имени и пароля пользователя:

<InputText @bind-Value="person.Name" DisplayName="Имя пользователя"></InputText>
...
<InputText type="password" @bind-Value="person.Password" DisplayName="Пароль"></InputText>

Так как компоненты поддерживают любые атрибуты, то во втором случае мы определили для компонента атрибут type="password", указав, что компонент используется для ввода пароля.

Что касается ввода чисел (возраста), то здесь мы использовали компонент InputNumber у которого обязательным является параметр TValue. В нашем случае, мы указали, что вводиться должны целые числа типа int:

<InputNumber TValue="int" @bind-Value="person.Age" DisplayName="Возраст пользователя"></InputNumber>

В качестве значения TValue мы можем указать следующие типы: Int32, Int64, Int16 , Single , Double или Decimal

Также мы использовали компонент InputCheckbox для отметки пользователя как администратора

<InputCheckbox @bind-Value="person.IsAdmin" DisplayName="Признак администратора"></InputCheckbox>

Это всего лишь заготовка формы, которую мы будем далее дорабатывать, поэтому вот такой её вид в запущенном приложении не должен вас смущать:

Теперь последовательно доработаем эту форму и начнем с визуального оформления.

Применение стиля к элементам формы

По умолчанию в Blazor Hybrid для визуального оформления элементов используется CSS-фреймворк Bootstrap. Рассмотрение этого фреймворка выходит за рамки Blazor и C#, в принципе, однако, вы всегда можете обратиться к официальной документации, чтобы понять как работают те или иные атрибуты компонентов. Я же продемонстрирую итоговый код нашего компонента Home с уже оформленной формой:

@page "/"
<EditForm Model="person" >
     <div class="mb-2 row">
        <label for="name" class="col-sm-2 col-form-label">Имя:</label>
        <div class="col-sm-5">
           <InputText id="name" class="form-control" @bind-Value="person.Name" DisplayName="Имя пользователя"></InputText>
        </div>
    </div>

    <div class="mb-2 row">
        <label for="age" class="col-sm-2 col-form-label"> Возраст:</label>
        <div class="col-sm-1">
            <InputNumber id="age" class="form-control" TValue="int" @bind-Value="person.Age" DisplayName="Возраст пользователя"></InputNumber>
         </div>
    </div>

    <div class="mb-2 row">
        <label for="isAdmin" class="col-sm-2 col-form-check-label">Является админом:</label>
        <div class="col-sm-1">
            <InputCheckbox id="isAdmin" class="form-check-input" @bind-Value="person.IsAdmin" DisplayName="Признак администратора"></InputCheckbox>
        </div>
    </div>
    
    <div class="mb-2 row">
        <label for="pass" class="col-sm-2 col-form-label">Пароль:</label>
        <div class="col-sm-2">
            <InputText id="pass" type="password" class="form-control" @bind-Value="person.Password" DisplayName="Пароль"></InputText>
        </div>
    </div>
</EditForm>

@code {
    PersonModel person = new();

    class PersonModel
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public bool IsAdmin { get; set; }
        public string Password { get; set; }
    }
}

Здесь каждое поле формы помещено в <div>, а также определены необходимые атрибуты class для html-элементов. Например, для полей ввода в Bootstrap применяется атрибут class="form-control". Теперь можно запустить приложение и посмотреть как изменился внешний вид формы:

Обратите внимание на то, что границы полей ввода «Имя» и «Возраст» выделены зеленым цветом. Так выделяются поля, прошедшие верификацию и так как мы ещё не определили никаких правил проверки введенных пользователем значений, то по умолчанию, считается, что все данные введены верно. Теперь добавим в наше приложение валидацию модели.

Валидация модели

Компонент EditForm поддерживает валидацию модели на основе атрибутов. Для этого изменим код компонента следующим образом:

@using System.ComponentModel.DataAnnotations

@page "/"
<EditForm Model="person" >
    <DataAnnotationsValidator  />
    <ValidationSummary />
     <div class="mb-2 row">
        <label for="name" class="col-sm-2 col-form-label">Имя:</label>
        <div class="col-sm-5">
           <InputText id="name" class="form-control" @bind-Value="person.Name" DisplayName="Имя пользователя"></InputText>
        </div>
    </div>

    <div class="mb-2 row">
        <label for="age" class="col-sm-2 col-form-label"> Возраст:</label>
        <div class="col-sm-1">
            <InputNumber id="age" class="form-control" TValue="int" @bind-Value="person.Age" DisplayName="Возраст пользователя"></InputNumber>
         </div>
    </div>

    <div class="mb-2 row">
        <label for="isAdmin" class="col-sm-2 col-form-check-label">Является админом:</label>
        <div class="col-sm-1">
            <InputCheckbox id="isAdmin" class="form-check-input" @bind-Value="person.IsAdmin" DisplayName="Признак администратора"></InputCheckbox>
        </div>
    </div>
    
    <div class="mb-2 row">
        <label for="pass" class="col-sm-2 col-form-label">Пароль:</label>
        <div class="col-sm-2">
            <InputText id="pass" type="password" class="form-control" @bind-Value="person.Password" DisplayName="Пароль"></InputText>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
</EditForm>

@code {
    PersonModel person = new();

    class PersonModel
    {
        [Required(ErrorMessage ="Имя пользователя - обязательное поле")]
        public string Name { get; set; }
        public int Age { get; set; }
        public bool IsAdmin { get; set; }
        [StringLength(20, MinimumLength = 10, ErrorMessage = "Длина пароля должна быть не менее 10 символов")]
        public string Password { get; set; }
    }
}

Первое изменение, которое мы сделали — это подключили пространство имен

@using System.ComponentModel.DataAnnotations

для того, чтобы мы могли использовать атрибуты валидации. Второе — это, собственно, добавили в модель необходимые атрибуты и прописали в них текст ошибок:

class PersonModel
{
    [Required(ErrorMessage ="Имя пользователя - обязательное поле")]
    public string Name { get; set; }
    public int Age { get; set; }
    public bool IsAdmin { get; set; }
    [StringLength(20, MinimumLength = 10, ErrorMessage = "Длина пароля должна быть не менее 10 символов")]
    public string Password { get; set; }
}

и, наконец, третье — добавили в компонент EditForm два новый компонента:

  1. <DataAnnotationsValidator /> — включает поддержку валидации модели на основе атрибутов
  2. <ValidationSummary /> — выводит список сообщений об обнаруженных ошибках валидации

Ну и, в качестве дополнения, добавили кнопку «Отправить» в форму:

<button type="submit" class="btn btn-primary">Отправить</button>

Теперь можно запустить приложение и посмотреть на результат. Запустите приложение и сразу нажмите кнопку «Отправить» — вы должны увидеть следующую ошибку валидации:

Теперь попробуйте ввести в поле формы несколько символов и снова повторить отправку. Так как предыдущая ошибка не была исправлена, то на экране вы увидите:

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

Таким образом, в этой части мы создали простенькую форму для ввода данных о пользователе и обеспечили её валидацию на основе атрибутов.

Более подробную информацию о компоненте EditForm можно получить в этой статье, а о компонентах форм — здесь и здесь

Итого

Для работы с элементами форм в Blazor имеются встроенные компоненты, поддерживающие двухстороннюю привязку, а также валидацию на основе атрибутов. Использование этих компонентов рекомендуется при разработке приложений.

Подписаться
Уведомить о
guest
0 Комментарий
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии