Blazor

Udrul flere Blazor WebAssemblys i ASP.NET Core MVC

Dato for oprettelse af side :

miljø

Visual Studio
  • Visual Studio 2019
.NET
  • .NET 5.0

Først

Dette tip forudsætter din viden om "Running Blazor WebAssembly in ASP.NET Core MVC View", så hvis du ikke ved, hvordan du kører Blazor Assembly på ASP.NET Core MVC, skal du se den artikel.

Den foregående metode giver dig mulighed for kun at placere en Blazor Assembly, så dette Tip giver dig mulighed for at placere mere end en.

Opret to Blazor Assembly

Du kan sikre dig, at de to Blazor Assembly kører henholdsvis, så du kan gøre, hvad Blazor Assembly er. Gør det, så du kan se forskellen indtil videre. Her ændres farven på menuen til venstre for projektets oprindelige tilstand.

Udgiv hvert projekt, og forbered filen.

oprette et ASP.NET Core MVC-projekt

Dette er også baseret på tipene før til at oprette et projekt. Når du har oprettet dit projekt, skal du tilføje 'i Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Rettelse af _Layout.cshtml

Dette er det samme som sidste gang.

<!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>
  <!-- 以下同じなので省略 -->

Tilføj sider til to Blazor Assembly

Denne gang har vi to visninger til at vise hver Blazor Assembly.

HomeController tilføj to handlinger til . Igen gør serversiden ikke noget særligt, så bare returner visningen.

HomeController.cs

// 省略

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

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

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

Højreklik på handlingen for at tilføje en visning. Gå venligst efter to.

Visningen oprettes.

Først skal du oprette den første Blazor Assembly.

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>
}

Hvad der adskiller sig fra den foregående er, at indholdet af basismærket er <base href="/" /> lavet af . <base href="/Home/Blazor1/" />

Hvis du ændrer denne sti, kan Blazor Assembly referere til hver fil, f.eks. dll, som roden til denne sti i en relativ sti.

Den nuværende Blazor Assembly-specifikation angiver imidlertid, at controlleren og handlingen har den samme sti, for hvis URL'en bestemt af MVC-handlingen ikke stemmer overens med den relative sti fra værten for denne base, mislykkes Blazor-samlingen, når den indlæses.

Forresten påvirkes tilfældet med denne sti, så hvis URL'en automatisk er små bogstaver, skal den være små bogstaver.

Blazor2.cshtml rediger også. Blazor1.cshtml Bemærk, at det er noget andet end .

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>
}

Tilføj et link, så du kan navigere til blazors side.

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>

Opstart.cs Ændringer

Blazor WebAssemblys rutesti ændres, så aktivér den for hver sti.

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

Udrulning af Blazor WebAssembly

Sidste gang placerede jeg den offentliggjorte fil i wwwroot, som den var, men da jeg specificerede en sti til basistagget på hver side, opretter jeg en mappe med en lignende sti i wwwroot.

Kopier indholdet af wwwroot af den offentliggjorte fil til hver mappe. Som index.html før er det ikke nødvendigt.

henrettelse

Kør det for at sikre, at blazor WebAssembly på hver side fungerer korrekt.

ASP.NET Kør Blazor WebAssembly med en Core MVC-visning