Одним из нововведений в Blazor .NET 6 стала возможность использовать динамические компоненты (DynamicComponent). Стандартный подход к созданию пользовательского интерфейса в Blazor состоит в том, чтобы разбить интерфейс на части (компоненты) и, в зависимости от потребностей пользователя составлять из этих компонентов всё содержимое той или иной страницы. DynamicComponent расширяет возможности по построению пользовательского интерфейса в Blazor.
Компоненты Blazor
Третья часть учебника по Blazor. Компоненты Blazor
Code-behind в Blazor
Обычно, компонент Blazor создается в одном файле с расширением .razor. В этом файле содержится и HTML-разметка компонента с необходимыми привязками данных и код программной части — обработка событий, бизнес-логика и т.д. С одной стороны, такой подход к разработке довольно привычный (особенно, если до этого вы разрабатывали приложения с использованием .NET Framework), а, с другой стороны, не совсем (а, точнее, совсем) не удобен в том случае, если над разметкой и логикой компонента работают разные люди. В этом случае, Blazor позволяет разделить разметку и код программной части компонента.
Жизненный цикл компонента Blazor
Компоненты Blazor имеют четко определенный жизненный цикл. Жизненный цикл компонента можно использовать для инициализации состояния компонента и/или реализации расширенного поведения компонентов. Компонент обрабатывает события своего жизненного цикла в наборе синхронных и асинхронных методов. Эти методы, при желании, можно переопределить для выполнения дополнительных операций с компонентом.
Запрет действий по умолчанию
Иногда нам может потребоваться запретить браузеру какие-либо действия по умолчанию. Например, если вы кликаете по какой-либо ссылке, то браузер попробует перейти по ссылке указанной в атрибуте href. В Blazor мы можем запретить такое действие по умолчанию и переопределить поведение.
Обработка событий дочерних компонентов Blazor
Достаточно распространенным сценарием работы в Blazor с вложенными (дочерними) компонентами является выполнение метода родительского компонента при возникновении события у дочернего компонента. Например, когда в дочернем элементе возникает событие onclick необходимо вызывать какой-либо метод, определенный в родительском компоненте.
Обработка событий в Blazor
В Blazor для обработки каких-либо событий элементов (например, клик по элементу, потеря фокуса и т.д.) используется следующий синтаксис: @on[EVENT]="[DELEGATE]", где EVENT — это какое-либо событие DOM, а DELEGATE — обработчик события делегата в компоненте Blazor.
Привязка данных в Blazor
В Blazor механизм привязки данных может применяться к любом атрибуту html-элемента. Для привязки данных используется директива @bind-. Привязка данных в Blazor позволяет связать свойства и поля компонента в программной части компонента с какими-либо атрибутами html-элементов в визуальной части.
Каскадные параметры в Blazor
Еще одной полезной возможностью Blazor является то, что компонент-предок может предоставить каскадный параметр с помощью компонента CascadingValue, который заключает поддерево иерархии компонентов и предоставляет одно значение для всех компонентов в его поддереве.
Передача набора атрибутов компонентам в Blazor
При разработке приложения Blazor не всегда бывает известно то, какие атрибуты должен содержать тот или иной элемент на странице. Например, в зависимости от каких-то внешних данных мы должны менять стиль элемента на форме или добавлять/добавлять какие-либо атрибуты и так далее. В Blazor имеется возможность передавать произвольный набор атрибутов компонентам.
Параметры и свойства компонентов Blazor
Как мы уже определили, компоненты Blazor — это самодостаточные элементы, которые могут содержать в себе в том числе и определенные свойства (параметры), отвечающие, например, за то, как будет отрисовываться компонент в окне браузера. Сегодня рассмотрим то, как можно передавать различные параметры компонентам Blazor.