Blazor

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

Diese Seite wurde aktualisiert :
Erstellungsdatum der Seite :

Umwelt

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

Zuerst

Da Blazor WebAssembly eine Client-Technologie ist, spielt es keine Rolle, wie der Webserver funktioniert. Um WebAssembly für Clients bereitzustellen, ist jedoch mindestens eine serverseitige Konfiguration erforderlich. Lassen Sie uns das Serverprogramm als ASP.NET Core MVC in Blazor WebAssembly ausführen.

Erstellen einer Blazor WebAssembly

Jetzt müssen wir nur noch sicherstellen, dass Blazor WebAssembly funktioniert, also lassen wir es so, wie es war, als wir das Projekt erstellt haben.

Der Projektname oder der Projektmappenname ist willkürlich.

Der Bildschirm "ASP.NET gehostet auf Core", der im zusätzlichen Informationsbildschirm angezeigt wird, kann auch als MVC funktionieren, aber das resultierende Projekt befindet sich in der Nähe des API-Servers, daher werden wir es hier nicht überprüfen.

Veröffentlichen von Blazor WebAssembly

Veröffentlichen Sie Dateien, um Blazor WebAssembly in einem ASP.NET Core MVC-Projekt bereitzustellen.

Klicken Sie mit der rechten Maustaste auf das Projekt, und wählen Sie Veröffentlichen aus.

Wählen Sie Ordner aus.

Behalten Sie das Standardveröffentlichungsziel bei.

Der Bildschirm "Veröffentlichen" wird angezeigt. Sie können verschiedene Einstellungen festlegen, aber im Moment bleibt die Schaltfläche "Veröffentlichen" als Standard.

Warten Sie, bis die Veröffentlichung beginnt und erfolgreich abgeschlossen ist. Beachten Sie, dass lange Ordnerpfade möglicherweise fehlschlagen.

Sie können überprüfen, ob die Datei im angegebenen Ordner erstellt wurde. Wenn es als relativer Pfad angegeben wird, ist das Ziel relativ zum Projekt.

Erstellen eines ASP.NET MVC-Kernprojekts

Erstellen Sie als Nächstes ein ASP.NET Core MVC-Projekt. Das separate Öffnen von Visual Studio kann mühsam sein, also erstellen Sie es in der Blazor WebAssembly-Projektmappe. Da die beiden Projekte diesmal nicht verknüpft sind, gibt es auch dann kein Problem, wenn sie separat angelegt werden.

Der Projektname ist optional. Die anderen Einstellungen werden auf ihren Standardeinstellungen belassen.

Da die Blazor-Seite davon ausgeht, dass die Entwicklung abgeschlossen ist ASP.NET ist das Projekt auf der Kern-MVC-Seite ein Startup.

Erstellen von Ansichten für Blazor Assembly

Dieser Bereich ändert sich je nach dem Projekt, das Sie tatsächlich erstellen, also ändern Sie ihn bitte entsprechend diesem Projekt. Hier werden wir es basierend auf der Konfiguration des Beispielprojekts ändern.

Grundsätzlich sollte es so geändert werden, dass es dem ähnelt, das beim Veröffentlichen der index.html Blazor-Assembly erstellt wurde.

Reparieren von _Layout.cshtml

Ich möchte auf das CSS der Blazor-Assembly verweisen, damit ich es direkt in schreiben kann. _Layout.cshtml Wir möchten, dass es so weit wie möglich nur auf die Zielseite angewendet wird, damit wir es durch Hinzufügen erweitern können, so RenderSectionAsync dass Links zum CSS auf jeder Seite geschrieben werden können.

<!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 einer Seite für die Blazor-Assembly

Fügen Sie eine dedizierte Seite hinzu, um die Blazor-Versammlung anzuzeigen. ASP.NET Normale Seitenhinzufügung und -prozedur in Core MVC sind identisch.

HomeController Fügen Sie die folgenden Aktionen zu hinzu. Die Serverseite macht nichts Bestimmtes, also gibt sie nur die Ansicht zurück.

HomeController.cs

// 省略

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

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

Klicken Sie mit der rechten Maustaste auf die Aktion, um eine Ansicht hinzuzufügen.

Es gibt nichts, an das man binden kann, also fügen Sie es so hinzu, wie es ist.

Die Ansicht wird erstellt.

Unter Verwendung der zum Zeitpunkt der Veröffentlichung der index.html Blazor-Versammlung generierten Versammlung wird darauf verwiesen, wir werden sie wie folgt neu erstellen.

Blazor.cshtml

@{
  ViewData["Title"] = "Blazor";
}
@section Styles {
  <base href="/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample.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 zu der Seite in 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>

@* 追加 *@
<a asp-action="Blazor">Blazor</a>

Microsoft.AspNetCore.Components.WebAssembly.Server-Referenz hinzufügen

Startup.cs Sie müssen den notwendigen Code nicht selbst schreiben, aber der Einfachheit halber erhalten Sie NuGet Microsoft.AspNetCore.Components.WebAssembly.Server .

Klicken Sie mit der rechten Maustaste auf Abhängigkeiten, und wählen Sie NuGet-Pakete verwalten aus.

Wählen Sie die Registerkarte Verwaltung aus, und geben Sie Microsoft.AspNetCore.Components.WebAssembly.Server in das Suchfeld ein.

Ein Paket mit demselben Namen wird angezeigt, also installieren Sie es.

Stellen Sie sicher, dass das Paket hinzugefügt wurde.

Änderungen beim Startup.cs

app.UseHttpsRedirection(); Fügen Sie den folgenden Code in die Zeile nach der Zeile ein:

app.UseBlazorFrameworkFiles();

Bereitstellen von Blazor WebAssembly

Grundsätzlich können Sie den veröffentlichten Blazor WebAssembly wwwroot-Ordner so ablegen, wie er sich im Ordner wwwroot von ASP.NEt Core befindet, aber Sie sollten ihn löschen,index.html da er nicht mehr benötigt wird. Entscheiden Sie auch, da synchronisiert istfavicon.ico , welches Symbol verwendet werden soll.

Wenn Sie bei der Freigabe mit PWA Dateien (z. B. index.html) im Ordner wwwroot ausgeschlossen haben, Sie müssen in einem Texteditor, auch im Ordner wwwroot, öffnen und die Datensätze in service-worker-assets.js der ausgeschlossenen Datei löschen. Andernfalls erhalten Sie möglicherweise eine interne Fehlermeldung, wenn Sie einen Webbildschirm öffnen.

Wenn Sie eine Blazor-App veröffentlichen, müssen Sie dies nicht manuell tun, indem Sie unnötige Dateien aus Ihrem Projekt ausschließen.

Bei PWAs treten interne Fehler auf, wenn sie sich nicht in einer https-Umgebung befinden. Es kann nicht als PWA installiert werden.

Ausführungsbestätigung

ASP.NET Führen Sie das MVC-Kernprojekt aus. Besuchen Sie die Blazor-Seite und überprüfen Sie, ob das Layout der Blazor-Versammlung auf der Seite angezeigt wird. Wählen Sie das linke Menü aus, und überprüfen Sie, ob jedes Feature funktioniert.

Informationen zu URLs

Wenn Sie auf das linke Menü Blazor Assembly klicken, das auf der Seite angezeigt wird, werden Sie feststellen, dass sich die URL ändert. Dieses Verhalten folgt nicht dem URL-Verhalten, das von ASP.NET Core MVC erwartet wird, daher sollte die Blazor-Assembly die URL nach Möglichkeit vorzugsweise so erstellen, dass sich die URL nicht ändert.

Wenn Sie eine Blazor-Seite öffnen

Wenn Sie auf das Menü "Zähler" klicken

Änderungsprotokoll

2022/7/12
  • Punkte hinzugefügt, die beim Ausschließen unnötiger Dateien in der Dateiplatzierung der veröffentlichten Blazor-App zu beachten sind.
2022/3/30
  • Erstausgabe
In Blazor WebAssembly erstellte Apps in IIS platzieren
Bereitstellen mehrerer Blazor WebAssemblys in ASP.NET Core MVC