Повторное использование компонентов Razor в ASP.NET Core Blazor Hybrid

В этой статье объясняется, как создавать и упорядочивать компоненты Razor для веб-приложений и Web Views в приложениях Blazor Hybrid.

Компоненты Razor работают в разных моделях размещения (Blazor WebAssembly, Blazor Server и Web View для Blazor Hybrid) и на разных платформах (Android, iOS и Windows). Модели размещения и платформы имеют уникальные возможности, которые доступны для использования в компонентах, но выполняемые на разных платформах и в разных моделях размещения компоненты должны использовать такие уникальные возможности индивидуально в каждой среде, как показано в следующих примерах.

• Blazor WebAssembly поддерживает синхронное взаимодействие JavaScript (JS), которое не поддерживается строго асинхронным каналом взаимодействия JS в Blazor Server и Web Views для приложений Blazor Hybrid.
• Компоненты в приложении Blazor Server могут обращаться к службам, доступным только на сервере, например к контексту базы данных Entity Framework.
• Компоненты в системе BlazorWebView могут напрямую обращаться к собственным функциям рабочего стола и мобильных устройств, таким как службы геолокации. Приложения Blazor Server и Blazor WebAssembly для предоставления аналогичных функций вынуждены полагаться на интерфейсы веб-API приложений на внешних серверах.

Принципы дизайна

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

• Поместите общий код пользовательского интерфейса в библиотеки классов Razor (RCL), которые выполняют роль контейнеров для многократного использования элементов пользовательского интерфейса в разных моделях размещения и на разных платформах.
• Реализации уникальных функций не должны находиться в RCL. Вместо этого RCL должна определять абстракции (интерфейсы и базовые классы), реализация которых поддерживается моделями и платформами.
• Подтверждайте использование уникальных функций только для конкретных моделей размещения или платформ. Например, Blazor WebAssembly для оптимизации поддерживает использование IJSInProcessRuntime и IJSInProcessObjectReference в компоненте, но только с условными приведениями и резервными реализациями, зависящими от универсальных абстракций IJSRuntime и IJSObjectReference, которые поддерживаются всеми моделями размещения и платформами. Дополнительные сведения о IJSInProcessRuntime см. в статье Вызов функций JavaScript из методов .NET в ASP.NET Core Blazor. Дополнительные сведения о IJSInProcessObjectReference см. в статье Вызов методов .NET из функций JavaScript в ASP.NET Core Blazor.
• Обычно в компонентах следует использовать CSS для стилей HTML. Чаще всего это нужно для единообразия внешнего вида и поведения приложения. В тех местах, где стили пользовательского интерфейса должны быть разными для разных моделей размещения или платформ, создайте стили CSS для таких различий.
• Если для какой-либо части пользовательского интерфейса требуется дополнительное или другое содержимое для некоторой модели размещения или платформы, такое содержимое можно инкапсулировать в компоненте и отображать в RCL с помощью DynamicComponent. Также можно предоставить компонентам дополнительный пользовательский интерфейс через экземпляры RenderFragment. Дополнительные сведения о RenderFragment см. в разделах Фрагменты отрисовки дочернего содержимого и Фрагменты отрисовки для повторно используемой логики отрисовки.

Организация кода проекта

Старайтесь разместить как можно больше кода и статического содержимого в библиотеках классов Razor (RCL). Каждая модель размещения и каждая платформа ссылается на RCL и регистрирует конкретные реализации в коллекции служб приложения, которую может потребовать компонент Razor.

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

Использование абстракций для уникальных функций

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

• В библиотеке классов Razor (RCL), которую приложение использует для получения данных геолокации, чтобы отобразить положение пользователя на карте, компонент MapComponentRazor внедряет абстракцию службы ILocationService.
• App.Web для проектов Blazor WebAssembly и Blazor Server реализует ILocationService как WebLocationService, где используются вызовы веб-API для получения данных геолокации.
• App.Desktop для .NET MAUI, WPF и Windows Forms реализует ILocationService как DesktopLocationService. DesktopLocationService использует функции устройства для конкретной платформы, чтобы получить данные геолокации.

.NET MAUIКод Blazor для конкретных платформ

Обычно в .NET MAUI создаются отдельные реализации для разных платформ, например путем определения разделяемых классов с реализациями для конкретной платформы. Например, в следующей схеме разделяемые классы для CameraService реализуются в CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.cs и CameraService.cs:

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

• Поместите компонент в библиотеку классов Razor (RCL).
• В библиотеке классов .NET MAUI укажите ссылку на RCL и создайте реализации для конкретной платформы.
• В приложении-потребителе укажите ссылки на библиотеку классов .NET MAUI.

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

• Приложение .NET MAUIBlazor Hybrid использует InputPhoto из той RCL, на которую оно ссылается.
• Приложение .NET MAUI также ссылается на библиотеку классов .NET MAUI.
• InputPhoto в RCL внедряет интерфейс ICameraService, который определяется в RCL.
• Реализации разделяемого класса CameraService для ICameraService находятся в библиотеке классов .NET MAUI (CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.cs) которая ссылается на RCL.

Пример см. в статье "Создание .NET MAUIBlazor Hybrid приложения с помощью Blazor Web Appприложения".