Compartilhar via


Reutilização de componentes Razor no ASP.NET Core Blazor Hybrid

Observação

Esta não é a versão mais recente deste artigo. Para informações sobre a versão vigente, confira a Versão do .NET 8 deste artigo.

Aviso

Esta versão do ASP.NET Core não tem mais suporte. Para obter mais informações, confira .NET e a Política de Suporte do .NET Core. Para informações sobre a versão vigente, confira a Versão do .NET 8 deste artigo.

Importante

Essas informações relacionam-se ao produto de pré-lançamento, que poderá ser substancialmente modificado antes do lançamento comercial. A Microsoft não oferece nenhuma garantia, explícita ou implícita, quanto às informações fornecidas aqui.

Para informações sobre a versão vigente, confira a Versão do .NET 8 deste artigo.

Este artigo explica como criar e organizar componentes Razor para a Web e Web Views nos aplicativos Blazor Hybrid.

RazorOs componentes funcionam entre modelos de hospedagem (Blazor WebAssembly, Blazor Server e no Web ViewdeBlazor Hybrid) e entre plataformas (Android, iOS e Windows). As plataformas e modelos de hospedagem têm funcionalidades exclusivas que os componentes podem aproveitar, mas os componentes executados entre plataformas e modelos de hospedagem devem aproveitar recursos exclusivos separadamente, o que mostram os exemplos a seguir:

  • Blazor WebAssembly dá suporte à interoperabilidade síncrona do JavaScript (JS), que não é compatível com o canal de comunicação de interoperabilidade estritamente assíncrono JS em Blazor Server e Web Views de aplicativos Blazor Hybrid.
  • Os componentes em um aplicativo Blazor Server podem acessar serviços que somente estão disponíveis no servidor, como um contexto de banco de dados do Entity Framework.
  • Os componentes em BlazorWebView podem acessar diretamente recursos nativos da área de trabalho e dispositivo móvel, como serviços de geolocalização. Os aplicativos Blazor Server e Blazor WebAssembly devem contar com interfaces de API Web de aplicativos em servidores externos para fornecer recursos semelhantes.

Princípios de design

Para criar componentes Razor que podem funcionar perfeitamente entre modelos e plataformas de hospedagem, siga os seguintes princípios de design:

Organização do código do projeto

Coloque o código e o conteúdo estático o máximo possível em bibliotecas de classes Razor (RCLs). Cada modelo de hospedagem ou plataforma faz referência à RCL e registra implementações individuais na coleção de serviços do aplicativo que pode exigir um componente Razor.

Cada assembly de destino deve conter apenas o código específico desse modelo ou plataforma de hospedagem, juntamente com o código que ajuda a inicializar o aplicativo.

O Blazor WebAssembly, o Blazor Server e o WebView têm uma referência de projeto própria para a biblioteca de classes do Razor (RCL).

Uso de abstrações para recursos exclusivos

O exemplo a seguir demonstra como usar uma abstração para um serviço de geolocalização que hospeda o modelo e a plataforma.

  • Em uma Razor biblioteca de classes (RCL) usada pelo aplicativo para obter dados de geolocalização para a localização do usuário em um mapa, o MapComponentRazorcomponente insere uma ILocationServiceabstração de serviço.
  • App.Web para projetos Blazor WebAssembly e Blazor Server implementam ILocationService como WebLocationService, que usa chamadas à API Web para obter dados de geolocalização.
  • App.Desktop para .NET MAUI, WPF e Windows Forms, implementam ILocationService como DesktopLocationService. DesktopLocationService usa recursos de dispositivos específicos da plataforma para obter dados de geolocalização.

Em uma biblioteca de classes do Razor (RCL), o MapComponent injeta um serviço ILocationService. Separadamente, o App.Web (projetos do Blazor WebAssembly e do Blazor Server) implementa o ILocationService como um WebLocationService. Separadamente, o App.Desktop (.NET MAUI, WPF, Windows Forms) implementa o ILocationService como um DesktopLocationService.

Código específico da plataforma .NET MAUIBlazor

Um padrão comum em .NET MAUI é criar implementações separadas para diferentes plataformas, como definir classes parciais com implementações específicas da plataforma. Por exemplo, consulte o diagrama a seguir, em que as classes parciais para CameraService são implementadas em cada um dos CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.cs e CameraService.cs:

Classes parciais para o CameraService são implementadas no CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.cs e CameraService.cs.

Quando você deseja empacotar recursos específicos da plataforma em uma biblioteca de classes que pode ser consumida por outros aplicativos, recomendamos que você siga uma abordagem semelhante à descrita no exemplo anterior e crie uma abstração para o componente Razor:

  • Coloque o componente em uma biblioteca de classes (RCL) Razor.
  • Em uma biblioteca de classes .NET MAUI, faça referência à RCL e crie as implementações específicas da plataforma.
  • No aplicativo de consumo, faça referência à biblioteca de classes .NET MAUI.

O exemplo a seguir demonstra os conceitos de imagens em um aplicativo que organiza fotografias:

  • Um .NET MAUI aplicativo Blazor Hybrid usa InputPhoto de uma RCL que faz referência.
  • O aplicativo .NET MAUI também faz referência a uma biblioteca de classes .NET MAUI.
  • InputPhoto na RCL insere uma interface ICameraService, que é definida na RCL.
  • Implementações de classe parciais CameraService para ICameraService estão na biblioteca de classes .NET MAUI (CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.cs), que faz referência à RCL.

Um aplicativo .NET MAUI do Blazor Hybrid usa o InputPhoto de uma biblioteca de classes do Razor (RCL) ao qual faz referência. O aplicativo .NET MAUI também faz referência a uma biblioteca de classes .NET MAUI. O InputPhoto na RCL injeta uma interface de ICameraService definida na RCL. As implementações de classe parcial do CameraService para ICameraService estão na biblioteca de classes do .NET MAUI (CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.cs), que faz referência à RCL.