Продолжаем разбираться с компонентами ввода для форм в Blazor. Сегодня рассмотрим следующие три компонента — InputSelect и InputRadio, InputTextArea.
blazor
Компоненты Blazor для форм: InputText, InputNumber, InputCheckbox, InputDate.
В предыдущей части мы в общих чертах познакомились с тем, как организована работа с формами в Blazor. При работе с компонентом EditForm мы можем также использовать специальные компоненты Blazor представляющие собой текстовые поля, поля ввода чисел и так далее, которые также позволяют работать с формами в Blazor более комфортно.
Работа с формами в Blazor (компонент EditForm)
Далеко не последнюю роль при работе с Blazor играет заполнение пользователем различных форм и верификация введенных данных. На данный момент мы уже знаем как проводится обработка событий в Blazor и двухсторонняя привязка данных, поэтому сегодня мы можем начинать разбираться с формами в Blazor и тем, как верифицировать введенные пользователем данные.
Запрет действий по умолчанию
Иногда нам может потребоваться запретить браузеру какие-либо действия по умолчанию. Например, если вы кликаете по какой-либо ссылке, то браузер попробует перейти по ссылке указанной в атрибуте href. В Blazor мы можем запретить такое действие по умолчанию и переопределить поведение.
Обработка событий дочерних компонентов Blazor
Достаточно распространенным сценарием работы в Blazor с вложенными (дочерними) компонентами является выполнение метода родительского компонента при возникновении события у дочернего компонента. Например, когда в дочернем элементе возникает событие onclick необходимо вызывать какой-либо метод, определенный в родительском компоненте.
Обработка событий в Blazor
В Blazor для обработки каких-либо событий элементов (например, клик по элементу, потеря фокуса и т.д.) используется следующий синтаксис: @on[EVENT]="[DELEGATE]", где EVENT — это какое-либо событие DOM, а DELEGATE — обработчик события делегата в компоненте Blazor.
Применение макетов Blazor
В прошлой части мы создали свой собственный макет для отдельной области приложения. Однако, применять макеты мы можем не только для всей области в целом, но и к отдельным страницам и их частям.
Макеты в Blazor
Любой сайт содержит какие-либо повторяющиеся элементы, например , заголовок (header) с логотипом, подвал (footer), панель навигации и так далее. Повторять это содержимое вручную от страницы к странице — лишняя трата времени и сил. Для таких случаев в Blazor предусмотрены макеты. Макеты в Blazor — это компоненты, содержащие какие-либо постоянно повторяющиеся элементы страницы для всего приложения или отдельное его области.
Привязка данных в Blazor
В Blazor механизм привязки данных может применяться к любом атрибуту html-элемента. Для привязки данных используется директива @bind-. Привязка данных в Blazor позволяет связать свойства и поля компонента в программной части компонента с какими-либо атрибутами html-элементов в визуальной части.
Передача набора атрибутов компонентам в Blazor
При разработке приложения Blazor не всегда бывает известно то, какие атрибуты должен содержать тот или иной элемент на странице. Например, в зависимости от каких-то внешних данных мы должны менять стиль элемента на форме или добавлять/добавлять какие-либо атрибуты и так далее. В Blazor имеется возможность передавать произвольный набор атрибутов компонентам.