Meerdere gehoste ASP.NET Core-apps Blazor WebAssembly

In dit artikel wordt uitgelegd hoe u een gehoste Blazor WebAssembly app configureert voor het hosten van meerdere Blazor WebAssembly apps.

Configuratie

Selecteer de versie van dit artikel die overeenkomt met uw hostingvereisten, hosting van poorten/domeinen (bijvoorbeeld :5001/:5002 of firstapp.comsecondapp.com/) of routesubpadhosting (bijvoorbeeld /FirstApp en)./SecondApp

Voor de voorbeelden in dit artikel is aanvullende configuratie vereist voor:

• Toegang tot de apps rechtstreeks in de voorbeeldhostdomeinen en firstapp.comsecondapp.com.
• Certificaten voor de client-apps om TLS/HTTPS-beveiliging in te schakelen.
• De server-app configureren als een Razor Pagina-app voor de volgende functies:
  • Integratie van Razor onderdelen in pagina's of weergaven.
  • Prerenderingsonderdelen Razor .

De voorgaande configuraties vallen buiten het bereik van dit artikel. Zie de volgende bronnen voor meer informatie:

• ASP.NET Core hosten en implementeren
• HTTPS afdwingen in ASP.NET Core
• Integreer ASP.NET Core-onderdelen Razor met MVC of Razor Pages in gehoste Blazor WebAssembly oplossingen

Gebruik een bestaande gehoste Blazor WebAssemblyoplossing of maak een nieuwe gehoste Blazor WebAssembly oplossing op basis van de Blazor WebAssembly projectsjabloon door de optie door te -ho|--hosted geven als u de .NET CLI gebruikt of het selectievakje ASP.NET Core Hosted in Visual Studio inschakelt wanneer het project wordt gemaakt in de IDE.

Gebruik een map voor de oplossing met de naam MultipleBlazorApps en de naam van het project MultipleBlazorApps.

Maak een nieuwe map in de oplossing met de naam SecondClient. Voeg in de nieuwe map een tweede Blazor WebAssembly client-app toe met de naam MultipleBlazorApps.SecondClient. Voeg het project toe als een zelfstandige Blazor WebAssembly app. Als u een zelfstandige Blazor WebAssembly app wilt maken, geeft u de -ho|--hosted optie niet door als u de .NET CLI gebruikt of het selectievakje ASP.NET Core Hosted niet gebruikt als u Visual Studio gebruikt.

Breng de volgende wijzigingen aan in het MultipleBlazorApps.SecondClient project:

• Kopieer het FetchData onderdeel (Pages/FetchData.razor) van de Client/Pages map naar de SecondClient/Pages map. Deze stap is vereist omdat een zelfstandige Blazor WebAssembly app de controller van een Server project niet aanroept voor weergegevens. Hierbij wordt een statisch gegevensbestand gebruikt. Door het onderdeel naar het FetchData toegevoegde project te kopiëren, maakt de tweede client-app ook een web-API-aanroep naar de server-API voor weergegevens.
• Verwijder de SecondClient/wwwroot/sample-data map, omdat het weather.json bestand in de map niet wordt gebruikt.

In de volgende tabel worden de mappen en projectnamen van de oplossing beschreven nadat de map en MultipleBlazorApps.SecondClient het SecondClient project zijn toegevoegd.

Het MultipleBlazorApps.Server project dient de twee Blazor WebAssembly client-apps en biedt weergegevens aan de onderdelen van de client-apps FetchData via een MVC-controller. Optioneel kan het MultipleBlazorApps.Server project ook pagina's of weergaven leveren, als een traditionele Razor Pagina's- of MVC-app. De stappen voor het inschakelen van pagina's of weergaven worden verderop in dit artikel besproken.

Voeg in het projectbestand van de eerste client-app (MultipleBlazorApps.Client.csproj) een <StaticWebAssetBasePath> eigenschap toe aan een <PropertyGroup> met de waarde voor het instellen van FirstApp het basispad voor de statische assets van het project:

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

In het projectbestand van de MultipleBlazorApps.SecondClient app (MultipleBlazorApps.SecondClient.csproj):

• Voeg een <StaticWebAssetBasePath> eigenschap toe aan een <PropertyGroup> met de waarde :SecondApp

  <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
  

• Voeg een projectreferentie voor het MultipleBlazorApps.Shared project toe aan een <ItemGroup>:

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

Maak in het projectbestand van de server-app (Server/MultipleBlazorApps.Server.csproj) een projectreferentie voor de toegevoegde MultipleBlazorApps.SecondClient client-app in een <ItemGroup>:

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

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

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

Verwijder in het bestand van Program.cs de server-app de volgende code, die wordt weergegeven na de aanroep naar UseHttpsRedirection:

• Als u van plan bent pagina's of weergaven uit de server-app te leveren, verwijdert u de volgende coderegels:

  - app.UseBlazorFrameworkFiles();
  

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

• Als u van plan bent om de server-app alleen te gebruiken voor de Blazor WebAssembly client-apps, verwijdert u de volgende code:

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

  Statisch bestands-middleware op de plaats:

  app.UseStaticFiles();
  

Zie ASP.NET Statische kernbestanden Blazorvoor meer informatieUseStaticFiles.

Zie de volgende bronnen voor meer informatie over UseBlazorFrameworkFiles en MapFallbackToFile:

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

Aanvragen van de client-apps naar /WeatherForecast in de server-API zijn aan /FirstApp/WeatherForecast of /SecondApp/WeatherForecast afhankelijk van de client-app die de aanvraag doet. Daarom moeten de controllerroutes die weergegevens retourneren van de server-API een wijziging vereisen om de padsegmenten op te nemen.

Vervang in de weersvoorspellingscontroller van de server-app (Controllers/WeatherForecastController.cs) de bestaande route ([Route("[controller]")]) door WeatherForecastController de volgende routes, waarbij rekening wordt gehouden met de aanvraagpaden van de client:

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

Als u pagina's van de server-app wilt gebruiken, voegt u een IndexRazor pagina toe aan de Pages map van de server-app:

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

Als u MVC-weergaven van de server-app wilt gebruiken, voegt u een Index weergave en een Home controller toe:

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

Zie Integreren ASP.NET Core-onderdelen Razor met MVC of Razor Pages in gehoste Blazor WebAssembly oplossingen voor meer informatie over het gebruik van de Razor onderdelen van de client-apps in pagina's of weergaven van de server-app.

De app uitvoeren

Voer het MultipleBlazorApps.Server project uit:

Statische assets

Wanneer een asset zich in de map van wwwroot een client-app bevindt, geeft u het pad voor de statische assetaanvraag op in onderdelen:

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

De tijdelijke aanduiding {PATH AND FILE NAME} is het pad en de bestandsnaam onder wwwroot.

Bijvoorbeeld de bron voor een Jeep-afbeelding (jeep-yj.png) in de vehicle map van wwwroot:

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

Razor ondersteuning voor klassebibliotheek (RCL)

Voeg de Razor klassebibliotheek (RCL) als een nieuw project toe aan de oplossing:

• Klik met de rechtermuisknop op de oplossing in Solution Explorer en selecteerNieuw projecttoevoegen>.
• Gebruik de Razor projectsjabloon Class Library om het project te maken. In de voorbeelden in deze sectie wordt de projectnaam ComponentLibrarygebruikt. Dit is ook de assemblynaam van de RCL. Schakel het selectievakje Ondersteuningspagina's en weergaven niet in.

Maak voor elke gehoste Blazor WebAssembly client-app een projectverwijzing voor het RCL-project door met de rechtermuisknop op elk clientproject in Solution Explorer te klikken enProjectverwijzingtoevoegen> te selecteren.

Gebruik onderdelen van de RCL in de client-apps met een van de volgende methoden:

• Plaats boven aan het onderdeel een @using instructie voor de naamruimte van de RCL en voeg Razor syntaxis toe voor het onderdeel. Het volgende voorbeeld is voor een RCL met de assemblynaam ComponentLibrary:

  @using ComponentLibrary
  
  ...
  
  <Component1 />
  

• Geef de naamruimte van de RCL op, samen met de Razor syntaxis voor het onderdeel. Voor deze benadering is geen instructie boven aan het onderdeelbestand vereist @using . Het volgende voorbeeld is voor een RCL met de assemblynaam ComponentLibrary:

  <ComponentLibrary.Component1 />
  

Wanneer een andere statische asset zich in de wwwroot map van een RCL bevindt, verwijst u naar de statische asset in een client-app volgens de richtlijnen in de herbruikbare Razor gebruikersinterface in klassebibliotheken met ASP.NET Core:

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

De {PACKAGE ID} tijdelijke aanduiding is de pakket-id van de RCL. De pakket-id wordt standaard ingesteld op de assemblynaam van het project als <PackageId> niet is opgegeven in het projectbestand. De {PATH AND FILE NAME} tijdelijke aanduiding is het pad en de bestandsnaam onder wwwroot.

In het volgende voorbeeld ziet u de markeringen voor een Jeep-afbeelding (jeep-yj.png) in de vehicle map van de map van de RCL wwwroot . Het volgende voorbeeld is voor een RCL met de assemblynaam ComponentLibrary:

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

Aanvullende bronnen

• ASP.NET Core Razor-onderdelen uit een Razor klassebibliotheek (RCL) gebruiken
• Herbruikbare Razor gebruikersinterface in klassebibliotheken met ASP.NET Core
• ASP.NET Core Blazor CSS-isolatie