Více hostovaných aplikací ASP.NET Core Blazor WebAssembly

Tento článek vysvětluje, jak nakonfigurovat hostované Blazor WebAssembly aplikace pro hostování více Blazor WebAssembly aplikací.

Konfigurace

Vyberte verzi tohoto článku, která odpovídá vašim požadavkům na hostování, buď hostování portů nebo domén (například:5001/:5002) nebo firstapp.com/secondapp.comsměrování hostování dílčích cest (například /FirstApp a)./SecondApp

S aktuálním výběrem hostingu se tento článek věnuje hostování portů a domén (například :5001/:5002firstapp.com/secondapp.com).

V následujících příkladech:

• Název projektu hostované Blazor WebAssembly aplikace je MultipleBlazorApps ve složce s názvem MultipleBlazorApps.
• Tři projekty v řešení před přidání druhé klientské aplikace jsou MultipleBlazorApps.Client ve Client složce, MultipleBlazorApps.Server ve Server složce a MultipleBlazorApps.Shared ve Shared složce.
• Počáteční (první) klientská aplikace je výchozím projektem klienta řešení vytvořeného Blazor WebAssembly ze šablony projektu.
• Do řešení MultipleBlazorApps.SecondClient se přidá druhá klientská aplikace ve složce s názvem SecondClient.
• Volitelně může serverový projekt (MultipleBlazorApps.Server) obsluhovat stránky nebo zobrazení jako Razor aplikaci Pages nebo MVC.
• První klientská aplikace je přístupná v prohlížeči na portu 5001 nebo v hostiteli firstapp.com. Druhá klientská aplikace je přístupná v prohlížeči na portu 5002 nebo v hostiteli secondapp.com.

S aktuálním výběrem se tento článek věnuje hostování dílčích cest tras (například /FirstApp a /SecondApp).

V následujících příkladech:

• Název projektu hostované Blazor WebAssembly aplikace je MultipleBlazorApps ve složce s názvem MultipleBlazorApps.
• Tři projekty v řešení před přidání druhé klientské aplikace jsou MultipleBlazorApps.Client ve Client složce, MultipleBlazorApps.Server ve Server složce a MultipleBlazorApps.Shared ve Shared složce.
• Počáteční (první) klientská aplikace je výchozím projektem klienta řešení vytvořeného Blazor WebAssembly ze šablony projektu.
• Do řešení MultipleBlazorApps.SecondClient se přidá druhá klientská aplikace ve složce s názvem SecondClient.
• Volitelně může serverový projekt (MultipleBlazorApps.Server) obsluhovat stránky nebo zobrazení jako formální Razor aplikace Pages nebo MVC.
• Obě klientské aplikace používají výchozí port definovaný souborem MultipleBlazorApps.Server projektu Properties/launchSettings.json v jeho applicationUrl hodnotě. První klientská aplikace je přístupná v prohlížeči v dílčí cestě /FirstApp . Druhá klientská aplikace je přístupná v prohlížeči v dílčí cestě /SecondApp .

Příklady uvedené v tomto článku vyžadují další konfiguraci pro:

• Přístup k aplikacím přímo v ukázkových doménách hostitelů firstapp.com a secondapp.com.
• Certifikáty pro klientské aplikace pro povolení zabezpečení TLS/HTTPS
• Konfigurace serverové aplikace jako Razor aplikace Pages pro následující funkce:
  • Razor Integrace komponent do stránek nebo zobrazení
  • Přerenderování Razor komponenty.

Předchozí konfigurace jsou nad rámec tohoto článku. Další informace najdete v následujících zdrojích informací:

• Hostování a nasazení ASP.NET Core
• Vynucení HTTPS v ASP.NET Core
• Integrace základních komponent ASP.NET Razor s MVC nebo Razor stránkami v hostovaných Blazor WebAssembly řešeních

Použijte existující hostované řešení nebo vytvořte nové hostované Blazor WebAssembly řešení ze Blazor WebAssembly šablony projektu předánímBlazor WebAssembly možnosti, pokud používáte .NET CLI nebo při vytváření projektu v integrovaném vývojovém prostředí (IDE) zaškrtněte políčko -ho|--hosted v sadě Visual Studio.

Použijte složku pro řešení s názvem MultipleBlazorApps a pojmenujte projekt MultipleBlazorApps.

Vytvořte novou složku v řešení s názvem SecondClient. Do nové složky přidejte druhou Blazor WebAssembly klientskou aplikaci s názvem MultipleBlazorApps.SecondClient. Přidejte projekt jako samostatnou Blazor WebAssembly aplikaci. Pokud chcete vytvořit samostatnou Blazor WebAssembly aplikaci, nepředávejte -ho|--hosted tuto možnost, pokud používáte .NET CLI nebo nepoužíváte zaškrtávací políčko hostované ASP.NET Core , pokud používáte Visual Studio.

Proveďte v projektu následující změny MultipleBlazorApps.SecondClient :

• Zkopírujte komponentu FetchDataPages/FetchData.razor (Client/Pages) ze složky do SecondClient/Pages složky. Tento krok je povinný, protože samostatná Blazor WebAssembly aplikace nevolá Server kontroler projektu pro data o počasí, používá statický datový soubor. Zkopírováním FetchData komponenty do přidaného projektu druhá klientská aplikace také provede volání webového rozhraní API na serverové rozhraní API pro data o počasí.
• SecondClient/wwwroot/sample-data Odstraňte složku, protože weather.json se soubor ve složce nepoužívá.

Následující tabulka popisuje složky a názvy projektů řešení po SecondClient přidání složky a MultipleBlazorApps.SecondClient projektu.

Fyzická složka	Název projektu	Description
Client	MultipleBlazorApps.Client	Blazor WebAssembly klientská aplikace
SecondClient	MultipleBlazorApps.SecondClient	Blazor WebAssembly klientská aplikace
Server	MultipleBlazorApps.Server	serverová aplikace ASP.NET Core
Shared	MultipleBlazorApps.Shared	Projekt sdílených zdrojů

Projekt MultipleBlazorApps.Server obsluhuje dvě Blazor WebAssembly klientské aplikace a poskytuje data o počasí komponentám klientských aplikací FetchData prostřednictvím kontroleru MVC. MultipleBlazorApps.Server Volitelně může projekt také obsluhovat stránky nebo zobrazení jako tradiční Razor aplikace Pages nebo MVC. Postup povolení obsluhy stránek nebo zobrazení najdete dále v tomto článku.

Poznámka:

Ukázka v tomto článku používá názvy statických webových FirstApp prostředků projektu MultipleBlazorApps.Client a SecondAppMultipleBlazorApps.SecondClient projektu. Názvy "FirstApp" a "SecondApp" jsou pouze pro demonstrační účely. Jiné názvy jsou přijatelné k rozlišení klientských aplikací, například App1/App2,Client1/Client2 , 1/2nebo jakéhokoli podobného schématu pojmenování.

Při směrování požadavků na klientské aplikace portem nebo doménouFirstAppSecondApp se interně používají ke směrování požadavků a obsluhování odpovědí na statické prostředky a na adresním řádku prohlížeče se nezobrazují.

Poznámka:

Ukázka v tomto článku používá názvy statických webových FirstApp prostředků projektu MultipleBlazorApps.Client a SecondAppMultipleBlazorApps.SecondClient projektu. Názvy "FirstApp" a "SecondApp" jsou pouze pro demonstrační účely. Jiné názvy jsou přijatelné k rozlišení klientských aplikací, například App1/App2,Client1/Client2 , 1/2nebo jakéhokoli podobného schématu pojmenování.

"FirstApp" a "SecondApp" se také zobrazují na adresní řádku prohlížeče, protože požadavky se směrují do dvou klientských aplikací pomocí těchto názvů. Podporují se další platné segmenty tras URL a segmenty tras nemusí přesně odpovídat názvům používaným k internímu směrování statických webových prostředků. Použití "FirstApp" a "SecondApp" pro interní směrování statických prostředků i směrování požadavků aplikace je pouze pro konvolance v příkladech tohoto článku.

V souboru projektu první klientské aplikace (MultipleBlazorApps.Client.csproj) přidejte <StaticWebAssetBasePath> vlastnost s <PropertyGroup> hodnotou FirstApp nastavení základní cesty pro statické prostředky projektu:

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

MultipleBlazorApps.SecondClient V souboru projektu aplikace (MultipleBlazorApps.SecondClient.csproj):

• <StaticWebAssetBasePath> Přidejte vlastnost k hodnotě <PropertyGroup>SecondApp:

  <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
  

• Přidejte odkaz na MultipleBlazorApps.Shared projekt pro projekt do <ItemGroup>:

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

V souboru projektu serverové aplikace (Server/MultipleBlazorApps.Server.csproj) vytvořte odkaz na projekt pro přidanou MultipleBlazorApps.SecondClient klientskou aplikaci v :<ItemGroup>

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

V souboru serverové aplikace Properties/launchSettings.json nakonfigurujte applicationUrlKestrel profil (MultipleBlazorApps.Server) pro přístup k klientským aplikacím na portech 5001 a 5002. Pokud nakonfigurujete místní prostředí tak, aby používalo ukázkové domény, adresy URL pro applicationUrl použití firstapp.com a secondapp.com nepoužívejte porty.

Poznámka:

Použití portů v této ukázce umožňuje přístup k klientským projektům v místním prohlížeči, aniž by bylo nutné konfigurovat místní hostitelské prostředí, aby webové prohlížeče mohly přistupovat k klientským aplikacím prostřednictvím konfigurací firstapp.com hostitele a secondapp.com. V produkčních scénářích je typickou konfigurací použití subdomén k rozlišení klientských aplikací.

Například:

• Porty se zahodí z konfigurace této ukázky.
• Hostitelé se změní tak, aby používali subdomény, jako www.contoso.com jsou návštěvníci webu a admin.contoso.com správci.
• Další hostitele je možné zahrnout do dalších klientských aplikací a aspoň jeden další hostitel se vyžaduje, pokud je serverovou aplikací také Razor aplikace Pages nebo MVC, která obsluhuje stránky nebo zobrazení.

Pokud plánujete obsluhovat stránky nebo zobrazení ze serverové aplikace, použijte v applicationUrl souboru následující Properties/launchSettings.json nastavení, které umožňuje následující přístup:

• Volitelně aplikace Razor Pages nebo MVC (MultipleBlazorApps.Server projekt) reaguje na požadavky na portu 5000.
• Odpovědi na požadavky prvního klienta (MultipleBlazorApps.Client projektu) jsou na portu 5001.
• Odpovědi na požadavky druhého klienta (MultipleBlazorApps.SecondClient projektu) jsou na portu 5002.

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

Pokud nemáte v úmyslu serverové aplikace obsluhovat stránky nebo zobrazení a obsluhovat Blazor WebAssembly jenom klientské aplikace, použijte následující nastavení, které povoluje následující přístup:

• První klientská aplikace reaguje na portu 5001.
• Druhá klientská aplikace reaguje na portu 5002.

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

V souboru serverové Program.cs aplikace odeberte následující kód, který se zobrazí po volání UseHttpsRedirection:

• Pokud plánujete obsluhovat stránky nebo zobrazení ze serverové aplikace, odstraňte následující řádky kódu:

  - app.UseBlazorFrameworkFiles();
  

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

• Pokud plánujete, aby serverová aplikace sloužila Blazor WebAssembly jenom klientským aplikacím, odstraňte následující kód:

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

  Nechte statický middleware souborů na místě:

  app.UseStaticFiles();
  

• Přidejte middleware, který mapuje požadavky na klientské aplikace. Následující příklad nakonfiguruje middleware tak, aby se spustil, když je port požadavku 5001 pro první klientskou aplikaci nebo 5002 pro druhou klientskou aplikaci, nebo hostitel požadavku je firstapp.com buď pro první klientskou aplikaci, nebo secondapp.com pro druhou klientskou aplikaci.

  Poznámka:

  Použití hostitelů (firstapp.com/secondapp.com) v místním systému s místním prohlížečem vyžaduje další konfiguraci, která je nad rámec tohoto článku. Pro místní testování tohoto scénáře doporučujeme používat porty. Typické produkční aplikace jsou nakonfigurované tak, aby používaly subdomény, jako www.contoso.com jsou návštěvníci webu a admin.contoso.com správci. Se správnou konfigurací DNS a serveru, která je nad rámec tohoto článku a závisí na použitých technologiích, aplikace reaguje na požadavky na libovolné hostitele, které jsou pojmenovány v následujícím kódu.

  Místo, odkud app.UseBlazorFrameworkFiles();jste řádek odebraliProgram.cs, umístěte následující kód:

  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");
      });
  });
  

  Výstraha

  Rozhraní API, které závisí na hlavičce hostitele, například HttpRequest.Host a RequireHost, podléhají potenciálnímu falšování identity klienty.

  Pokud chcete zabránit falšování identity hostitele a portu, použijte jeden z následujících přístupů:

  • Použijte HttpContext.Connection (ConnectionInfo.LocalPort) místo, kde jsou porty kontrolovány.
  • Používejte filtrování hostitelů.

• Přidejte middleware, který mapuje požadavky na klientské aplikace. Následující příklad nakonfiguruje middleware tak, aby se spustil, když je /FirstApp dílčí cesta požadavku určená pro první klientskou aplikaci nebo /SecondApp druhou klientskou aplikaci.

  Místo, odkud app.UseBlazorFrameworkFiles();jste řádek odebraliProgram.cs, umístěte následující kód:

  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");
      });
  });
  

• Nastavte základní cestu v každé klientské aplikaci:

  V souboru první klientské aplikace index.html (Client/wwwroot/index.html) aktualizujte <base> hodnotu značky tak, aby odrážela dílčí cestu. Koncové lomítko je povinné:

  <base href="/FirstApp/" />
  

  V souboru druhé klientské aplikace index.html (SecondClient/wwwroot/index.html) aktualizujte <base> hodnotu značky tak, aby odrážela dílčí cestu. Koncové lomítko je povinné:

  <base href="/SecondApp/" />
  

Další informace najdete UseStaticFilesv tématu ASP.NET Core Blazor statické soubory.

Další informace o UseBlazorFrameworkFiles těchto MapFallbackToFilezdrojích najdete v následujících zdrojích informací:

• Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.UseBlazorFrameworkFiles (referenční zdroj)
• Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile (referenční zdroj)

Poznámka:

Odkazy na referenční zdroj .NET v dokumentaci obvykle otevřou výchozí větev úložiště, která představuje aktuální vývoj další verze .NET. Pokud chcete vybrat značku pro konkrétní verzi, použijte rozevírací seznam pro přepnutí mezi větvemi nebo značkami. Další informace najdete v tématu Jak vybrat značku verze zdrojového kódu ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Požadavky z klientských aplikací do rozhraní API serveru jsou buď do /WeatherForecast/FirstApp/WeatherForecast , nebo /SecondApp/WeatherForecast v závislosti na tom, do které klientské aplikace požadavek odešle. Proto trasy kontroleru, které vrací data o počasí z rozhraní API serveru, vyžadují úpravu tak, aby zahrnovaly segmenty cesty.

V kontroleru předpovědi počasí serverové aplikace (Controllers/WeatherForecastController.cs) nahraďte stávající trasu ([Route("[controller]")]) WeatherForecastController následujícími trasami, které berou v úvahu cesty požadavků klienta:

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

Pokud plánujete obsluhovat stránky ze serverové aplikace, přidejte IndexRazor stránku do Pages složky serverové aplikace:

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()
    {
    }
}

Poznámka:

Index Předchozí stránka je minimálním příkladem čistě pro demonstrační účely. Pokud aplikace vyžaduje další Razor prostředky stránky, například rozložení, styly, skripty a importy, získejte je z aplikace vytvořené ze Razor šablony projektu Stránky. Další informace najdete v tématu Razor Architektura a koncepty stránek v ASP.NET Core.

Pokud plánujete obsluhovat zobrazení MVC ze serverové aplikace, přidejte Index zobrazení a Home kontroler:

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();
}

Poznámka:

Index Předchozí zobrazení je minimálním příkladem čistě pro demonstrační účely. Pokud aplikace vyžaduje další prostředky MVC, například rozložení, styly, skripty a importy, získejte je z aplikace vytvořené ze šablony projektu MVC. Další informace najdete v tématu Začínáme s ASP.NET Core MVC.

Další informace o používání Razor komponent z klientských aplikací na stránkách nebo zobrazeních serverové aplikace najdete v tématu Integrace komponent ASP.NET Core Razor s MVC nebo Razor Stránkami v hostovaných Blazor WebAssembly řešeních.

Spuštění aplikace

MultipleBlazorApps.Server Spusťte projekt:

• Přístup k počáteční klientské aplikaci na adrese https://localhost:5001.
• Přístup k přidané klientské aplikaci na adrese https://localhost:5002.
• Pokud je serverová aplikace nakonfigurovaná tak, aby obsluhovala stránky nebo zobrazení, přejděte na Index stránku nebo zobrazení na adrese https://localhost:5000.

• Přístup k počáteční klientské aplikaci na adrese https://localhost:{DEFAULT PORT}/FirstApp.
• Přístup k přidané klientské aplikaci na adrese https://localhost:{DEFAULT PORT}/SecondApp.
• Pokud je serverová aplikace nakonfigurovaná tak, aby obsluhovala stránky nebo zobrazení, přejděte na Index stránku nebo zobrazení na adrese https://localhost:{DEFAULT PORT}.

V předchozím příkladu adres URL {DEFAULT PORT} je zástupný symbol výchozím portem definovaným souborem MultipleBlazorApps.Server projektu Properties/launchSettings.json v jeho applicationUrl hodnotě.

Důležité

Při spuštění aplikace pomocí dotnet watch příkazu (nebo dotnet run) (.NET CLI) ověřte, že je příkazové prostředí otevřené ve Server složce řešení.

Při spuštění aplikace pomocí tlačítka Start sady Visual Studio ověřte, že MultipleBlazorApps.Server je projekt nastavený jako spouštěný projekt (zvýrazněný v Průzkumníku řešení).

Statické prostředky

Pokud je prostředek ve složce klientské aplikace wwwroot , zadejte cestu k žádosti o statický prostředek v komponentách:

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

Zástupný symbol {PATH AND FILE NAME} je cesta a název souboru v části wwwroot.

Například zdroj image Jeepu (jeep-yj.png) ve vehicle složce wwwroot:

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

Razor Podpora knihovny tříd (RCL)

Přidejte do řešení knihovnuRazor tříd (RCL) jako nový projekt:

• Klikněte pravým tlačítkem na řešení v Průzkumníku řešení a vyberte Přidat>nový projekt.
• Pomocí šablony projektu Knihovna tříd vytvořte projekt.Razor Příklady v této části používají název ComponentLibraryprojektu, což je také název sestavení RCL. Nezaškrtávejte políčko Stránky podpory a zobrazení .

Pro každou hostované klientskou Blazor WebAssembly aplikaci vytvořte odkaz na projekt RCL tak, že v Průzkumníku řešení kliknete pravým tlačítkem na každý projekt klienta a vyberete Přidat>odkaz na projekt.

V klientskýchaplikacích

• @using Umístěte direktivu na začátek komponenty pro obor názvů RCL a přidejte Razor syntaxi pro komponentu. Následující příklad je pro seznam RCL s názvem ComponentLibrarysestavení:

  @using ComponentLibrary
  
  ...
  
  <Component1 />
  

• Zadejte obor názvů RCL spolu se Razor syntaxí komponenty. Tento přístup nevyžaduje direktivu @using v horní části souboru komponenty. Následující příklad je pro seznam RCL s názvem ComponentLibrarysestavení:

  <ComponentLibrary.Component1 />
  

Poznámka:

Direktivu @using lze také umístit do souboru každé klientské aplikace _Import.razor , která zpřístupňuje obor názvů seznamu RCL globálně pro komponenty v daném projektu.

Pokud je jakýkoli jiný statický prostředek ve wwwroot složce seznamu RCL, odkazujte na statický prostředek v klientské aplikaci podle pokynů v opakovaně použitelném Razor uživatelském rozhraní v knihovnách tříd s ASP.NET Core:

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

Zástupný {PACKAGE ID} symbol je ID balíčku RCL. Pokud v souboru projektu není zadaný parametr <PackageId>, jako ID balíčku se ve výchozím nastavení použije název sestavení projektu. Zástupný {PATH AND FILE NAME} symbol je cesta a název souboru v části wwwroot.

Následující příklad ukazuje kód image Jeepu (jeep-yj.png) ve vehicle složce složky RCL wwwroot . Následující příklad je pro seznam RCL s názvem ComponentLibrarysestavení:

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

Dodatečné zdroje

• Využívání komponent ASP.NET Core Razor v knihovně tříd Razor (RCL)
• Opakovaně použitelné Razor uživatelské rozhraní v knihovnách tříd s ASP.NET Core
• Blazor