Mehrere gehostete ASP.NET Core-Apps Blazor WebAssembly

In diesem Artikel wird erläutert, wie Sie eine gehostete Blazor WebAssembly App so konfigurieren, dass mehrere Blazor WebAssembly Apps gehostet werden.

Konfiguration

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

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

In den folgenden Beispielen:

• Der Projektname der gehosteten Blazor WebAssembly App befindet sich MultipleBlazorApps in einem Ordner mit dem Namen MultipleBlazorApps.
• Die drei Projekte in der Projektmappe, bevor eine zweite Client-App hinzugefügt wird, befinden sich MultipleBlazorApps.Client im Client Ordner, MultipleBlazorApps.Server im Server Ordner und MultipleBlazorApps.Shared im Shared Ordner.
• Die erste (erste) Client-App ist das Standardclientprojekt der Lösung, die aus der Blazor WebAssembly Projektvorlage erstellt wurde.
• Eine zweite Client-App wird der Lösung MultipleBlazorApps.SecondClient in einem Ordner mit dem Namen SecondClienthinzugefügt.
• Optional kann das Serverprojekt (MultipleBlazorApps.Server) Seiten oder Ansichten als Razor Seiten- oder MVC-App bereitstellen.
• Auf die erste Client-App kann in einem Browser am Port 5001 oder mit einem Host von firstapp.comzugegriffen werden. Auf die zweite Client-App kann in einem Browser in Port 5002 oder mit einem Host von secondapp.comzugegriffen werden.

Mit der aktuellen Auswahl behandelt dieser Artikel das Routen-Unterpfadhosting (z. B /FirstApp . und /SecondApp).

In den folgenden Beispielen:

• Der Projektname der gehosteten Blazor WebAssembly App befindet sich MultipleBlazorApps in einem Ordner mit dem Namen MultipleBlazorApps.
• Die drei Projekte in der Projektmappe, bevor eine zweite Client-App hinzugefügt wird, befinden sich MultipleBlazorApps.Client im Client Ordner, MultipleBlazorApps.Server im Server Ordner und MultipleBlazorApps.Shared im Shared Ordner.
• Die erste (erste) Client-App ist das Standardclientprojekt der Lösung, die aus der Blazor WebAssembly Projektvorlage erstellt wurde.
• Eine zweite Client-App wird der Lösung MultipleBlazorApps.SecondClient in einem Ordner mit dem Namen SecondClienthinzugefügt.
• Optional kann das Serverprojekt (MultipleBlazorApps.Server) Seiten oder Ansichten als formale Razor Seiten oder MVC-App bereitstellen.
• Beide Client-Apps verwenden den Standardport, der durch die Datei des MultipleBlazorApps.ServerProperties/launchSettings.json Projekts in seinem applicationUrl Wert definiert ist. Auf die erste Client-App kann in einem Browser im /FirstApp Unterpfad zugegriffen werden. Auf die zweite Client-App kann in einem Browser im /SecondApp Unterpfad zugegriffen werden.

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

• Zugreifen auf die Apps direkt an den Beispielhostdomänen firstapp.com und secondapp.com.
• Zertifikate für die Client-Apps, um TLS/HTTPS-Sicherheit zu aktivieren.
• Konfigurieren der Server-App als Razor Seiten-App für die folgenden Features:
  • Integration von Razor Komponenten in Seiten oder Ansichten.
  • Prerendering von Razor Komponenten.

Die vorstehenden Konfigurationen liegen außerhalb des Umfangs dieses Artikels. Weitere Informationen finden Sie in den folgenden Ressourcen:

• Hosten und Bereitstellen von ASP.NET Core
• 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 WebAssemblyLösung , oder erstellen Sie eine neue gehostete Blazor WebAssembly Lösung aus der Blazor WebAssembly Projektvorlage, indem Sie die -ho|--hosted Option übergeben, wenn Sie .NET CLI verwenden oder das Kontrollkästchen ASP.NET Core Hosted in Visual Studio auswählen, wenn das Projekt in der IDE erstellt wird.

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

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

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

• Kopieren Sie die FetchData Komponente (Pages/FetchData.razor) aus dem Client/Pages Ordner in den SecondClient/Pages Ordner. Dieser Schritt ist erforderlich, da eine eigenständige Blazor WebAssembly App den Controller eines Server Projekts für Wetterdaten nicht aufruft, es wird eine statische Datendatei verwendet. 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 durch.
• Löschen Sie den SecondClient/wwwroot/sample-data Ordner, da die weather.json Datei im Ordner nicht verwendet wird.

In der folgenden Tabelle werden die Ordner und Projektnamen der Lösung nach dem Hinzufügen des Ordners und SecondClient des MultipleBlazorApps.SecondClient Projekts beschrieben.

Physischer Ordner	Projektname	Description
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 "Freigegebene Ressourcen"

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

Hinweis

Die Demonstration in diesem Artikel verwendet statische Webobjektpfadnamen FirstApp für das MultipleBlazorApps.Client Projekt und SecondApp für das MultipleBlazorApps.SecondClient Projekt. Die Namen "FirstApp" und "SecondApp" dienen lediglich zu Demonstrationszwecken. Andere Namen sind zulässig, um die Client-Apps zu unterscheiden, zApp1/App2. B. , ,Client1/Client2 , 1/2oder ein ähnliches Benennungsschema.

Wenn Sie Anforderungen an die Client-Apps über einen Port oder eine Domäne weiterleiten, werden "FirstApp" und "SecondApp" intern verwendet, um Anforderungen weiterzuleiten und Antworten für statische Objekte bereitzustellen und in der Adressleiste des Browsers nicht zu sehen.

Hinweis

Die Demonstration in diesem Artikel verwendet statische Webobjektpfadnamen FirstApp für das MultipleBlazorApps.Client Projekt und SecondApp für das MultipleBlazorApps.SecondClient Projekt. Die Namen "FirstApp" und "SecondApp" dienen lediglich zu Demonstrationszwecken. Andere Namen sind zulässig, um die Client-Apps zu unterscheiden, zApp1/App2. B. , ,Client1/Client2 , 1/2oder ein ähnliches Benennungsschema.

"FirstApp" und "SecondApp" werden auch in der Adressleiste des Browsers angezeigt, da Anforderungen mit diesen 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 ist lediglich für die Einberufung in den Beispielen dieses Artikels vorgesehen.

Fügen Sie in der Projektdatei der ersten Client-App eineMultipleBlazorApps.Client.csproj<StaticWebAssetBasePath> Eigenschaft zu einem <PropertyGroup> Wert hinzu, um FirstApp den Basispfad für die statischen Objekte des Projekts festzulegen:

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

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

• Hinzufügen einer <StaticWebAssetBasePath> Eigenschaft zu einem <PropertyGroup> Mit dem Wert von SecondApp:

  <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
  

• Fügen Sie einen Projektverweis für das MultipleBlazorApps.Shared Projekt zu einem <ItemGroup>:

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

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

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

Konfigurieren Sie in der Datei der Server-App Properties/launchSettings.json das applicationUrlKestrel Profil (MultipleBlazorApps.Server) für den Zugriff auf die Client-Apps an den Ports 5001 und 5002. Wenn Sie Ihre lokale Umgebung für die Verwendung der Beispieldomänen konfigurieren, können URLs für applicationUrl die Verwendung der Ports verwendet firstapp.com und secondapp.com nicht verwendet werden.

Hinweis

Die Verwendung 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 auf die Client-Apps zugreifen können. firstapp.comsecondapp.com In Produktionsszenarien besteht eine typische Konfiguration darin, Unterdomänen zu verwenden, um die Client-Apps zu unterscheiden.

Beispiel:

• Die Ports werden aus der Konfiguration dieser Demonstration gelöscht.
• Die Hosts werden so geändert, dass Unterdomänen verwendet werden, z www.contoso.com . B. für Websitebesucher und admin.contoso.com für Administratoren.
• Zusätzliche Hosts können für zusätzliche Client-Apps eingeschlossen werden, und mindestens ein weiterer Host ist erforderlich, wenn die Server-App auch eine Razor Seiten- oder MVC-App ist, die Seiten oder Ansichten bedient.

Wenn Sie beabsichtigen, Seiten oder Ansichten aus der Server-App zu bedienen, verwenden Sie die folgende applicationUrl Einstellung in der Properties/launchSettings.json Datei, die den folgenden Zugriff zulässt:

• Optional antwortet die Razor Seiten- oder MVC-App (MultipleBlazorApps.Server Projekt) auf Anforderungen an Port 5000.
• Antworten auf Anforderungen für den ersten Client (MultipleBlazorApps.Client Projekt) befinden sich am Port 5001.
• Antworten auf Anforderungen für den zweiten Client (MultipleBlazorApps.SecondClient Projekt) befinden sich am Port 5002.

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

Wenn Sie nicht planen, dass die Server-App Seiten oder Ansichten bedient und nur die Blazor WebAssembly Client-Apps bedient, verwenden Sie die folgende Einstellung, die den folgenden Zugriff zulässt:

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

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

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

• Wenn Sie seiten oder Ansichten aus der Server-App bereitstellen möchten, 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");
  

  Statische Datei-Middleware an Ort und Stelle lassen:

  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 ist oder der Anforderungshost entweder firstapp.com für die erste Client-App oder secondapp.com für die zweite Client-App ist.

  Hinweis

  Die Verwendung der Hosts (firstapp.com/secondapp.com) auf einem lokalen System mit einem lokalen Browser erfordert zusätzliche Konfiguration, die über den Umfang dieses Artikels hinausgeht. Für lokale Tests dieses Szenarios empfehlen wir die Verwendung von Ports. Typische Produktions-Apps sind für die Verwendung von Unterdomänen konfiguriert, z www.contoso.com . B. 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, antwortet die App auf Anforderungen an alle Hosts, die im folgenden Code genannt werden.

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

  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 sich der Anforderungsunterpfad für die erste Client-App oder /FirstApp für die zweite Client-App befindet/SecondApp.

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

  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 der ersten Client-App index.html (Client/wwwroot/index.html) den <base> Tagwert, um den Unterpfad widerzuspiegeln. Der nachfolgende Schrägstrich ist erforderlich:

  <base href="/FirstApp/" />
  

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

  <base href="/SecondApp/" />
  

Weitere Informationen UseStaticFilesfinden Sie unter ASP.NET core Blazor static files.

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

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

Hinweis

Dokumentationslinks zur .NET-Referenzquelle laden in der Regel die Standard-Branch des Repositorys, die die aktuelle Entwicklung der nächsten Version 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 der Client-Apps an /WeatherForecast die Server-API sind entweder an /FirstApp/WeatherForecast oder /SecondApp/WeatherForecast abhängig davon, welche Client-App die Anforderung sendet. Daher erfordern die Controllerrouten, die Wetterdaten aus der Server-API zurückgeben, eine Änderung, um die Pfadsegmente einzuschließen.

Ersetzen Sie im Wettervorhersagecontroller der Server-App (Controllers/WeatherForecastController.cs) die vorhandene Route ([Route("[controller]")]) durch WeatherForecastController die folgenden Routen, die die Clientanforderungspfade berücksichtigen:

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

Wenn Sie Seiten aus der Server-App bereitstellen möchten, fügen Sie dem Index Ordner der Server-App eine RazorPages 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 minimales Beispiel ausschließlich für Demonstrationszwecke. Wenn für die App zusätzliche Razor Seitenressourcen erforderlich sind, z. B. ein Layout, Formatvorlagen, Skripts und Importe, rufen Sie sie aus einer App ab, die aus der Razor Projektvorlage "Seiten" erstellt wurde. Weitere Informationen finden Sie unter Razor Pages-Architektur und -Konzepte in ASP.NET Core.

Wenn Sie MVC-Ansichten aus der Server-App bereitstellen möchten, 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 vorstehende Index Ansicht ist ein minimales Beispiel ausschließlich für Demonstrationszwecke. Wenn für die App zusätzliche MVC-Ressourcen erforderlich sind, z. B. ein Layout, Formatvorlagen, Skripts und Importe, rufen Sie sie aus einer App ab, die aus 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.

App starten

Führen Sie das MultipleBlazorApps.Server Projekt aus:

• Greifen Sie auf die erste Client-App zu https://localhost:5001.
• Greifen Sie auf die hinzugefügte Client-App zu.https://localhost:5002
• Wenn die Server-App für die Bereitstellung von Seiten oder Ansichten konfiguriert ist, greifen Sie auf die Index Seite oder Ansicht zu https://localhost:5000.

• Greifen Sie auf die erste Client-App zu https://localhost:{DEFAULT PORT}/FirstApp.
• Greifen Sie auf die hinzugefügte Client-App zu.https://localhost:{DEFAULT PORT}/SecondApp
• Wenn die Server-App für die Bereitstellung von Seiten oder Ansichten konfiguriert ist, greifen Sie auf die Index Seite oder Ansicht zu https://localhost:{DEFAULT PORT}.

Im vorherigen Beispiel-URLs ist der Platzhalter der {DEFAULT PORT} Standardport, der von der Datei des MultipleBlazorApps.ServerProperties/launchSettings.json Projekts in seinem applicationUrl Wert definiert wird.

Von Bedeutung

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

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

Statische Ressourcen

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

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

Der Platzhalter {PATH AND FILE NAME} entspricht dem Pfad und Dateinamen unter wwwroot.

Beispielsweise 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" />

Razor Unterstützung von Klassenbibliotheken (RCL)

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

• Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Projektmappe, und wählen Sie "> hinzufügen" aus.
• Verwenden Sie die Razor Projektvorlage "Klassenbibliothek" , um das Projekt zu erstellen. In den Beispielen in diesem Abschnitt wird der Projektname ComponentLibraryverwendet, der auch der Assemblyname der RCL ist. Aktivieren Sie nicht das Kontrollkästchen "Supportseiten und Ansichten ".

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

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

• Platzieren Sie eine @using Direktive am anfang der Komponente für den RCL-Namespace, und fügen Sie eine Syntax für die Komponente hinzu Razor . Das folgende Beispiel ist für eine RCL mit dem Assemblynamen ComponentLibrary:

  @using ComponentLibrary
  
  ...
  
  <Component1 />
  

• Stellen Sie den RCL-Namespace zusammen mit der Razor Syntax für die Komponente bereit. Für diesen Ansatz ist keine Direktive am Anfang der Komponentendatei erforderlich @using . Das folgende Beispiel ist für eine RCL mit dem Assemblynamen ComponentLibrary:

  <ComponentLibrary.Component1 />
  

Hinweis

Eine @using Direktive kann auch in die Datei jeder Client-App _Import.razor eingefügt werden, wodurch der RCL-Namespace global für Komponenten in diesem Projekt verfügbar macht.

Wenn sich eine andere statische Ressource im wwwroot Ordner einer RCL befindet, verweisen Sie auf die statische Ressource in einer Client-App gemäß der Anleitung in wiederverwendbaren Razor Ui in Klassenbibliotheken mit ASP.NET Core:

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

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

Das folgende Beispiel zeigt das Markup für ein Jeep-Bild (jeep-yj.png) im vehicle Ordner des Ordners des Ordners wwwroot der RCL. Das folgende Beispiel ist für eine RCL mit dem Assemblynamen ComponentLibrary:

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

Weitere Ressourcen

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