Компоненты Blazor для форм: InputText, InputNumber, InputCheckbox, InputDate.

В предыдущей части мы в общих чертах познакомились с тем, как организована работа с формами в Blazor. При работе с компонентом EditForm мы можем также использовать специальные компоненты Blazor представляющие собой текстовые поля, поля ввода чисел и так далее, которые также позволяют работать с формами в Blazor более комфортно.

Компоненты Blazor для ввода данных в формах являются наследниками компонента InputBase<T>. У этого компонента объявлены такие свойства как Value, которое позволяет производить двухстороннее связывание, DisplayName — позволяет задать имя компонента, которое будет использовано при выводе сообщение об ошибках валидации. Все потомки InputBase<T>поддерживают произвольные html-атрибуты, поэтому, в случае необходимости, мы можем воспользоваться, например, bootstrap, чтобы сделать форму более привлекательной. На данный момент в .NET 6 используются следующие компоненты ввода для форм в Blazor:

Компонент InputText

Компонент используется для ввода текста (string).  С этим компонентом мы познакомились в предыдущей статье:

<EditForm Model="person" OnSubmit="OnSubmit">
   ...
    <InputText @bind-Value="person.Name" id="personName"></InputText>
   ...
</EditForm>

здесь значение InputText связано со свойством Name объекта Person. Так как InputText, как и его предок, поддерживает произвольные html-атрибуты, то этот же компонент можно использовать и для задания пользователем пароля:

<InputText type="password" @bind-Value="person.Password"></InputText>

да и, в принципе, практически любых типов ввода согласно стандарту W3.

Компонент InputNumber

Компонент используется для ввода чисел следующих типов: Int32, Int64, Int16 , Single , Double, Decimal.

Дополнительным свойство этого компонента является свойство ParsingErrorMessage , которое возвращает или задает сообщение об ошибке, используемое при отображении ошибки синтаксического анализа. Например, посмотрим как будет использоваться это свойство в нашей форме из прошлой статьи:

@using System.ComponentModel.DataAnnotations

<PageTitle>Index</PageTitle>

<EditForm Model="person">
    <DataAnnotationsValidator  />
    <ValidationSummary  />
    <label for="personName">
        Введите имя
    <InputText @bind-Value="person.Name" id="personName" DisplayName="Имя"></InputText>
    </label>
    <br/>
    <label for="personAge">
        Введите возраст
        <InputNumber @bind-Value="person.Age" ParsingErrorMessage="Вводите целые только числа"></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();
}

Теперь запустим приложение и попробуем ввести в поле «Возраст», например, значение 12,3.

Так как поле InputNumber связано со свойством типа int, то при попытке отправить форму, содержащую число с плавающей точкой (запятой) мы получаем ошибку парсинга. При этом, если необходимо, то мы можем связать компонент InputNumber со свойством другого числового типа:

<EditForm Model="person">
   ...
   <InputNumber @bind-Value="person.Height" ParsingErrorMessage="Ошибка парсинга"></InputNumber>
   ...
</EditForm>

@code
{
    public class PersonModel
    {
        ....
        public double Height { get; set; }
    }

Компонент InputCheckbox

Компонент для ввода значений типа bool. Например,

....    
<InputCheckbox  @bind-Value="person.SomeBoolValue"></InputCheckbox>
....
</EditForm>

@code
{
    public class PersonModel
    {
        ....
        public bool SomeBoolValue { get; set;} 
    }
    PersonModel person = new PersonModel();
}

Этот компонент не поддерживает nullable-тип. Например, следующие код приведет к ошибке:

    ....
      <InputCheckbox  @bind-Value="person.SomeBoolValue"></InputCheckbox>
    ....
</EditForm>

@code
{
    public class PersonModel
    {
        ....
        public bool? SomeBoolValue { get; set;} 
    }

Компонент InputDate

Компонент для ввода значений даты/времени. Например,

....    
   <InputDate  @bind-Value="person.Birthday"></InputDate>
....
</EditForm>


@code
{
    public class PersonModel
    {
        ....
        public DateTime Birthday { get; set; }
    }
}

Компонент поддерживает также новые типы данных для работы с датой и временем — DateOnly и TimeOnly.

По умолчанию, компонент используется для ввода даты, однако, мы можем указать другой тип данных, например, время:

<InputDate Type="InputDateType.Time" @bind-Value="person.SomeTimeValue"></InputDate>

Перечисление InputDateType содержит следующие значения:

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

По умолчанию, к компонентам формы не применяются никакие стили, поэтому, если создать, например, вот такую форму:

<EditForm Model="person">
    <InputText @bind-Value="@person.Name"></InputText>
    <InputNumber @bind-Value="@person.Age"></InputNumber>
</EditForm>

@code
{
   private Person person = new(); 
}

то на экране увидим стандартные компоненты html:

в Blazor по умолчанию используется фреймворк Bootstrap. Чтобы компоненты формы получили стиль из Bootstap, им необходимо определить свойство class следующим образом:

<EditForm Model="person">
    <InputText class="form-control" @bind-Value="@person.Name"></InputText>
    <InputNumber class="form-control" @bind-Value="@person.Age"></InputNumber>
</EditForm>

В этом случае компоненты получат стиль Bootstrap и станут выглядеть следующим образом:

чтобы компоненты не «наезжали» друг на друга здесь уже будет необходимо использовать позиционирование элементов с помощью контейнеров или сеток Bootstrap. О том, как использовать сетки Bootstrap можно почитать здесь.

Итого

Сегодня мы рассмотрели некоторые компоненты ввода для формы в Blazor и их основные свойства. В следующей части мы продолжим рассмотрение компонентов Blazor и рассмотрим такие компоненты как InputRadio, InputSelect и InputTextArea.