Mehrere gehostete ASP.NET Core Blazor WebAssembly Apps

Dieser Artikel erläutert, wie Sie eine gehostete Blazor WebAssembly App so konfigurieren, dass sie mehrere Blazor WebAssembly Apps hostet.

Konfiguration

Wählen Sie die Version dieses Artikels aus, die Ihren Hostinganforderungen entspricht, entweder Port-/Domänenhosting (z. B. :5001/:5002 oder firstapp.com/secondapp.com) oder Routenunterpfadhosting (z. B. /FirstApp und /SecondApp).

Bei der aktuellen Hostingauswahl behandelt dieser Artikel das Port-/Domänenhosting (z. B. :5001/:5002 oder firstapp.com/secondapp.com).

In den folgenden Beispielen:

• Der Projektname der gehosteten Blazor WebAssembly App ist MultipleBlazorApps in einem Ordner mit dem Namen MultipleBlazorApps.
• Die drei Projekte in der Projektmappe, bevor eine zweite Client-App hinzugefügt wird, sind MultipleBlazorApps.Client im Client Ordner, MultipleBlazorApps.Server im Server Ordner und MultipleBlazorApps.Shared im Shared Ordner.
• Die anfängliche (erste) Client-App ist das Standardclientprojekt einer Projektmappe, welche aus der Blazor WebAssembly Projektvorlage erstellt wurde.
• Eine zweite Client-App wird der Projektmappe hinzugefügt, MultipleBlazorApps.SecondClient in einem Ordner mit dem Namen SecondClient.
• Das Serverprojekt (MultipleBlazorApps.Server) kann Seiten oder Ansichten optional als Razor Pages- oder MVC-App bereitstellen.
• Die erste Client-App ist über einen Browser auf Port 5001 oder über einen Host von firstapp.com erreichbar. Die zweite Client-App ist über einen Browser auf Port 5002 oder über einen Host von secondapp.com erreichbar.

Bei der aktuellen Auswahl behandelt dieser Artikel das Routenunterpfadhosting (z. B. /FirstApp und /SecondApp).

In den folgenden Beispielen:

• Der Projektname der gehosteten Blazor WebAssembly App ist MultipleBlazorApps in einem Ordner mit dem Namen MultipleBlazorApps.
• Die drei Projekte in der Projektmappe, bevor eine zweite Client-App hinzugefügt wird, sind MultipleBlazorApps.Client im Client Ordner, MultipleBlazorApps.Server im Server Ordner und MultipleBlazorApps.Shared im Shared Ordner.
• Die anfängliche (erste) Client-App ist das Standardclientprojekt einer Projektmappe, welche aus der Blazor WebAssembly Projektvorlage erstellt wurde.
• Eine zweite Client-App wird der Projektmappe hinzugefügt, MultipleBlazorApps.SecondClient in einem Ordner mit dem Namen SecondClient.
• Das Serverprojekt (MultipleBlazorApps.Server) kann Seiten oder Ansichten optional als formale Razor Seiten oder MVC-App bereitstellen.
• Beide Client-Apps verwenden den Standardport, der durch die Datei Properties/launchSettings.json des Projekts MultipleBlazorApps.Server im Wert applicationUrl definiert wird. Die erste Client-App ist über einen Browser am Unterpfad /FirstApp erreichbar. Die zweite Client-App ist über einen Browser am Unterpfad /SecondApp erreichbar.

Die in diesem Artikel gezeigten Beispiele erfordern eine zusätzliche Konfiguration für Folgendes:

• Für den direkten Zugriff auf die Apps auf den Beispielhostdomains, firstapp.com und secondapp.com.
• Für Zertifikate für die Client-Apps zum Aktivieren der TLS/HTTPS-Sicherheit.
• Für das Konfigurieren der Server-App als Razor Seiten-App für die folgenden Features:
  • Integration von Razor Komponenten in Seiten oder Ansichten.
  • Vorabrendering von Razor Komponenten.

Die vorangegangenen Konfigurationen sind nicht Umfang dieses Artikels. Weitere Informationen finden Sie in den folgenden Ressourcen:

• Hosten und Bereitstellen von Artikeln
• Erzwingen von HTTPS in ASP.NET Core
• Integrieren ASP.NET Kernkomponenten Razor mit MVC oder Razor Pages in gehostete Blazor WebAssembly Lösungen

Verwenden Sie eine vorhandene gehostete Blazor WebAssemblyProjektmappe oder erstellen Sie eine neue gehosteteBlazor WebAssembly Projektmappe aus der Blazor WebAssembly Projektvorlage, indem Sie die -ho|--hosted Option übergeben, wenn Sie .NET CLI verwenden oder das ASP.NET Core gehostet Kontrollkästchen in Visual Studio anwählen, wenn das Projekt in der IDE erstellt wird.

Verwenden Sie einen MultipleBlazorApps benannten Ordner für die Projektmappe und benennen Sie das Projekt MultipleBlazorApps.

Erstellen Sie einen neuen Ordner in der Projektmappe mit dem Namen SecondClient. Fügen Sie im neuen Ordner eine zweite Blazor WebAssembly-Client-App mit dem Namen MultipleBlazorApps.SecondClient hinzu. Fügen Sie das Projekt als eigenständige Blazor WebAssembly App hinzu. Um eine eigenständige Blazor WebAssembly-App zu erstellen, übergeben Sie die Option -ho|--hosted bei Verwendung der .NET-CLI nicht, bzw. aktivieren Sie das Kontrollkästchen ASP.NET Core, gehostet bei Verwendung von Visual Studio nicht.

Nehmen Sie die folgenden Änderungen am Projekt MultipleBlazorApps.SecondClient vor:

• Kopieren Sie die FetchData-Komponente (Pages/FetchData.razor) aus dem Ordner Client/Pages in den Ordner SecondClient/Pages. Dieser Schritt ist erforderlich, da eine eigenständige Blazor WebAssembly-App den Controller eines Server-Projekts für Wetterdaten nicht aufruft, sie verwendet eine statische Datendatei. Durch Kopieren der FetchData-Komponente in das hinzugefügte Projekt führt die zweite Client-App auch einen Web-API-Aufruf an die Server-API für Wetterdaten aus.
• Löschen Sie den Ordner SecondClient/wwwroot/sample-data, da die Datei weather.json im Ordner nicht verwendet wird.

In der folgenden Tabelle werden die Ordner und Projektnamen der Projektmappe beschrieben, nachdem der Ordner SecondClient und das Projekt MultipleBlazorApps.SecondClient hinzugefügt wurden.

Physischer Ordner	Projektname	BESCHREIBUNG
Client	MultipleBlazorApps.Client	Blazor WebAssembly-Client-App
SecondClient	MultipleBlazorApps.SecondClient	Blazor WebAssembly-Client-App
Server	MultipleBlazorApps.Server	ASP.NET Core-Server-App
Shared	MultipleBlazorApps.Shared	Projekt für freigegebene Ressourcen

Das Projekt MultipleBlazorApps.Server stellt die beiden Blazor WebAssembly-Client-Apps und Wetterdaten über einen MVC-Controller für die FetchData-Komponenten der Client-Apps bereit. Das Projekt MultipleBlazorApps.Server kann Seiten oder Ansichten auch optional als herkömmliche Razor Pages- oder MVC-App bereitstellen. Schritte zum Aktivieren der Bereitstellung von Seiten oder Ansichten werden weiter unten in diesem Artikel behandelt.

Hinweis

In der Demo in diesem Artikel werden die folgenden Pfadnamen statischer Webressourcen verwendet: FirstApp für das Projekt MultipleBlazorApps.Client und SecondApp für das Projekt MultipleBlazorApps.SecondClient. Die Namen FirstApp und SecondApp dienen lediglich zu Demonstrationszwecken. Zur Unterscheidung der Clientanwendungen sind auch andere Namen zulässig, etwa App1/App2, Client1/Client2, 1/2 oder ein ähnliches Benennungsschema.

Beim Routing von Anforderungen an die Client-Apps über einen Port oder eine Domäne werden FirstApp und SecondAppintern verwendet, um Anforderungen weiterzuleiten und Antworten für statische Ressourcen bereitzustellen, und werden nicht in der Adressleiste eines Browsers angezeigt.

Hinweis

In der Demo in diesem Artikel werden die folgenden Pfadnamen statischer Webressourcen verwendet: FirstApp für das Projekt MultipleBlazorApps.Client und SecondApp für das Projekt MultipleBlazorApps.SecondClient. Die Namen FirstApp und SecondApp dienen lediglich zu Demonstrationszwecken. Zur Unterscheidung der Clientanwendungen sind auch andere Namen zulässig, etwa App1/App2, Client1/Client2, 1/2 oder ein ähnliches Benennungsschema.

FirstApp und SecondApp werden auch in der Adressleiste des Browsers angezeigt, da Anforderungen mithilfe dieser Namen an die beiden Client-Apps weitergeleitet werden. Andere gültige URL-Routensegmente werden unterstützt, und die Routensegmente müssen nicht unbedingt mit den Namen übereinstimmen, die zum internen Weiterleiten statischer Webressourcen verwendet werden. Die Verwendung von FirstApp und SecondApp sowohl für das interne Routing statischer Ressourcen als auch für das Routing von App-Anforderungen dient in den Beispielen dieses Artikels lediglich der Übersichtlichkeit.

Fügen Sie in der Projektdatei der ersten Client-App (MultipleBlazorApps.Client.csproj) eine <StaticWebAssetBasePath>-Eigenschaft zu einer <PropertyGroup> mit einem Wert von FirstApp hinzu, um den Basispfad für die statischen Ressourcen des Projekts festzulegen:

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

In der Projektdatei der MultipleBlazorApps.SecondClient App (MultipleBlazorApps.SecondClient.csproj):

• Fügen Sie einer <PropertyGroup> eine <StaticWebAssetBasePath> Eigenschaft mit dem Wert SecondApp hinzu:

  <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
  

• Fügen Sie einer <ItemGroup> einen Projektverweis zum MultipleBlazorApps.Shared Projekt hinzu:

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

Erstellen Sie einen Projektverweis in der Projektdatei (Server/MultipleBlazorApps.Server.csproj) der Server-App für die hinzugefügte MultipleBlazorApps.SecondClient Client-App in einer <ItemGroup>:

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

Konfigurieren Sie in der Datei Properties/launchSettings.json der Server-App die Anwendungs-URL (applicationUrl) des Kestrel-Profils (MultipleBlazorApps.Server) für den Zugriff auf Client-Apps an den Ports 5001 und 5002. Wenn Sie Ihre lokale Umgebung zur Verwendung der Beispieldomänen konfigurieren, können URLs für applicationUrlfirstapp.com und secondapp.com und nicht die Ports verwenden.

Hinweis

Die Benutzung von Ports in dieser Demonstration ermöglicht den Zugriff auf die Clientprojekte in einem lokalen Browser, ohne dass eine lokale Hostingumgebung konfiguriert werden muss, damit Webbrowser über die Hostkonfigurationen firstapp.com und secondapp.comauf die Client-Apps zugreifen können. In Produktionsszenarien besteht eine typische Konfiguration darin, Client-Apps mithilfe von untergeordneten Domänen zu unterscheiden.

Beispiel:

• Die Ports werden aus der Konfiguration dieser Demonstration gelöscht.
• Die Hosts werden geändert, um Unterdomänen zu verwenden, z. B. www.contoso.com für Websitebesucher und admin.contoso.com für Administratoren.
• Zusätzliche Hosts können für weitere Client-Apps eingefügt werden, und mindestens ein weiterer Host ist erforderlich, wenn die Server-App auch eine Razor Pages- oder MVC-App ist, welche Seiten oder Ansichten bereitstellt.

Wenn Sie planen, Seiten oder Ansichten aus der Server-App heraus bereitzustellen, verwenden Sie die folgende applicationUrl Einstellung in der Properties/launchSettings.json Datei, welche den nachstehenden Zugriff gewährt:

• Die Razor Pages- oder MVC-App (MultipleBlazorApps.Server-Projekt) reagiert optional auf Anforderungen an Port 5000.
• Antworten auf Anforderungen an den ersten Client (MultipleBlazorApps.Client-Projekt) erfolgen an Port 5001.
• Antworten auf Anforderungen an den zweiten Client (MultipleBlazorApps.SecondClient-Projekt) erfolgen an Port 5002.

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

Wenn Sie nicht planen, dass die Server-App Seiten oder Ansichten bereitstellt und nur die Blazor WebAssembly Client-Apps bedient, verwenden Sie die folgende Einstellung, welche den nachstehenden Zugriff gewährt:

• Die erste Client-App reagiert auf Port 5001.
• Die zweite Client-App reagiert auf Port 5002.

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

Entfernen Sie in der Program.cs Datei der Server-App den folgenden Code, welcher nach dem Aufruf von UseHttpsRedirection erscheint:

• Wenn Sie planen, Seiten oder Ansichten über die Server-App bereitzustellen, löschen Sie die folgenden Codezeilen:

  - app.UseBlazorFrameworkFiles();
  

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

• Wenn Sie planen, dass die Server-App nur die Blazor WebAssembly Client-Apps bedient, löschen Sie den folgenden Code:

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

  Lassen Sie die Middleware für statische Dateien an Ort und Stelle:

  app.UseStaticFiles();
  

• Fügen Sie Middleware hinzu, die Anforderungen den Client-Apps zuordnet. Im folgenden Beispiel wird die Middleware so konfiguriert, dass sie ausgeführt wird, wenn der Anforderungsport entweder 5001 für die erste Client-App oder 5002 für die zweite Client-App bzw. der Anforderungshost entweder firstapp.com für die erste Client-App oder secondapp.com für die zweite Client-App lautet.

  Hinweis

  Die Verwendung der Hosts (firstapp.com/secondapp.com) auf einem lokalen System mit einem lokalen Browser erfordert zusätzliche Konfiguration, was über den Umfang dieses Artikels hinausgeht. Wir empfehlen die Verwendung von Ports, um dieses Szenario lokal zu testen. Typische Produktions-Apps sind zur Verwendung von Unterdomänen konfiguriert, z. B. www.contoso.com für Websitebesucher und admin.contoso.com für Administratoren. Mit der richtigen DNS- und Serverkonfiguration, die über den Umfang dieses Artikels hinausgeht und von den verwendeten Technologien abhängt, reagiert die App auf Anforderungen an allen im folgenden Code genannten Hosts.

  Fügen Sie an der Stelle, an der Sie die Zeile app.UseBlazorFrameworkFiles(); aus Program.cs entfernt haben, den folgenden Code ein:

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

  Warnung

  Die APIs, die auf dem Hostheader basieren, z. B. HttpRequest.Host und RequireHost, sind potenziellem Spoofing durch Clients ausgesetzt.

  Verwenden Sie einen der folgenden Ansätze, um Host- und Portspoofing zu verhindern:

  • Verwenden Sie HttpContext.Connection (ConnectionInfo.LocalPort), wobei die Ports aktiviert sind.
  • Verwenden Sie die Hostfilterung.

• Fügen Sie Middleware hinzu, die Anforderungen den Client-Apps zuordnet. Im folgenden Beispiel wird die Middleware so konfiguriert, dass sie ausgeführt wird, wenn der Anforderungsunterpfad für die erste Client-App /FirstApp bzw. /SecondApp für die zweite Client-App lautet.

  Fügen Sie an der Stelle, an der Sie die Zeile app.UseBlazorFrameworkFiles(); aus Program.cs entfernt haben, den folgenden Code ein:

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

• Legen Sie den Basispfad in jeder Client-App fest:

  Aktualisieren Sie in der Datei index.html der ersten Client-App (Client/wwwroot/index.html) den Tagwert <base>, um den Unterpfad widerzuspiegeln. Der nachstehende Schrägstrich ist erforderlich:

  <base href="/FirstApp/" />
  

  Aktualisieren Sie in der Datei index.html der zweiten Client-App (SecondClient/wwwroot/index.html) den Tagwert <base>, um den Unterpfad widerzuspiegeln. Der nachstehende Schrägstrich ist erforderlich:

  <base href="/SecondApp/" />
  

Weitere Informationen zu UseStaticFiles finden Sie unter Blazor in ASP.NET Core: statische Dateien.

Weitere Informationen zu UseBlazorFrameworkFiles und MapFallbackToFile finden Sie in folgenden Ressourcen:

• Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.UseBlazorFrameworkFiles (Verweisquelle)
• Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile (Verweisquelle)

Hinweis

Dokumentationslinks zur .NET-Referenzquelle laden in der Regel den Standardbranch des Repositorys, der die aktuelle Entwicklung für das nächste Release von .NET darstellt. Um ein Tag für ein bestimmtes Release auszuwählen, wählen Sie diesen mit der Dropdownliste Switch branches or tags (Branches oder Tags wechseln) aus. Weitere Informationen finden Sie unter How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205) (Auswählen eines Versionstags von ASP.NET Core-Quellcode (dotnet/AspNetCore.Docs #26205)).

Anforderungen von den Client-Apps an /WeatherForecast in der Server-API gehen entweder an /FirstApp/WeatherForecast oder /SecondApp/WeatherForecast abhängig davon, welche Client-App die Anforderung stellt. Daher erfordern diejenigen Controllerrouten, die Wetterdaten aus der Server-API zurückgeben, eine Anpassung, um die Pfadsegmente einzuschließen.

Ersetzen Sie im Wettervorhersage-Controller (Controllers/WeatherForecastController.cs) der Server-App die vorhandene Route ([Route("[controller]")]) an WeatherForecastController durch die folgenden Routen, welche die Anforderungspfade der Client-Apps berücksichtigen:

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

Wenn Sie planen, Seiten aus der Server-App heraus bereitzustellen, fügen Sie dem Pages Ordner der Server-App eine IndexRazor Seite hinzu:

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

Hinweis

Die vorherige Index-Seite ist ein Minimalbeispiel, das nur zu Demonstrationszwecken dient. Wenn die App zusätzliche Razor Seitenressourcen benötigt, wie z. B. ein Layout, Formatvorlagen, Skripte und Importe, beziehen Sie diese aus einer App, die von der Razor Seiten Projektvorlage erstellt wurde. Weitere Informationen finden Sie unter Einführung in Razor Seiten in ASP.NET Core .

Wenn Sie planen, MVC-Ansichten aus der Server-App heraus bereitzustellen, fügen Sie eine Index Ansicht und einen Home Controller hinzu:

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

Hinweis

Die vorherige Index-Ansicht ist ein Minimalbeispiel, das nur zu Demonstrationszwecken dient. Wenn die App zusätzliche MVC-Ressourcen benötigt, wie z. B. ein Layout, Formatvorlagen, Skripte und Importe, beziehen Sie diese aus einer App, die von der MVC-Projektvorlage erstellt wurde. Weitere Informationen finden Sie unter Erste Schritte mit ASP.NET Core MVC.

Weitere Informationen zur Verwendung der Razor Komponenten aus einer der Client-Apps in Seiten oder Ansichten der Server-App finden Sie unter Integrieren ASP.NET Core-Komponenten Razor in MVC oder Razor Pages in gehosteten Blazor WebAssembly Lösungen.

Ausführen der App

Führen Sie das MultipleBlazorApps.Server Projekt aus:

• Greifen Sie auf die anfängliche Client-App unter https://localhost:5001 zu.
• Greifen Sie auf die hinzugefügte Client-App unter https://localhost:5002 zu.
• Wenn die Server-App so konfiguriert ist, dass Seiten oder Ansichten bereitgestellt werden, greifen Sie auf die Index Seite oder Ansicht unter https://localhost:5000 zu.

• Greifen Sie auf die anfängliche Client-App unter https://localhost:{DEFAULT PORT}/FirstApp zu.
• Greifen Sie auf die hinzugefügte Client-App unter https://localhost:{DEFAULT PORT}/SecondApp zu.
• Wenn die Server-App so konfiguriert ist, dass Seiten oder Ansichten bereitgestellt werden, greifen Sie auf die Index Seite oder Ansicht unter https://localhost:{DEFAULT PORT} zu.

In den vorherigen Beispiel-URLs ist der Platzhalter {DEFAULT PORT} der Standardport, der von der Datei MultipleBlazorApps.Server des Projekts Properties/launchSettings.json im Wert applicationUrl definiert wird.

Wichtig

Vergewissern Sie sich beim Ausführen der App mit dem Befehl dotnet watch (oder dotnet run; .NET CLI), dass die Befehlsshell im Ordner Server der Projektmappe geöffnet ist.

Wenn Sie die Startschaltfläche von Visual Studio zum Ausführen der App verwenden, vergewissern Sie sich, dass das Projekt MultipleBlazorApps.Server als Startprojekt festgelegt ist (hervorgehoben in Projektmappen-Explorer).

Statische Ressourcen

Wenn sich eine Ressource im wwwroot Ordner einer Client-App befindet, geben Sie den statischen Ressourcenanforderungspfad in Komponenten an:

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

Der {PATH AND FILE NAME}-Platzhalter ist der Pfad- und Dateiname unter wwwroot.

Beispielsweise ist die Quelle für ein Jeep-Bild (jeep-yj.png) im vehicle Ordner von wwwroot:

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

Unterstützung für Razor-Klassenbibliothek (RCL)

Fügen Sie die Razor Klassenbibliothek (RCL) zur Projektmappe als neues Projekt hinzu:

• Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Projektmappe, und wählen Sie Hinzufügen>Neues Projekt aus.
• Verwenden Sie die Razor Klassenbibliothek Projektvorlage um das Projekt zu erstellen. Die Beispiele in diesem Abschnitt verwenden den ProjektnamenComponentLibrary, welcher auch der Assemblyname der RCL ist. Aktivieren Sie nicht das Kontrollkästchen Seiten und Ansichten unterstützen.

Erstellen Sie für jede gehostete Blazor WebAssembly Client-App einen Projektverweis für das RCL-Projekt, indem Sie mit der rechten Maustaste auf jedes Clientprojekt in Projektmappen-Explorer klicken und Hinzufügen>Projektverweis auswählen.

Verwenden Sie Komponenten aus der RCL in den Client-Apps mithilfe eines der folgenden Ansätze:

• Platzieren Sie eine @using Anweisung oben in der Komponente für den RCL-Namespace, und fügen Sie die Razor Syntax für die Komponente hinzu. Im folgenden Beispiel handelt es sich um eine RCL mit dem Assemblynamen ComponentLibrary:

  @using ComponentLibrary
  
  ...
  
  <Component1 />
  

• Stellen Sie den RCL-Namespace zusammen mit der Syntax für die Razor Komponente bereit. Dieser Ansatz erfordert keine @using Anweisung oben in der Komponentendatei. Im folgenden Beispiel handelt es sich um eine RCL mit dem Assemblynamen ComponentLibrary:

  <ComponentLibrary.Component1 />
  

Hinweis

Eine @using Richtlinie kann auch jede _Import.razor Datei der Client-Apps eingefügt werden, was den RCL-Namespace für Komponenten in diesem Projekt global verfügbar macht.

Wenn sich irgendeine andere statische Ressource im wwwroot Ordner einer RCL befindet, verweisen Sie auf diese statische Ressource in der Client-App gemäß der Wiederverwendbare Razor Benutzeroberfläche in Klassenbibliotheken mit ASP.NET Core:

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

Der {PACKAGE ID} Platzhalter ist diePaket-IDder RCL. Die Paket-ID wird standardmäßig auf den Assemblynamen des Projekts festgelegt, wenn <PackageId> nicht in der Projektdatei angegeben ist. Der Platzhalter {PATH AND FILE NAME} entspricht dem Pfad und Dateinamen unter wwwroot.

Im folgenden Beispiel zeigt das Markup für ein Jeep-Bild (jeep-yj.png) im vehicle Ordner des RCL wwwroot-Ordners. Im folgenden Beispiel handelt es sich um eine RCL mit dem Assemblynamen ComponentLibrary:

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

Zusätzliche Ressourcen

• Nutzen von ASP.NET Core Razor-Komponenten über eine Razor-Klassenbibliothek (RCL)
• Wiederverwendbare -Benutzeroberfläche in Klassenbibliotheken mit ASP.NET CoreRazor
• Blazor CSS-Isolation in ASP.NET Core