Udostępnij za pośrednictwem

Wiele hostowanych aplikacji ASP.NET Core Blazor WebAssembly

  • Artykuł

Uwaga

Nie jest to najnowsza wersja tego artykułu. Aby uzyskać najnowszą wersję tego artykułu, zobacz wersję platformy .NET 7.

W tym artykule wyjaśniono, jak skonfigurować hostowaną Blazor WebAssembly aplikację do hostowania wielu Blazor WebAssembly aplikacji.

Konfigurowanie

Wybierz wersję tego artykułu, która jest zgodna z wymaganiami dotyczącymi hostingu, portem/domeną (na przykład ) lubsecondapp.comfirstapp.com/ hostem podścieżki tras (na przykład/:5002:5001/FirstApp i )./SecondApp

W przypadku bieżącego wyboru hostingu w tym artykule opisano hostowanie portów/domen (na przykład :5001/:5002 lub ).firstapp.com/secondapp.com

W następujących przykładach:

  • Nazwa projektu hostowanej Blazor WebAssembly aplikacji znajduje się MultipleBlazorApps w folderze o nazwie MultipleBlazorApps.
  • Trzy projekty w rozwiązaniu przed dodaniu drugiej aplikacji klienckiej znajdują się w Client folderze , MultipleBlazorApps.Server w Server folderze i MultipleBlazorApps.Shared w folderze Shared .MultipleBlazorApps.Client
  • Początkowa (pierwsza) aplikacja kliencka to domyślny projekt klienta rozwiązania utworzonego na podstawie szablonu Blazor WebAssembly projektu.
  • Druga aplikacja kliencka jest dodawana do rozwiązania MultipleBlazorApps.SecondClient w folderze o nazwie SecondClient.
  • Opcjonalnie projekt serwera (MultipleBlazorApps.Server) może obsługiwać strony lub widoki jako strony lub aplikację Razor MVC.
  • Pierwsza aplikacja kliencka jest dostępna w przeglądarce na porcie 5001 lub z hostem firstapp.comprogramu . Druga aplikacja kliencka jest dostępna w przeglądarce na porcie 5002 lub z hostem secondapp.com.

W bieżącym zaznaczeniu w tym artykule opisano hostowanie podścieżki tras (na przykład /FirstApp i /SecondApp).

W następujących przykładach:

  • Nazwa projektu hostowanej Blazor WebAssembly aplikacji znajduje się MultipleBlazorApps w folderze o nazwie MultipleBlazorApps.
  • Trzy projekty w rozwiązaniu przed dodaniu drugiej aplikacji klienckiej znajdują się w Client folderze , MultipleBlazorApps.Server w Server folderze i MultipleBlazorApps.Shared w folderze Shared .MultipleBlazorApps.Client
  • Początkowa (pierwsza) aplikacja kliencka to domyślny projekt klienta rozwiązania utworzonego na podstawie szablonu Blazor WebAssembly projektu.
  • Druga aplikacja kliencka jest dodawana do rozwiązania MultipleBlazorApps.SecondClient w folderze o nazwie SecondClient.
  • Opcjonalnie projekt serwera (MultipleBlazorApps.Server) może obsługiwać strony lub widoki jako formalne Razor strony lub aplikację MVC.
  • Obie aplikacje klienckie używają domyślnego portu zdefiniowanego MultipleBlazorApps.Server przez plik projektu Properties/launchSettings.json w jego applicationUrl wartości. Pierwsza aplikacja kliencka jest dostępna w przeglądarce w podścieżce /FirstApp . Druga aplikacja kliencka jest dostępna w przeglądarce w podścieżce /SecondApp .

Przykłady przedstawione w tym artykule wymagają dodatkowej konfiguracji dla:

  • Uzyskiwanie dostępu do aplikacji bezpośrednio w przykładowych domenach hostów firstapp.com i secondapp.com.
  • Certyfikaty dla aplikacji klienckich w celu włączenia zabezpieczeń protokołu TLS/HTTPS.
  • Konfigurowanie aplikacji serwera jako Razor aplikacji Pages dla następujących funkcji:
    • Integracja składników ze Razor stronami lub widokami.
    • Składniki prerenderingu Razor .

Powyższe konfiguracje wykraczają poza zakres tego artykułu. Aby uzyskać więcej informacji, zobacz następujące zasoby:

Użyj istniejącego rozwiązania hostowanego Blazor WebAssemblylub utwórz nowe Blazor WebAssembly hostowane rozwiązanie na podstawie Blazor WebAssembly szablonu projektu, przekazując -ho|--hosted opcję, jeśli używasz interfejsu wiersza polecenia platformy .NET lub zaznacz pole wyboru ASP.NET Core Hosted w programie Visual Studio po utworzeniu projektu w środowisku IDE.

Użyj folderu dla rozwiązania o nazwie MultipleBlazorApps i nadaj projektowi MultipleBlazorAppsnazwę .

Utwórz nowy folder w rozwiązaniu o nazwie SecondClient. W nowym folderze dodaj drugą aplikację kliencką Blazor WebAssembly o nazwie MultipleBlazorApps.SecondClient. Dodaj projekt jako aplikację autonomiczną Blazor WebAssembly . Aby utworzyć aplikację autonomiczną Blazor WebAssembly , nie przekazuj -ho|--hosted opcji, jeśli używasz interfejsu wiersza polecenia platformy .NET lub nie używaj pola wyboru ASP.NET Core Hosted , jeśli używasz programu Visual Studio.

Wprowadź następujące zmiany w projekcie MultipleBlazorApps.SecondClient :

  • FetchData Skopiuj składnik (Pages/FetchData.razor) z Client/Pages folderu do SecondClient/Pages folderu . Ten krok jest wymagany, ponieważ aplikacja autonomiczna Blazor WebAssembly nie wywołuje Server kontrolera projektu na potrzeby danych pogodowych, używa pliku danych statycznych. Kopiując FetchData składnik do dodanego projektu, druga aplikacja kliencka wykonuje również wywołanie internetowego interfejsu API do interfejsu API serwera na potrzeby danych pogodowych.
  • SecondClient/wwwroot/sample-data Usuń folder, ponieważ weather.json plik w folderze nie jest używany.

W poniższej tabeli opisano foldery i nazwy projektów rozwiązania po SecondClient dodaniu folderu i MultipleBlazorApps.SecondClient projektu.

Folder fizyczny Nazwa projektu opis
Client MultipleBlazorApps.Client Blazor WebAssembly aplikacja kliencka
SecondClient MultipleBlazorApps.SecondClient Blazor WebAssembly aplikacja kliencka
Server MultipleBlazorApps.Server aplikacja serwera ASP.NET Core
Shared MultipleBlazorApps.Shared Projekt zasobów udostępnionych

Projekt MultipleBlazorApps.Server obsługuje dwie Blazor WebAssembly aplikacje klienckie i dostarcza dane pogodowe do składników aplikacji FetchData klienckich za pośrednictwem kontrolera MVC. MultipleBlazorApps.Server Opcjonalnie projekt może również obsługiwać strony lub widoki jako tradycyjną Razor aplikację Pages lub MVC. Kroki włączania obsługi stron lub widoków zostały omówione w dalszej części tego artykułu.

Uwaga

Demonstracja w tym artykule używa statycznych nazw FirstApp ścieżek zasobów internetowych dla MultipleBlazorApps.Client projektu i SecondAppMultipleBlazorApps.SecondClient projektu. Nazwy "FirstApp" i "SecondApp" służą jedynie do celów demonstracyjnych. Inne nazwy są dopuszczalne, aby odróżnić aplikacje klienckie, takie jak App1App2/,/Client1Client2 , 1/2lub dowolny podobny schemat nazewnictwa.

Podczas kierowania żądań do aplikacji klienckich przez port lub domenę element "FirstApp" i "SecondApp" są używane wewnętrznie do kierowania żądań i obsługi odpowiedzi dla zasobów statycznych i nie są widoczne na pasku adresu przeglądarki.

Uwaga

Demonstracja w tym artykule używa statycznych nazw FirstApp ścieżek zasobów internetowych dla MultipleBlazorApps.Client projektu i SecondAppMultipleBlazorApps.SecondClient projektu. Nazwy "FirstApp" i "SecondApp" służą jedynie do celów demonstracyjnych. Inne nazwy są dopuszczalne, aby odróżnić aplikacje klienckie, takie jak App1App2/,/Client1Client2 , 1/2lub dowolny podobny schemat nazewnictwa.

"FirstApp" i "SecondApp" są również wyświetlane na pasku adresu przeglądarki, ponieważ żądania są kierowane do dwóch aplikacji klienckich przy użyciu tych nazw. Obsługiwane są inne prawidłowe segmenty tras adresów URL, a segmenty tras nie muszą ściśle odpowiadać nazwam używanym do kierowania statycznych zasobów internetowych wewnętrznie. Używanie wartości "FirstApp" i "SecondApp" zarówno dla wewnętrznego routingu zasobów statycznych, jak i routingu żądań aplikacji jest tylko na potrzeby convenance w przykładach tego artykułu.

W pliku projektu pierwszej aplikacji klienckiej (MultipleBlazorApps.Client.csproj) dodaj <StaticWebAssetBasePath> właściwość do <PropertyGroup> elementu z wartością FirstApp , aby ustawić ścieżkę podstawową dla zasobów statycznych projektu:

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

MultipleBlazorApps.SecondClient W pliku projektu aplikacji (MultipleBlazorApps.SecondClient.csproj):

  • <StaticWebAssetBasePath> Dodaj właściwość do obiektu <PropertyGroup> z wartością SecondApp:

    <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>

  • Dodaj odwołanie do projektu do MultipleBlazorApps.Shared elementu <ItemGroup>:

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

W pliku projektu aplikacji serwera (Server/MultipleBlazorApps.Server.csproj) utwórz odwołanie do projektu dla dodanej MultipleBlazorApps.SecondClient aplikacji klienckiej w pliku <ItemGroup>:

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

W pliku aplikacji Properties/launchSettings.json serwera skonfiguruj applicationUrlKestrel profil (MultipleBlazorApps.Server) w celu uzyskania dostępu do aplikacji klienckich na portach 5001 i 5002. Jeśli skonfigurujesz środowisko lokalne tak, aby używało przykładowych domen, adresy URL do applicationUrl użycia firstapp.com i secondapp.com nie używają portów.

Uwaga

Użycie portów w tym pokazie umożliwia dostęp do projektów klienckich w przeglądarce lokalnej bez konieczności konfigurowania lokalnego środowiska hostingu, dzięki czemu przeglądarki internetowe mogą uzyskiwać dostęp do aplikacji klienckich firstapp.com za pośrednictwem konfiguracji hosta i secondapp.com. W scenariuszach produkcyjnych typową konfiguracją jest użycie poddomen w celu odróżnienia aplikacji klienckich.

Na przykład:

  • Porty są porzucane z konfiguracji tego pokazu.
  • Hosty są zmieniane tak, aby używały domen podrzędnych, takich jak www.contoso.com dla odwiedzających witryn i admin.contoso.com dla administratorów.
  • Dodatkowe hosty można uwzględnić w przypadku dodatkowych aplikacji klienckich, a co najmniej jeden host jest wymagany, jeśli aplikacja serwera jest również aplikacją Razor Pages lub MVC, która obsługuje strony lub widoki.

Jeśli planujesz obsługiwać strony lub widoki z aplikacji serwera, użyj następującego applicationUrl ustawienia w Properties/launchSettings.json pliku, które zezwala na następujący dostęp:

  • Opcjonalnie aplikacja Razor Pages lub MVC (MultipleBlazorApps.Server projekt) odpowiada na żądania na porcie 5000.
  • Odpowiedzi na żądania pierwszego klienta (MultipleBlazorApps.Client projektu) znajdują się na porcie 5001.
  • Odpowiedzi na żądania drugiego klienta (MultipleBlazorApps.SecondClient projektu) znajdują się na porcie 5002.
"applicationUrl": "https://localhost:5000;https://localhost:5001;https://localhost:5002",

Jeśli nie planujesz, aby aplikacja serwera obsługiwała strony lub widoki i obsługiwała Blazor WebAssembly tylko aplikacje klienckie, użyj następującego ustawienia, które zezwala na następujący dostęp:

  • Pierwsza aplikacja kliencka odpowiada na porcie 5001.
  • Druga aplikacja kliencka odpowiada na porcie 5002.
"applicationUrl": "https://localhost:5001;https://localhost:5002",

W pliku aplikacji Program.cs serwera usuń następujący kod, który pojawia się po wywołaniu metody UseHttpsRedirection:

  • Jeśli planujesz obsługiwać strony lub widoki z aplikacji serwera, usuń następujące wiersze kodu:

    - app.UseBlazorFrameworkFiles();

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

  • Jeśli planujesz, aby aplikacja serwera obsługiwała Blazor WebAssembly tylko aplikacje klienckie, usuń następujący kod:

    - app.UseBlazorFrameworkFiles();

...

- app.UseRouting();

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

    Pozostaw oprogramowanie pośredniczące pliku statycznego w miejscu:

    app.UseStaticFiles();

  • Dodaj oprogramowanie pośredniczące mapujące żądania do aplikacji klienckich. Poniższy przykład umożliwia skonfigurowanie oprogramowania pośredniczącego do uruchomienia, gdy port żądania to 5001 dla pierwszej aplikacji klienckiej lub 5002 dla drugiej aplikacji klienckiej, albo host żądania jest firstapp.com przeznaczony dla pierwszej aplikacji klienckiej lub secondapp.com drugiej aplikacji klienckiej.

    Uwaga

    Użycie hostów () wfirstapp.com/secondapp.com systemie lokalnym z przeglądarką lokalną wymaga dodatkowej konfiguracji, która wykracza poza zakres tego artykułu. W przypadku lokalnego testowania tego scenariusza zalecamy używanie portów. Typowe aplikacje produkcyjne są skonfigurowane do używania poddomen, takich jak www.contoso.com dla odwiedzających witryn i admin.contoso.com dla administratorów. Dzięki właściwej konfiguracji dns i serwera, która wykracza poza zakres tego artykułu i zależy od używanych technologii, aplikacja odpowiada na żądania na dowolnych hostach nazwanych w poniższym kodzie.

    Gdzie usunięto app.UseBlazorFrameworkFiles(); wiersz z Program.cs, umieść następujący kod:

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

    Ostrzeżenie

    Interfejs API, który opiera się na nagłówku hosta, takim jak HttpRequest.Host i RequireHost, podlega potencjalnemu fałszowaniu przez klientów.

    Aby zapobiec fałszowaniu hostów i portów, użyj jednej z następujących metod:

  • Dodaj oprogramowanie pośredniczące mapujące żądania do aplikacji klienckich. Poniższy przykład umożliwia skonfigurowanie oprogramowania pośredniczącego do uruchomienia, gdy ścieżka podrzędna żądania dotyczy /FirstApp pierwszej aplikacji klienckiej lub /SecondApp drugiej aplikacji klienckiej.

    Gdzie usunięto app.UseBlazorFrameworkFiles(); wiersz z Program.cs, umieść następujący kod:

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

  • Ustaw ścieżkę podstawową w każdej aplikacji klienckiej:

    W pliku pierwszej aplikacji klienckiej index.html (Client/wwwroot/index.html) zaktualizuj wartość tagu <base> , aby odzwierciedlić ścieżkę podrzędną. Końcowy ukośnik jest wymagany:

    <base href="/FirstApp/" />

    W pliku drugiej aplikacji klienckiej index.html (SecondClient/wwwroot/index.html) zaktualizuj wartość tagu <base> , aby odzwierciedlić ścieżkę podrzędną. Końcowy ukośnik jest wymagany:

    <base href="/SecondApp/" />

Aby uzyskać więcej informacji na temat UseStaticFilesprogramu , zobacz ASP.NET Core Blazor plików statycznych.

Aby uzyskać więcej informacji na temat UseBlazorFrameworkFiles i MapFallbackToFile, zobacz następujące zasoby:

Uwaga

Linki dokumentacji do źródła referencyjnego platformy .NET zwykle ładują domyślną gałąź repozytorium, która odzwierciedla bieżące programowanie dla następnej wersji platformy .NET. Aby wybrać tag dla określonej wersji, użyj listy rozwijanej Przełącz gałęzie lub tagi. Aby uzyskać więcej informacji, zobacz Jak wybrać tag wersji kodu źródłowego platformy ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Żądania z aplikacji klienckich do /WeatherForecast w interfejsie API serwera są kierowane do /FirstApp/WeatherForecast lub /SecondApp/WeatherForecast w zależności od tego, która aplikacja kliencka wysyła żądanie. W związku z tym kontroler kieruje trasy, które zwracają dane pogodowe z interfejsu API serwera, wymagają modyfikacji w celu uwzględnienia segmentów ścieżki.

W kontrolerze prognozy pogody aplikacji serwera (Controllers/WeatherForecastController.cs) zastąp istniejącą trasę ([Route("[controller]")]) WeatherForecastController następującymi trasami, które uwzględniają ścieżki żądań klienta:

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

Jeśli planujesz obsługiwać strony z aplikacji serwera, dodaj IndexRazor stronę do Pages folderu aplikacji serwera:

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

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

namespace MultipleBlazorApps.Server.Pages
{
    public class IndexModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

Uwaga

Poprzednia Index strona jest minimalnym przykładem wyłącznie w celach demonstracyjnych. Jeśli aplikacja wymaga dodatkowych Razor zasobów stron, takich jak układ, style, skrypty i importy, uzyskaj je z aplikacji utworzonej Razor na podstawie szablonu projektu Pages. Aby uzyskać więcej informacji, zobacz Wprowadzenie do Razor stron w programie ASP.NET Core.

Jeśli planujesz obsługiwać widoki MVC z aplikacji serwera, dodaj Index widok i 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()
    {
        return View();
    }
}

using Microsoft.AspNetCore.Mvc;

namespace MultipleBlazorApps.Server.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Uwaga

Powyższy Index widok jest minimalnym przykładem wyłącznie w celach demonstracyjnych. Jeśli aplikacja wymaga dodatkowych zasobów MVC, takich jak układ, style, skrypty i importy, uzyskaj je z aplikacji utworzonej na podstawie szablonu projektu MVC. Aby uzyskać więcej informacji, zobacz Wprowadzenie do ASP.NET Core MVC.

Aby uzyskać więcej informacji na temat używania Razor składników z jednej z aplikacji klienckich na stronach lub widokach aplikacji serwera, zobacz Prerender i integrowanie składników ASP.NET CoreRazor.

Uruchom aplikację

MultipleBlazorApps.Server Uruchom projekt:

  • Uzyskaj dostęp do początkowej aplikacji klienckiej pod adresem https://localhost:5001.
  • Uzyskaj dostęp do dodanej aplikacji klienckiej pod adresem https://localhost:5002.
  • Jeśli aplikacja serwera jest skonfigurowana do obsługi stron lub widoków, uzyskaj dostęp do Index strony lub widoku pod adresem https://localhost:5000.
  • Uzyskaj dostęp do początkowej aplikacji klienckiej pod adresem https://localhost:{DEFAULT PORT}/FirstApp.
  • Uzyskaj dostęp do dodanej aplikacji klienckiej pod adresem https://localhost:{DEFAULT PORT}/SecondApp.
  • Jeśli aplikacja serwera jest skonfigurowana do obsługi stron lub widoków, uzyskaj dostęp do Index strony lub widoku pod adresem https://localhost:{DEFAULT PORT}.

W poprzednich przykładowych adresach URL {DEFAULT PORT} symbol zastępczy jest domyślnym portem zdefiniowanym przez MultipleBlazorApps.Server plik projektu Properties/launchSettings.json w jego applicationUrl wartości.

Ważne

Podczas uruchamiania aplikacji za pomocą dotnet watch polecenia (lub dotnet run) (interfejs wiersza polecenia platformy .NET) upewnij się, że powłoka poleceń jest otwarta w Server folderze rozwiązania.

W przypadku korzystania z przycisku uruchamiania programu Visual Studio w celu uruchomienia aplikacji upewnij się, że MultipleBlazorApps.Server projekt jest ustawiony jako projekt startowy (wyróżniony w Eksplorator rozwiązań).

Zasoby statyczne

Gdy zasób znajduje się w folderze aplikacji wwwroot klienckiej, podaj statyczną ścieżkę żądania zasobu w składnikach:

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

Symbol zastępczy {PATH AND FILE NAME} to ścieżka i nazwa pliku w folderze wwwroot.

Na przykład źródło obrazu Jeep (jeep-yj.png) w vehicle folderze :wwwroot

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

Obsługa biblioteki klas Razor (RCL)

Dodaj bibliotekę Razor klas (RCL) do rozwiązania jako nowy projekt:

  • Kliknij prawym przyciskiem myszy rozwiązanie w Eksplorator rozwiązań i wybierz polecenie Dodaj>nowy projekt.
  • Razor Użyj szablonu projektu Biblioteka klas, aby utworzyć projekt. Przykłady w tej sekcji używają nazwy ComponentLibraryprojektu , która jest również nazwą zestawu listy RCL. Nie zaznaczaj pól wyboru Strony i widoki pomocy technicznej.

Dla każdej hostowanej Blazor WebAssembly aplikacji klienckiej utwórz odwołanie do projektu listy RCL, klikając prawym przyciskiem myszy każdy projekt klienta w Eksplorator rozwiązań i wybierając polecenie Dodaj>odwołanie do projektu.

Użyj składników z listy RCL w aplikacjach klienckich z jedną z następujących metod:

  • Umieść dyrektywę @using w górnej części składnika dla przestrzeni nazw listy RCL i dodaj Razor składnię składnika. Poniższy przykład dotyczy listy RCL o nazwie ComponentLibraryzestawu :

    @using ComponentLibrary

...

<Component1 />

  • Podaj przestrzeń nazw listy RCL wraz ze składnią Razor składnika. Takie podejście nie wymaga @using dyrektywy w górnej części pliku składnika. Poniższy przykład dotyczy listy RCL o nazwie ComponentLibraryzestawu :

    <ComponentLibrary.Component1 />

Uwaga

Dyrektywę @using można również umieścić w pliku każdej aplikacji _Import.razor klienckiej, co sprawia, że przestrzeń nazw listy RCL jest globalnie dostępna dla składników w tym projekcie.

Jeśli dowolny inny zasób statyczny znajduje się w wwwroot folderze listy RCL, odwołaj się do zasobu statycznego w aplikacji klienckiej zgodnie ze wskazówkami w temacie Interfejs użytkownika wielokrotnego użytku Razor w bibliotekach klas z ASP.NET Core:

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

Symbol {PACKAGE ID} zastępczy to identyfikator pakietu listy RCL. Identyfikator pakietu domyślnie określa nazwę zestawu projektu, jeśli tag <PackageId> nie jest określony w pliku projektu. Symbol {PATH AND FILE NAME} zastępczy to ścieżka i nazwa pliku w obszarze wwwroot.

W poniższym przykładzie pokazano znaczniki obrazu Jeep (jeep-yj.png) w vehicle folderze folderu listy RCL wwwroot . Poniższy przykład dotyczy listy RCL o nazwie ComponentLibraryzestawu :

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

Dodatkowe zasoby