Blazor

Implementeer meerdere Blazor WebAssemblys in ASP.NET Core MVC

Aanmaakdatum van pagina :

milieu

Visual Studio
  • Visual Studio 2019
.NET
  • .NET 5,0

Eerst

Deze tips veronderstellen uw kennis van "Blazor WebAssembly uitvoeren in ASP.NET Core MVC-weergave", dus als u niet weet hoe u Blazor Assembly op ASP.NET Core MVC moet uitvoeren, raadpleegt u dat artikel.

Met de vorige methode kunt u slechts één Blazor-assemblage plaatsen, dus met deze tips kunt u er meer dan één plaatsen.

Maak twee Blazor Assembly

U kunt ervoor zorgen dat de twee Blazor Assembly respectievelijk draaien, zodat u kunt doen wat de Blazor Assembly is. Maak het alsjeblieft zo dat je voorlopig het verschil kunt zien. Hier wordt de kleur van het linkermenu gewijzigd voor de beginstatus van het project.

Publiceer elk project en bereid het bestand voor.

een ASP.NET Core MVC-project maken

Dit is ook gebaseerd op de tips vooraf om een project te maken. Nadat u uw project hebt gemaakt, voegt u 'in Microsoft.AspNetCore.Components.WebAssembly.Server NuGet' toe.

_Layout.cshtml herstellen

Dit is hetzelfde als de vorige keer.

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

Pagina's toevoegen voor two Blazor Assembly

Deze keer hebben we twee weergaven om elke Blazor Assembly te laten zien.

HomeController voeg twee acties toe aan . Nogmaals, de serverzijde doet niets in het bijzonder, dus retourneer gewoon de weergave.

Homecontroller.cs

// 省略

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

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

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

Klik met de rechtermuisknop op de actie om een weergave toe te voegen. Ga alsjeblieft voor twee.

De weergave wordt gemaakt.

Zet eerst de eerste Blazor Assembly op.

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

Wat anders is dan de vorige, is dat de inhoud van de basistag is <base href="/" /> gemaakt van . <base href="/Home/Blazor1/" />

Als u dit pad wijzigt, kan Blazor Assembly naar elk bestand, zoals dll, verwijzen als de hoofdmap van dit pad in een relatief pad.

De huidige Blazor Assembly-specificatie specificeert echter dat de controller en actie hetzelfde pad hebben, want als de URL die wordt bepaald door de MVC-actie niet overeenkomt met het relatieve pad van de host van deze basis, zal de Blazor Assembly mislukken bij het laden.

Overigens wordt het geval van dit pad beïnvloed, dus als de URL automatisch kleine letters is, moet deze kleine letters zijn.

Blazor2.cshtml bewerken ook. Blazor1.cshtml Houd er rekening mee dat het iets anders is dan .

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

Voeg een link toe zodat u naar de pagina van Blazor kunt navigeren.

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 wijzigingen

Het routepad van Blazor WebAssembly verandert, dus schakel het in voor elk pad.

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

Blazor WebAssembly Implementatie

De vorige keer heb ik het gepubliceerde bestand in wwwroot geplaatst zoals het was, maar omdat ik op elke pagina een pad voor de basistag heb opgegeven, maak ik een map met een vergelijkbaar pad in wwwroot.

Kopieer de inhoud van de wwwroot van het gepubliceerde bestand naar elke map. Net als index.html voorheen is het niet vereist.

uitvoering

Voer het uit om ervoor te zorgen dat blazor WebAssembly op elke pagina correct werkt.

ASP.NET Voer Blazor WebAssembly uit met een Core MVC-weergave