Blazor

Bereitstellen mehrerer Blazor WebAssemblys in ASP.NET Core MVC

Erstellungsdatum der Seite :

Umwelt

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

Zuerst

Dieser Tipp setzt Ihr Wissen über "Ausführen von Blazor WebAssembly in ASP.NET Core MVC View" voraus, wenn Sie also nicht wissen, wie Blazor Assembly auf ASP.NET Core MVC ausgeführt wird, lesen Sie diesen Artikel.

Mit der vorherigen Methode können Sie nur eine Blazor-Baugruppe platzieren, sodass Sie mit diesen Tipps mehr als eine platzieren können.

Erstellen von zwei Blazor-Baugruppen

Sie können sicherstellen, dass die beiden Blazor Assembly jeweils laufen, so dass Sie tun können, was auch immer die Blazor Assembly ist. Bitte machen Sie es so, dass Sie den Unterschied vorerst sehen können. Hier wird die Farbe des linken Menüs für den Anfangszustand des Projekts geändert.

Veröffentlichen Sie jedes Projekt und bereiten Sie die Datei vor.

Erstellen eines ASP.NET Core MVC-Projekts

Dies basiert auch auf den Tipps davor, ein Projekt zu erstellen. Nachdem Sie Ihr Projekt erstellt haben, fügen Sie "in Microsoft.AspNetCore.Components.WebAssembly.Server NuGet" hinzu.

Beheben von _Layout.cshtml

Das ist das gleiche wie beim letzten Mal.

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

Hinzufügen von Seiten für zwei Blazor Assembly

Dieses Mal haben wir zwei Ansichten, um jede Blazor Assembly zu zeigen.

HomeController Fügen Sie zwei Aktionen zu hinzu. Auch hier macht die Serverseite nichts Besonderes, also geben Sie einfach die Ansicht zurück.

HomeController.cs

// 省略

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

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

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

Klicken Sie mit der rechten Maustaste auf die Aktion, um eine Ansicht hinzuzufügen. Bitte gehen Sie für zwei.

Die Ansicht wird erstellt.

Richten Sie zunächst die erste Blazor-Versammlung ein.

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

Der Unterschied zum vorherigen besteht darin, dass der Inhalt des Basis-Tags <base href="/" /> aus besteht. <base href="/Home/Blazor1/" />

Wenn Sie diesen Pfad ändern, kann Blazor Assembly auf jede Datei, z. B. dll, als Stamm dieses Pfads in einem relativen Pfad verweisen.

Die aktuelle Blazor-Assembly-Spezifikation gibt jedoch an, dass der Controller und die Aktion denselben Pfad haben, denn wenn die von der MVC-Aktion ermittelte URL nicht mit dem relativen Pfad vom Host dieser Basis übereinstimmt, schlägt die Blazor-Assembly beim Laden fehl.

Übrigens ist die Groß-/Kleinschreibung dieses Pfades betroffen, wenn also die URL automatisch klein geschrieben wird, sollte sie klein geschrieben werden.

Blazor2.cshtml bearbeiten sie auch. Blazor1.cshtml Bitte beachten Sie, dass es sich von unterscheidet.

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

Fügen Sie einen Link hinzu, damit Sie zur Seite von blazor navigieren können.

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>

Startup.cs Änderungen

Der Routenpfad von Blazor WebAssembly ändert sich, also aktivieren Sie ihn für jeden Pfad.

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

Blazor WebAssembly-Bereitstellung

Letztes Mal habe ich die veröffentlichte Datei in wwwroot so platziert, wie sie war, aber da ich auf jeder Seite einen Pfad für das Basis-Tag angegeben habe, erstelle ich einen Ordner mit einem ähnlichen Pfad in wwwroot.

Kopieren Sie den Inhalt des wwwroot der veröffentlichten Datei in jeden Ordner. Nach index.html wie vor ist es nicht erforderlich.

Ausführung

Führen Sie es aus, um sicherzustellen, dass blazor WebAssembly auf jeder Seite korrekt funktioniert.

ASP.NET Ausführen von Blazor WebAssembly mit einer MVC-Kernansicht