Flera värdbaserade ASP.NET Core-appar Blazor WebAssembly

Den här artikeln beskriver hur du konfigurerar en värdbaserad Blazor WebAssembly app som värd för flera Blazor WebAssembly appar.

Konfiguration

Välj den version av den här artikeln som matchar dina värdkrav, antingen port/domänvärd (till exempel :5001/:5002 eller firstapp.com/secondapp.com) eller vägvärd med underkatalog (till exempel /FirstApp och /SecondApp).

Exemplen som visas i den här artikeln kräver ytterligare konfiguration för:

• Åtkomst till apparna direkt på exempelvärddomänerna firstapp.com och secondapp.com.
• Certifikat för klientapparna för att aktivera TLS/HTTPS-säkerhet.
• Konfigurera serverappen som en Razor Pages-app för följande funktioner:
  • Integrering av Razor komponenter i sidor eller vyer.
  • Förrenderar Razor-komponenter.

Ovanstående konfigurationer ligger utanför omfånget för den här artikeln. Mer information finns i följande resurser:

• Värdskap och distribution av ASP.NET Core
• Aktivera HTTPS i ASP.NET Core
• Integrera ASP.NET Core-komponenter Razor med MVC eller Razor Sidor i värdbaserade Blazor WebAssembly lösningar

Använd en befintlig värdbaserad Blazor WebAssemblylösning eller skapa en ny värdbaserad Blazor WebAssembly lösning från projektmallen Blazor WebAssembly genom att skicka -ho|--hosted alternativet om du använder .NET CLI eller markerar kryssrutan ASP.NET Core Hosted i Visual Studio när projektet skapas i IDE.

Använd en mapp för lösningen med namnet MultipleBlazorApps och ge projektet MultipleBlazorAppsnamnet .

Skapa en ny mapp i lösningen med namnet SecondClient. I den nya mappen lägger du till en andra Blazor WebAssembly klientapp med namnet MultipleBlazorApps.SecondClient. Lägg till projektet som en fristående Blazor WebAssembly app. Om du vill skapa en fristående Blazor WebAssembly app ska du inte godkänna -ho|--hosted alternativet om du använder .NET CLI eller inte använder kryssrutan ASP.NET Core Hosted om du använder Visual Studio.

Gör följande ändringar i MultipleBlazorApps.SecondClient projektet:

• Kopiera komponenten FetchData (Pages/FetchData.razor) från Client/Pages mappen till SecondClient/Pages mappen. Det här steget krävs eftersom en fristående Blazor WebAssembly app inte anropar ett Server projekts kontrollant för väderdata. Den använder en statisk datafil. Genom att kopiera komponenten FetchData till det tillagda projektet gör den andra klientappen även ett webb-API-anrop till server-API:et för väderdata.
• SecondClient/wwwroot/sample-data Ta bort mappen eftersom weather.json filen i mappen inte används.

I följande tabell beskrivs lösningens mappar och projektnamn när SecondClient mappen och MultipleBlazorApps.SecondClient projektet har lagts till.

Projektet MultipleBlazorApps.Server hanterar de två Blazor WebAssembly klientapparna och tillhandahåller väderdata till klientapparnas FetchData komponenter via en MVC-styrenhet. MultipleBlazorApps.Server Alternativt kan projektet även hantera sidor eller vyer som en traditionell Razor pages- eller MVC-app. Steg för att aktivera betjänande sidor eller vyer beskrivs senare i den här artikeln.

I den första klientappens projektfil (MultipleBlazorApps.Client.csproj) lägger du till en <StaticWebAssetBasePath> egenskap i en <PropertyGroup> med värdet FirstApp för för att ange bassökvägen för projektets statiska tillgångar:

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

MultipleBlazorApps.SecondClient I appens projektfil (MultipleBlazorApps.SecondClient.csproj):

• Lägg till en <StaticWebAssetBasePath> egenskap i en <PropertyGroup> med värdet SecondApp:

  <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
  

• Lägg till en projektreferens för MultipleBlazorApps.Shared-projektet till en <ItemGroup>.

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

I serverappens projektfil (Server/MultipleBlazorApps.Server.csproj) skapar du en projektreferens för den tillagda MultipleBlazorApps.SecondClient klientappen i en <ItemGroup>:

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

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

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

Ta bort följande kod i serverappens Program.cs fil, som visas efter anropet till UseHttpsRedirection:

• Om du planerar att visa sidor eller vyer från serverappen tar du bort följande kodrader:

  - app.UseBlazorFrameworkFiles();
  

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

• Om du planerar att serverappen endast ska hantera klientapparna Blazor WebAssembly tar du bort följande kod:

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

  Lämna Static File Middleware på plats:

  app.UseStaticFiles();
  

Mer information om UseStaticFilesfinns i ASP.NET Statiska kärnfilerBlazor.

Mer information om UseBlazorFrameworkFiles och MapFallbackToFilefinns i följande resurser:

• Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.UseBlazorFrameworkFiles (referenskälla)
• Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile (referenskälla)

Begäranden från klientapparna till /WeatherForecast i server-API:et är antingen till /FirstApp/WeatherForecast eller /SecondApp/WeatherForecast beroende på vilken klientapp som gör begäran. Därför kräver kontrollvägarna som returnerar väderdata från serverns API en ändring för att inkludera segmenten i sökvägen.

I serverappens väderprognoskontrollant (Controllers/WeatherForecastController.cs) ersätter du den befintliga vägen ([Route("[controller]")]) till WeatherForecastController med följande vägar, som tar hänsyn till sökvägarna för klientbegäran:

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

Om du planerar att hantera sidor från serverappen lägger du till en IndexRazor sida i Pages serverappens mapp:

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

Om du planerar att hantera MVC-vyer från serverappen lägger du till en Index vy och en Home kontrollant:

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

Mer information om hur du använder komponenterna Razor från någon av klientapparna på sidor eller vyer i serverappen finns i Integrera ASP.NET Core-komponenter Razor med MVC eller Razor Sidor i värdbaserade Blazor WebAssembly lösningar.

Kör appen

MultipleBlazorApps.Server Kör projektet:

Statiska tillgångar

När en tillgång finns i en klientapps wwwroot mapp anger du sökvägen för begäran om statiska tillgångar i komponenter:

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

Platshållaren {PATH AND FILE NAME} är sökvägen och filnamnet under wwwroot.

Till exempel källan för en Jeep-avbildning jeep-yj.png(vehicle) i wwwroot mappen för :

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

Razor stöd för klassbibliotek (RCL)

Razor Lägg till klassbiblioteket (RCL) i lösningen som ett nytt projekt:

• Högerklicka på lösningen i Solution Explorer och välj Lägg till>nytt projekt.
• Använd projektmallen Razor Klassbibliotek för att skapa projektet. Exemplen i det här avsnittet använder projektnamnet ComponentLibrary, som också är RCL:s sammansättningsnamn. Markera inte kryssrutan Supportsidor och vyer.

För varje värdbaserad Blazor WebAssembly klientapp skapar du en projektreferens för RCL-projektet genom att högerklicka på varje klientprojekt i Solution Explorer och välja Lägg till>projektreferens.

Använd komponenter från RCL i klientapparna med någon av följande metoder:

• Placera ett @using-direktiv överst på komponenten för RCL:s namnområde och lägg till Razor-syntax för komponenten. Följande exempel är för en RCL med sammansättningsnamnet ComponentLibrary:

  @using ComponentLibrary
  
  ...
  
  <Component1 />
  

• Ange RCL:s namnområde tillsammans med syntaxen Razor för komponenten. Den här metoden kräver inte något @using direktiv överst i komponentfilen. Följande exempel är för en RCL med sammansättningsnamnet ComponentLibrary:

  <ComponentLibrary.Component1 />
  

När någon annan statisk tillgång finns i mappen för wwwroot en RCL refererar du till den statiska tillgången i en klientapp enligt vägledningen i Återanvändbart Razor användargränssnitt i klassbibliotek med ASP.NET Core:

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

Platshållaren {PACKAGE ID} är RCL:s paket-ID. Paket-ID:t är som standard projektets sammansättningsnamn om <PackageId> inte anges i projektfilen. Platshållaren {PATH AND FILE NAME} är sökväg och filnamn under wwwroot.

I följande exempel visas markup för en Jeep-avbildning (jeep-yj.png) i mappen vehicle i RCL:s wwwroot-mapp. Följande exempel är för en RCL med sammansättningsnamnet ComponentLibrary:

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

Ytterligare resurser

• Förbruka ASP.NET Core Razor-komponenter från ett Razor-klassbibliotek (RCL)
• Återanvändbart användargränssnitt för Razor i klassbibliotek med ASP.NET Core
• ASP.NET Core Blazor CSS-isolering