Vários aplicativos ASP.NET Core Blazor WebAssembly hospedados

Este artigo explica como configurar um aplicativo hospedado Blazor WebAssembly para hospedar vários Blazor WebAssembly aplicativos.

Configuração

Selecione a versão deste artigo que corresponda aos seus requisitos de hospedagem, seja hospedagem de porta/domínio (por exemplo, :5001/:5002 ou firstapp.comsecondapp.com/) ou hospedagem de subcaminho de rota (por exemplo, /FirstApp e )./SecondApp

Com a seleção de hospedagem atual, este artigo aborda a hospedagem de porta/domínio (por exemplo, :5001/:5002 ou firstapp.com/secondapp.com).

Nos seguintes exemplos:

• O nome do projeto do aplicativo hospedado Blazor WebAssembly é MultipleBlazorApps em uma pasta chamada MultipleBlazorApps.
• Os três projetos na solução antes de um segundo aplicativo cliente ser adicionado estão MultipleBlazorApps.Client na Client pasta, MultipleBlazorApps.Server na Server pasta e MultipleBlazorApps.Shared na Shared pasta.
• O (primeiro) aplicativo cliente inicial é o projeto cliente padrão da solução criada a partir do Blazor WebAssembly modelo de projeto.
• Um segundo aplicativo cliente é adicionado à solução, MultipleBlazorApps.SecondClient em uma pasta chamada SecondClient.
• Opcionalmente, o projeto de servidor (MultipleBlazorApps.Server) pode servir páginas ou exibições como um Razor aplicativo Pages ou MVC.
• O primeiro aplicativo cliente pode ser acessado em um navegador na porta 5001 ou com um host de firstapp.com. A segunda aplicação cliente pode ser acedida num navegador na porta 5002 ou com um host de secondapp.com.

Com a seleção atual, este artigo cobre a hospedagem de subcaminhos de rotas (por exemplo, /FirstApp e /SecondApp).

Nos seguintes exemplos:

• O nome do projeto da aplicação hospedada Blazor WebAssembly é MultipleBlazorApps numa pasta chamada MultipleBlazorApps.
• Os três projetos na solução antes de um segundo aplicativo cliente ser adicionado estão MultipleBlazorApps.Client na Client pasta, MultipleBlazorApps.Server na Server pasta e MultipleBlazorApps.Shared na Shared pasta.
• O (primeiro) aplicativo cliente inicial é o projeto cliente padrão da solução criada a partir do Blazor WebAssembly modelo de projeto.
• Um segundo aplicativo cliente é adicionado à solução, MultipleBlazorApps.SecondClient em uma pasta chamada SecondClient.
• Opcionalmente, o projeto de servidor (MultipleBlazorApps.Server) pode servir páginas ou vistas como uma aplicação formal de Páginas ou MVC (Razor).
• Ambos os aplicativos cliente usam a porta padrão definida pelo MultipleBlazorApps.Server arquivo do Properties/launchSettings.json projeto em seu applicationUrl valor. A primeira aplicação cliente é acessível num navegador no caminho /FirstApp. A segunda aplicação cliente é acessível num navegador no /SecondApp subdiretório.

Os exemplos mostrados neste artigo requerem configuração adicional para:

• Acedendo as aplicações diretamente nos domínios de exemplo firstapp.com e secondapp.com.
• Certificados para os aplicativos cliente para habilitar a segurança TLS/HTTPS.
• Configurando o aplicativo de servidor como um Razor aplicativo de Páginas para os seguintes recursos:
  • Integração dos componentes de Razor em páginas ou visualizações.
  • Renderização antecipada de Razor componentes.

As configurações anteriores estão além do escopo deste artigo. Para obter mais informações, consulte os seguintes recursos:

• Hospedar e publicar ASP.NET Core
• Aplicar HTTPS no ASP.NET Core
• Integre ASP.NET componentes principais Razor com MVC ou Razor Pages em soluções hospedadas Blazor WebAssembly

Use uma solução hospedada Blazor WebAssembly existente ou crie uma nova solução hospedada Blazor WebAssembly a Blazor WebAssembly partir do modelo de projeto, passando a -ho|--hosted opção se estiver a usar a CLI do .NET ou marcando a caixa de seleção ASP.NET Core Hosted no Visual Studio quando o projeto é criado na IDE.

Use uma pasta para a solução chamada MultipleBlazorApps e nomeie o projeto MultipleBlazorApps.

Crie uma nova pasta na solução chamada SecondClient. Na nova pasta, adicione um segundo Blazor WebAssembly aplicativo cliente chamado MultipleBlazorApps.SecondClient. Adicione o projeto como um aplicativo autônomo Blazor WebAssembly . Para criar um aplicativo autônomo Blazor WebAssembly , não passe a -ho|--hosted opção se estiver usando a CLI do .NET ou não use a caixa de seleção ASP.NET Core Hosted se estiver usando o Visual Studio.

Faça as seguintes alterações no MultipleBlazorApps.SecondClient projeto:

• Copie o FetchData componente (Pages/FetchData.razor) da Client/Pages pasta para a SecondClient/Pages pasta. Esta etapa é necessária porque um aplicativo autônomo Blazor WebAssembly não chama o controlador de um Server projeto para dados meteorológicos, ele usa um arquivo de dados estático. Ao copiar o FetchData componente para o projeto adicionado, o segundo aplicativo cliente também faz uma chamada de API da Web para a API do servidor para dados meteorológicos.
• Exclua a SecondClient/wwwroot/sample-data pasta, pois o weather.json arquivo na pasta não é usado.

A tabela a seguir descreve as pastas e os nomes de projeto da solução depois de adicionar a pasta SecondClient e o projeto MultipleBlazorApps.SecondClient.

Pasta física	Nome do projeto	Descrição
Client	MultipleBlazorApps.Client	Blazor WebAssembly aplicativo cliente
SecondClient	MultipleBlazorApps.SecondClient	Blazor WebAssembly aplicativo cliente
Server	MultipleBlazorApps.Server	Aplicativo de servidor ASP.NET Core
Shared	MultipleBlazorApps.Shared	Projeto de recursos compartilhados

O MultipleBlazorApps.Server projeto serve os dois Blazor WebAssembly aplicativos cliente e fornece dados meteorológicos para os componentes dos FetchData aplicativos cliente por meio de um controlador MVC. Opcionalmente, o MultipleBlazorApps.Server projeto também pode servir páginas ou visualizações, como um aplicativo Pages ou MVC tradicional Razor . As etapas para habilitar a veiculação de páginas ou exibições são abordadas mais adiante neste artigo.

Observação

A demonstração neste artigo usa caminhos de ativos web estáticos de FirstApp para o projeto MultipleBlazorApps.Client e SecondApp para o projeto MultipleBlazorApps.SecondClient. Os nomes "FirstApp" e "SecondApp" são meramente para fins de demonstração. Outros nomes são aceitáveis para distinguir os aplicativos cliente, como App1App2/,/Client1Client2 , 1/2ou qualquer esquema de nomenclatura semelhante.

Ao rotear solicitações para os aplicativos cliente por uma porta ou um domínio, "FirstApp" e "SecondApp" são usados internamente para rotear solicitações e fornecer respostas para ativos estáticos e não são vistos na barra de endereço do navegador.

Observação

A demonstração neste artigo usa nomes de caminho estáticos de ativos da Web de FirstApp para o projeto MultipleBlazorApps.Client e de SecondApp para o projeto MultipleBlazorApps.SecondClient. Os nomes "FirstApp" e "SecondApp" são meramente para fins de demonstração. Outros nomes são aceitáveis para distinguir os aplicativos cliente, como App1App2/,/Client1Client2 , 1/2ou qualquer esquema de nomenclatura semelhante.

"FirstApp" e "SecondApp" também aparecem na barra de endereço do navegador porque as solicitações são roteadas para os dois aplicativos cliente usando esses nomes. Há suporte para outros segmentos de rota de URL válidos, e os segmentos de rota não precisam corresponder estritamente aos nomes usados para rotear ativos da Web estáticos internamente. Usar "FirstApp" e "SecondApp" para o roteamento de ativos estáticos internos e o roteamento de solicitação de aplicativo é meramente conveniente nos exemplos deste artigo.

No primeiro arquivo de projeto do aplicativo cliente (MultipleBlazorApps.Client.csproj), adicione uma <StaticWebAssetBasePath> propriedade a <PropertyGroup> com um valor de FirstApp para definir o caminho base para os ativos estáticos do projeto:

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

No arquivo de projeto do MultipleBlazorApps.SecondClient aplicativo (MultipleBlazorApps.SecondClient.csproj):

• Adicionar uma <StaticWebAssetBasePath> propriedade a um <PropertyGroup> com um valor de SecondApp:

  <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
  

• Adicione uma referência ao projeto MultipleBlazorApps.Shared em um <ItemGroup>.

  <ItemGroup>
    <ProjectReference Include="..\Shared\MultipleBlazorApps.Shared.csproj" />
  </ItemGroup>
  

No arquivo de projeto do aplicativo servidor (Server/MultipleBlazorApps.Server.csproj), crie uma referência de projeto para o aplicativo cliente adicionado MultipleBlazorApps.SecondClient em um <ItemGroup>:

<ProjectReference Include="..\SecondClient\MultipleBlazorApps.SecondClient.csproj" />

No arquivo de configuração da aplicação Properties/launchSettings.json do servidor, configure o applicationUrl do perfil Kestrel (MultipleBlazorApps.Server) para aceder aos aplicativos cliente nas portas 5001 e 5002. Se configurar o seu ambiente local para usar os domínios de exemplo, as URLs para applicationUrl poderão usar firstapp.com e secondapp.com, mas não usar as portas.

Observação

O uso de portas nesta demonstração permite o acesso aos projetos cliente em um navegador local sem a necessidade de configurar um ambiente de hospedagem local para que os navegadores da Web possam acessar os aplicativos cliente através das configurações de host, firstapp.com e secondapp.com. Em cenários de produção, uma configuração típica é usar subdomínios para distinguir os aplicativos cliente.

Por exemplo:

• As portas são descartadas da configuração desta demonstração.
• Os hosts são alterados para usar subdomínios, como www.contoso.com para visitantes do site e admin.contoso.com para administradores.
• Hosts adicionais podem ser incluídos para aplicações cliente adicionais, sendo necessário pelo menos mais um host se a aplicação de servidor também for uma aplicação Pages ou MVC que serve páginas ou visualizações.

Se você planeja servir páginas ou exibições do aplicativo de servidor, use a seguinte applicationUrl configuração no Properties/launchSettings.json arquivo, que permite o seguinte acesso:

• Opcionalmente, a aplicação Razor Pages ou MVC (MultipleBlazorApps.Server projeto) responde a solicitações na porta 5000.
• As respostas às solicitações para o primeiro cliente (MultipleBlazorApps.Client projeto) encontram-se no porto 5001.
• As respostas às solicitações do segundo cliente (MultipleBlazorApps.SecondClient projeto) estão na porta 5002.

"applicationUrl": "https://localhost:5000;https://localhost:5001;https://localhost:5002",

Se você não planeja que o aplicativo de servidor sirva páginas ou exibições e sirva apenas os Blazor WebAssembly aplicativos cliente, use a seguinte configuração, que permite o seguinte acesso:

• O primeiro aplicativo cliente responde na porta 5001.
• O segundo aplicativo cliente responde na porta 5002.

"applicationUrl": "https://localhost:5001;https://localhost:5002",

No arquivo do Program.cs aplicativo de servidor, remova o seguinte código, que aparece após a chamada para UseHttpsRedirection:

• Se você planeja servir páginas ou exibições do aplicativo de servidor, exclua as seguintes linhas de código:

  - app.UseBlazorFrameworkFiles();
  

  - app.MapFallbackToFile("index.html");
  

• Se você planeja que o aplicativo de servidor sirva apenas os Blazor WebAssembly aplicativos cliente, exclua o seguinte código:

  - app.UseBlazorFrameworkFiles();
  
  ...
  
  - app.UseRouting();
  
  - app.MapRazorPages();
  - app.MapControllers();
  - app.MapFallbackToFile("index.html");
  

  Mantenha o middleware de ficheiros estáticos no local:

  app.UseStaticFiles();
  

• Adicione middleware que mapeie solicitações para os aplicativos cliente. O exemplo a seguir configura o middleware para ser executado quando a porta de solicitação é 5001 para o primeiro aplicativo cliente ou 5002 para o segundo aplicativo cliente, ou o host da solicitação é firstapp.com para o primeiro aplicativo cliente ou secondapp.com para o segundo aplicativo cliente.

  Observação

  O uso dos hosts (firstapp.com/secondapp.com) em um sistema local com um navegador local requer uma configuração adicional que está além do escopo deste artigo. Para testes locais desse cenário, recomendamos o uso de portas. Os aplicativos de produção típicos são configurados para usar subdomínios, como www.contoso.com para visitantes do site e admin.contoso.com administradores. Com a configuração adequada de DNS e servidor, que está além do escopo deste artigo e depende das tecnologias usadas, o aplicativo responde a solicitações em qualquer host nomeado no código a seguir.

  Onde você removeu a app.UseBlazorFrameworkFiles(); linha do Program.cs, coloque o seguinte código:

  app.MapWhen(ctx => ctx.Request.Host.Port == 5001 || 
      ctx.Request.Host.Equals("firstapp.com"), first =>
  {
      first.Use((ctx, nxt) =>
      {
          ctx.Request.Path = "/FirstApp" + ctx.Request.Path;
          return nxt();
      });
  
      first.UseBlazorFrameworkFiles("/FirstApp");
      first.UseStaticFiles();
      first.UseStaticFiles("/FirstApp");
      first.UseRouting();
  
      first.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}", 
              "FirstApp/index.html");
      });
  });
  
  app.MapWhen(ctx => ctx.Request.Host.Port == 5002 || 
      ctx.Request.Host.Equals("secondapp.com"), second =>
  {
      second.Use((ctx, nxt) =>
      {
          ctx.Request.Path = "/SecondApp" + ctx.Request.Path;
          return nxt();
      });
  
      second.UseBlazorFrameworkFiles("/SecondApp");
      second.UseStaticFiles();
      second.UseStaticFiles("/SecondApp");
      second.UseRouting();
  
      second.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}", 
              "SecondApp/index.html");
      });
  });
  

  Advertência

  As APIs que dependem do cabeçalho Host, como HttpRequest.Host e RequireHost, estão sujeitas a possíveis falsificações por parte dos clientes.

  Para evitar falsificação de host e porta, use uma das seguintes abordagens:

  • Use HttpContext.Connection (ConnectionInfo.LocalPort) onde as portas são verificadas.
  • Utilize a filtragem de host.

• Adicione middleware que mapeie solicitações para os aplicativos cliente. O exemplo a seguir configura o middleware para ser executado quando o subcaminho da solicitação é /FirstApp para o primeiro aplicativo cliente ou /SecondApp para o segundo aplicativo cliente.

  Onde você removeu a app.UseBlazorFrameworkFiles(); linha do Program.cs, coloque o seguinte código:

  app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/FirstApp", 
      StringComparison.OrdinalIgnoreCase), first =>
  {
      first.UseBlazorFrameworkFiles("/FirstApp");
      first.UseStaticFiles();
      first.UseStaticFiles("/FirstApp");
      first.UseRouting();
  
      first.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}",
              "FirstApp/index.html");
      });
  });
  
  app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/SecondApp", 
      StringComparison.OrdinalIgnoreCase), second =>
  {
      second.UseBlazorFrameworkFiles("/SecondApp");
      second.UseStaticFiles();
      second.UseStaticFiles("/SecondApp");
      second.UseRouting();
  
      second.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}",
              "SecondApp/index.html");
      });
  });
  

• Defina o caminho base em cada aplicativo cliente:

  No primeiro arquivo do index.html aplicativo cliente (Client/wwwroot/index.html), atualize o valor da <base> tag para refletir o subcaminho. A barra final é necessária:

  <base href="/FirstApp/" />
  

  No arquivo do index.html segundo aplicativo cliente (SecondClient/wwwroot/index.html), atualize o valor da <base> tag para refletir o subcaminho. A barra final é necessária:

  <base href="/SecondApp/" />
  

Para obter mais informações sobre UseStaticFiles, consulte arquivos estáticos do ASP.NET CoreBlazor.

Para obter mais informações sobre UseBlazorFrameworkFiles e MapFallbackToFile, consulte os seguintes recursos:

• Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.UseBlazorFrameworkFiles (fonte de referência)
• Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile (fonte de referência)

Observação

Os links de documentação para a fonte de referência do .NET geralmente carregam a ramificação padrão do repositório, que representa o desenvolvimento atual para a próxima versão do .NET. Para selecionar uma tag para uma versão específica, use a lista suspensa Alternar entre ramificações ou tags. Para obter mais informações, consulte Como selecionar uma marca de versão do código-fonte do ASP.NET Core (dotnet/AspNetCore.Docs #26205).

As solicitações dos aplicativos cliente para /WeatherForecast na API do servidor são para /FirstApp/WeatherForecast ou /SecondApp/WeatherForecast dependem de qual aplicativo cliente faz a solicitação. Portanto, as rotas do controlador que retornam dados meteorológicos da API do servidor necessitam de uma modificação para incluir os segmentos de rota.

No controlador de previsão do tempo do aplicativo do servidor (Controllers/WeatherForecastController.cs), substitua a rota existente ([Route("[controller]")]) para WeatherForecastController pelas seguintes rotas, que levam em conta os caminhos de solicitação do cliente:

[Route("FirstApp/[controller]")]
[Route("SecondApp/[controller]")]

Se você planeja servir páginas do aplicativo de servidor, adicione uma IndexRazor página à Pages pasta do aplicativo de servidor:

Pages/Index.cshtml:

@page
@model MultipleBlazorApps.Server.Pages.IndexModel
@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from Razor Pages!</p>
            </div>
        </div>
    </div>
</body>
</html>

Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages;

public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
}

Observação

A página anterior Index é um exemplo mínimo apenas para fins de demonstração. Se a aplicação exigir ativos adicionais do projeto Pages, como layout, estilos, scripts e importações, obtenha-os de uma aplicação criada a partir do modelo de projeto Pages. Para obter mais informações, consulte Introdução a Razor Páginas no ASP.NET Core.

Se você planeja servir exibições MVC a partir do aplicativo do servidor, adicione uma Index exibição e um Home controlador:

Views/Home/Index.cshtml:

@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from MVC!</p>
            </div>
        </div>
    </div>
</body>
</html>

Controllers/HomeController.cs:

using Microsoft.AspNetCore.Mvc;

namespace MultipleBlazorApps.Server.Controllers;

public class HomeController : Controller
{
    public IActionResult Index() => View();
}

Observação

A visão anterior Index é um exemplo mínimo puramente para fins de demonstração. Se o aplicativo exigir ativos MVC adicionais, como layout, estilos, scripts e importações, obtenha-os de um aplicativo criado a partir do modelo de projeto MVC. Para obter mais informações, consulte Introdução ao ASP.NET MVC principal.

Para obter mais informações sobre como usar os componentes Razor de qualquer um dos aplicativos cliente em páginas ou visualizações do aplicativo de servidor, consulte Integrar os componentes do Razor do ASP.NET Core com MVC ou Razor Pages em soluções hospedadasBlazor WebAssembly.

Executar o aplicativo

Inicie o MultipleBlazorApps.Server projeto:

• Acesse o aplicativo cliente inicial em https://localhost:5001.
• Acesse o aplicativo cliente adicionado em https://localhost:5002.
• Se o aplicativo de servidor estiver configurado para servir páginas ou exibições, acesse a página ou exibição Index em https://localhost:5000.

• Acesse o aplicativo cliente inicial em https://localhost:{DEFAULT PORT}/FirstApp.
• Acesse o aplicativo cliente adicionado em https://localhost:{DEFAULT PORT}/SecondApp.
• Se o aplicativo de servidor estiver configurado para servir páginas ou exibições, acesse a página ou exibição Index em https://localhost:{DEFAULT PORT}.

Nas URLs de exemplo anteriores, o espaço reservado {DEFAULT PORT} é a porta padrão definida pelo ficheiro Properties/launchSettings.json do projeto MultipleBlazorApps.Server no seu valor applicationUrl.

Importante

Ao executar a aplicação com o comando dotnet watch (ou dotnet run) (.NET CLI), confirme se o shell de comando está aberto na pasta Server da solução.

Ao usar o botão Iniciar do Visual Studio para executar o aplicativo, confirme se o projeto MultipleBlazorApps.Server está definido como o projeto de inicialização, realçado no Gerenciador de Soluções.

Ativos estáticos

Quando um ativo estiver na pasta wwwroot de um aplicativo cliente, forneça o caminho de solicitação de ativo estático em componentes:

<img alt="..." src="{PATH AND FILE NAME}" />

O marcador de posição {PATH AND FILE NAME} é o caminho e o nome do ficheiro em wwwroot.

Por exemplo, a fonte de uma imagem de um Jeep (jeep-yj.png) na pasta vehicle de wwwroot:

<img alt="Jeep Wrangler YJ" src="vehicle/jeep-yj.png" />

Razor suporte para biblioteca de classes (RCL)

Adicione a biblioteca de classes (RCL) Razor à solução como um novo projeto:

• Clique com o botão direito do mouse na solução no Gerenciador de Soluções e selecione Adicionar>Novo Projeto.
• Utilize o modelo de projeto Razor Biblioteca de Classes para criar o projeto. Os exemplos nesta seção usam o nome do projeto ComponentLibrary, que também é o nome do assembly da RCL. Não selecione a caixa de verificação Páginas e vistas de suporte.

Para cada aplicativo cliente hospedado Blazor WebAssembly , crie uma referência de projeto para o projeto RCL clicando com o botão direito do mouse em cada projeto cliente no Gerenciador de Soluções e selecionando Adicionar>Referência de Projeto.

Use componentes do RCL nos aplicativos cliente com uma das seguintes abordagens:

• Coloque uma @using diretiva na parte superior do componente para o namespace RCL e adicione a sintaxe Razor para o componente. O exemplo a seguir é para um RCL com o nome do assembly ComponentLibrary:

  @using ComponentLibrary
  
  ...
  
  <Component1 />
  

• Forneça o namespace da RCL juntamente com a Razor sintaxe do componente. Essa abordagem não requer uma @using diretiva na parte superior do arquivo do componente. O exemplo a seguir é para um RCL com o nome do assembly ComponentLibrary:

  <ComponentLibrary.Component1 />
  

Observação

Uma diretiva @using também pode ser colocada em cada ficheiro _Import.razor de aplicação cliente, o que torna o namespace da RCL globalmente disponível aos componentes nesse projeto.

Quando qualquer outro recurso estático estiver na pasta wwwroot de um RCL, faça referência ao recurso estático em uma aplicação cliente de acordo com as orientações fornecidas em Interface do Utilizador Reutilizável Razor em bibliotecas de classe com ASP.NET Core:

<img alt="..." src="_content/{PACKAGE ID}/{PATH AND FILE NAME}" />

O {PACKAGE ID} placeholder é o ID do pacote da RCL. O ID do pacote assume como padrão o nome do assembly do projeto se <PackageId> não for especificado no arquivo do projeto. O espaço reservado {PATH AND FILE NAME} é o caminho e o nome do ficheiro em wwwroot.

O exemplo a seguir mostra a marcação de uma imagem Jeep (jeep-yj.png) na vehicle pasta da pasta RCL wwwroot . O exemplo a seguir é para um RCL com o nome do conjunto ComponentLibrary:

<img alt="Jeep Wrangler YJ" src="_content/ComponentLibrary/vehicle/jeep-yj.png" />

Recursos adicionais

• Consumir componentes do ASP.NET Core Razor a partir de uma biblioteca de classes (RCL) Razor
• Interface do usuário Razor reutilizável em bibliotecas de classe com ASP.NET Core
• ASP.NET Core Blazor isolamento CSS