Blazor

Implementați mai multe Blazor WebAssemblys în ASP.NET Core MVC

Data creării paginii :

mediu

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

La început

This Tips assumes your knowledge of "Running Blazor WebAssembly in ASP.NET Core MVC View", so if you don't know how to run Blazor Assembly on ASP.NET Core MVC, see that article.

Metoda anterioară vă permite să plasați o singură adunare Blazor, astfel încât acest Sfaturi vă permite să plasați mai multe.

Creați două Adunarea Blazor

Vă puteți asigura că cele două Adunarea Blazor se execută, respectiv, astfel încât să puteți face orice Adunarea Blazor este. Vă rugăm să o faceți astfel încât să puteți vedea diferența pentru moment. Aici, culoarea meniului din stânga este schimbată pentru starea inițială a proiectului.

Publicați fiecare proiect și pregătiți fișierul.

creați un proiect MVC ASP.NET Core

Acest lucru se bazează, de asemenea, pe sfaturile înainte de a crea un proiect. După ce ați creat proiectul, adăugați "în Microsoft.AspNetCore.Components.WebAssembly.Server NuGet".

Fix _Layout.cshtml

Acest lucru este la fel ca data trecută.

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

Adăugarea paginilor pentru două Adunarea Blazor

De data aceasta, vom avea două puncte de vedere pentru a arăta fiecare Adunare Blazor.

HomeController adăugați două acțiuni la . Din nou, partea de server nu face nimic în special, așa că trebuie doar să returnați vizualizarea.

HomeControler.cs

// 省略

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

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

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

Faceți clic dreapta pe acțiune pentru a adăuga o vizualizare. Vă rugăm să mergeți pentru două.

Vizualizarea este creată.

În primul rând, a înființat prima Adunare Blazor.

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

Ceea ce este diferit de cel anterior este că conținutul etichetei de bază este <base href="/" /> format din . <base href="/Home/Blazor1/" />

Dacă modificați această cale, Blazor assembly va putea face referire la fiecare fișier, cum ar fi dll, ca rădăcina acestei căi într-o cale relativă.

Cu toate acestea, specificațiile curente blazor asamblare specifică faptul că controlerul și acțiunea au aceeași cale, deoarece dacă URL-ul determinat de acțiunea MVC nu se potrivește cu calea relativă de la gazda acestei baze, Adunarea Blazor nu va reuși la încărcare.

Apropo, cazul acestei căi este afectat, deci dacă URL-ul este automat cu litere mici, ar trebui să fie cu litere mici.

Blazor2.cshtml edita, de asemenea. Blazor1.cshtml Vă rugăm să rețineți că este unele diferite de .

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

Adăugați un link, astfel încât să puteți naviga la pagina blazorului.

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>

Modificări .cs la pornire

Calea de traseu a lui Blazor WebAssembly se schimbă, așa că activați-o pentru fiecare cale.

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

Blazor WebAssembly Implementare

Ultima dată, am plasat fișierul publicat în wwwroot așa cum a fost, dar din moment ce am specificat o cale pentru eticheta de bază pe fiecare pagină, creez un folder cu o cale similară în wwwroot.

Copiați conținutul wwwroot-ului fișierului publicat în fiecare folder. Ca și index.html înainte, nu este necesar.

execuție

Rulați-l pentru a vă asigura că blazor WebAssembly pe fiecare pagină funcționează corect.

ASP.NET Rulați Blazor WebAssembly cu o vizualizare Core MVC