Blazor

Distribuera flera Blazor WebAssemblys i ASP.NET Core MVC

Datum för skapande av sida :

miljö

Visuell studio
  • Visual Studio 2019
.NET
  • .NET 5.0

Först

Detta tips förutsätter din kunskap om "Köra Blazor WebAssembly i ASP.NET Core MVC View", så om du inte vet hur du kör Blazor Assembly på ASP.NET Core MVC, se den artikeln.

Den tidigare metoden låter dig bara placera en Blazor Assembly, så detta tips låter dig placera mer än en.

Skapa två Blazor-sammansättningar

Ni kan se till att de två Blazorförsamlingen kandiderar, så att ni kan göra vad Blazorförsamlingen än är. Gör det så att du kan se skillnaden för tillfället. Här ändras färgen på den vänstra menyn för projektets ursprungliga tillstånd.

Publicera varje projekt och förbered filen.

skapa ett ASP.NET Core MVC-projekt

Detta baseras också på tipsen innan för att skapa ett projekt. När du har skapat projektet lägger du till 'i Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.'

Åtgärda _Layout.cshtml

Det är samma som förra gången.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"] - AspNetCoreMvc</title>
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="~/css/site.css" />
  @* 追加 *@
  @await RenderSectionAsync("Styles", required: false)
</head>
<body>
  <!-- 以下同じなので省略 -->

Lägga till sidor för två Blazor-monteringar

Den här gången har vi två åsikter att visa varje Blazor-församling.

HomeController lägga till två åtgärder i . Återigen gör serversidan ingenting särskilt, så returnera bara vyn.

HomeController.cs

// 省略

namespace AspNetCoreMvc.Controllers
{
  public class HomeController : Controller
  {
    // 省略

    // 追加
    public IActionResult Blazor1()
    {
      return View();
    }

    public IActionResult Blazor2()
    {
      return View();
    }
  }
}

Högerklicka på åtgärden om du vill lägga till en vy. Var snäll och satsa på två.

Vyn skapas.

Inrätta först den första Blazor-församlingen.

Blazor1.cshtml

@{
  ViewData["Title"] = "Blazor1";
}
@section Styles {
  <base href="/Home/Blazor1/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample1.styles.css" rel="stylesheet" />
}

<div id="app">Loading...</div>

<div id="blazor-error-ui">
  An unhandled error has occurred.
  <a href="" class="reload">Reload</a>
  <a class="dismiss">🗙</a>
</div>

@section Scripts {
  <script src="_framework/blazor.webassembly.js"></script>
}

Det som skiljer sig från den föregående är att innehållet i bastaggen är <base href="/" /> gjord av . <base href="/Home/Blazor1/" />

Om du ändrar den här sökvägen kan Blazor Assembly referera till varje fil, till exempel dll, som roten till den här sökvägen i en relativ sökväg.

Den aktuella Blazor Assembly-specifikationen anger dock att styrenheten och åtgärden har samma sökväg, för om url:en som bestäms av MVC-åtgärden inte matchar den relativa sökvägen från värden för den här basen, kommer Blazor-sammansättningen att misslyckas vid inläsning.

Förresten påverkas fallet med den här sökvägen, så om URL: en automatiskt är gemener bör den vara gemener.

Blazor2.cshtml redigera också. Blazor1.cshtml Observera att det skiljer sig något från .

Blazor2.cshtml

@{
  ViewData["Title"] = "Blazor2";
}
@section Styles {
  <base href="/Home/Blazor2/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample2.styles.css" rel="stylesheet" />
}

<div id="app">Loading...</div>

<div id="blazor-error-ui">
  An unhandled error has occurred.
  <a href="" class="reload">Reload</a>
  <a class="dismiss">🗙</a>
</div>

@section Scripts {
  <script src="_framework/blazor.webassembly.js"></script>
}

Lägg till en länk så att du kan navigera till Blazors sida.

index.cshtml

@{
  ViewData["Title"] = "Home Page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>
  <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@* 追加 *@
<ul>
  <li><a asp-action="Blazor1">Blazor1</a></li>
  <li><a asp-action="Blazor2">Blazor2</a></li>
</ul>

Start.cs ändringar

Blazor WebAssemblys vägsökväg ändras, så aktivera den för varje sökväg.

app.UseBlazorFrameworkFiles("/Home/Blazor1");
app.UseBlazorFrameworkFiles("/Home/Blazor2");

Blazor WebAssembly-distribution

Förra gången placerade jag den publicerade filen på wwwroot som den var, men eftersom jag angav en sökväg för bastaggen på varje sida skapar jag en mapp med en liknande sökväg på wwwroot.

Kopiera innehållet på wwwroot i den publicerade filen till varje mapp. Som index.html tidigare är det inte nödvändigt.

avrättning

Kör den för att se till att blazor WebAssembly på varje sida fungerar korrekt.

ASP.NET Kör Blazor WebAssembly med en Core MVC-vy