Продолжаем разбираться с компонентами ввода для форм в Blazor. Сегодня рассмотрим следующие три компонента — InputSelect и InputRadio, InputTextArea.
Компонент InputSelect
Компонент списка выбора. Как и его «предок» из html, этот компонент должен содержать один или несколько элементов <option>. Например, доработаем нашу форму из этой статьи и сделаем возможность выбора пола человека:
<EditForm Model="person">
....
<label for="gender">
Пол
<InputSelect @bind-Value=person.Gender id="gender">
<option value="Unknown">Неизвестно</option>
<option value="Male">Мужской</option>
<option value="Female">Женский</option>
</InputSelect>
</label>
....
</EditForm>
@code
{
public class PersonModel
{
....
public Gender Gender { get; set; }
}
PersonModel person = new PersonModel();
public enum Gender
{
Unknown,
Male,
Female
}
}
Здесь мы связали компонент InputSelect со свойством объекта Gender, которое имеет тип перечисления (enum). В работающем приложении мы увидим следующее:
Здесь стоит обратить внимание на элементы <option> — в атрибут value следует записывать значение из перечисления. Так, если бы мы создали такой элемент <option>:
option value="Male Female">Мужской</option>
то Visual Studio не показала бы нам никакой ошибки, однако при отправке такая форма не прошла бы валидацию:
так как в Value записано неверное значение.
Компоненты InputRadio и InputRadioGroup
Компоненты списка переключателей для одиночного выбора. Компоненты InputRadio должны обязательно находиться внутри группы — InputRadioGroup. Например, перепишем предыдущий пример с выбором пола, используя переключатели:
<InputRadioGroup @bind-Value="person.Gender">
<InputRadio Value="Gender.Unknown"/>Неизвестно<br/>
<InputRadio Value="Gender.Male"/>Мужской<br/>
<InputRadio Value="Gender.Female"/>Женский<br/>
</InputRadioGroup>
Теперь запустим приложение и убедимся, что выбор работает и при выборе определенного RabioButton автоматически переключается и созданный ранее список выбора:
Компонент InputTextArea
Как и рассмотренный ранее компонент InputText, этот компонент используется для ввода текста, но, в отличие от InputText, представляет собой многострочный редактор. Пример использования:
...
<InputTextArea @bind-Value="person.Report"></InputTextArea>
...
@code
{
public class PersonModel
{
...
public string Report { get; set; } = "Текст \r\n на несколько \r\n строк";
}
...
}
В запущенном приложении этот компонент будет содержать три строки:
Итого
Итак, мы рассмотрели основные компоненты для ввода данных в формах Blazor: InputText, InputNumber, InputCheckbox, InputDate, InputSelect, InputRadio, InputRadioGroup и InputTextArea. Все эти компоненты должны располагаться внутри компонента формы — EditForm и позволяют использовать атрибуты модели для валидации данных формы. В следующей статье разберемся с тем, как настроить внешний вид списка об ошибках в форме.