Blazor-Projektstruktur in ASP.NET Core

In diesem Artikel werden die Dateien und Ordner beschrieben, aus denen eine Blazor-App besteht, die aus einer Blazor-Projektvorlage generiert wurde.

Blazor Web App

Blazor Web App-Projektvorlage: blazor

Die Blazor Web App-Projektvorlage stellt einen einzigen Ausgangspunkt für die Verwendung von Razor-Komponenten (.razor) bereit, um jede Art von Web-UI zu erstellen, sowohl serverseitig als auch clientseitig gerendert. Sie kombiniert die Stärken der vorhandenen Blazor Server- und Blazor WebAssembly-Hostingmodelle mit serverseitigem Rendering, Streamingrendering, erweiterte Navigations- und Formularverarbeitung sowie die Möglichkeit, Interaktivität mithilfe von Blazor Server oder Blazor WebAssembly auf Basis von Komponenten hinzuzufügen.

Wenn sowohl clientseitiges Rendering (CSR) als auch interaktives serverseitiges Rendering (interaktiver SSR) bei der App-Erstellung ausgewählt werden, verwendet die Projektvorlage den interaktiven automatischen Rendermodus. Der Renderingmodus „automatisch“ verwendet zunächst interaktives SSR, während das App Bundle für .NET und die Runtime im Browser heruntergeladen werden. Nachdem die .NET WebAssembly-Runtime aktiviert wurde, wechselt der Rendermodus zu CSR.

Die Blazor Web App-Vorlage ermöglicht sowohl statisches als auch interaktives serverseitiges Rendering in einem einzigen Projekt. Wenn Sie außerdem das interaktive WebAssembly-Rendering aktivieren, enthält das Projekt ein zusätzliches Clientprojekt (.Client) für Ihre WebAssembly-basierten Komponenten. Die Buildausgabe des Clientprojekts wird im Browser heruntergeladen und auf dem Client ausgeführt. Alle Komponenten, die den Rendermodus „Interaktives WebAssembly“ oder „Interaktiv Automatisch“ verwenden, müssen im .Client-Projekt enthalten sein.

Die Ordnerstruktur von Komponenten im .Client-Projekt unterscheidet sich von der des Hauptprojekts der Blazor Web App, da das Hauptprojekt ein ASP.NET Core-Standardprojekt ist. Das Hauptprojekt muss noch andere Ressourcen für ASP.NET Core-Projekte berücksichtigen, die nicht im Zusammenhang mit Blazor stehen. Sie können jede beliebige Mechanik-Ordnerstruktur im .Client-Projekt verwenden. Sie können auch das Komponentenordnerlayout des Hauptprojekts im .Client-Projekt spiegeln. Beachten Sie, dass Namespaces möglicherweise Anpassungen für Objekte wie Layoutdateien erfordern, wenn Sie Komponenten in Ordner verschieben, die nicht von der Projektvorlage verwendet werden.

Weitere Informationen zu Komponenten und Rendermodi finden Sie in den Artikeln ASP.NET Core Razor Komponenten und ASP.NET Core Blazor Rendermodi.

Je nach dem bei der Erstellung der App ausgewählten interaktiven Rendering-Modus befindet sich der Ordner Layout entweder im Server-Projekt im Ordner Components oder im Stammverzeichnis des Projekts .Client. Der -Ordner enthält die folgenden Layoutkomponenten und Stylesheets:

• Die MainLayout-Komponente (MainLayout.razor) ist die Layout-Komponente der App.
• Das MainLayout.razor.css ist das Stylesheet für das Hauptlayout der App.
• Die NavMenu-Komponente (NavMenu.razor) implementiert die Navigation in der Seitenleiste. Die Komponente enthält NavLink Komponenten (NavLink), die Navigationslinks zu anderen Razor Komponenten darstellen. Die NavLink-Komponente gibt für Benutzer*innen an, welche Komponente derzeit angezeigt wird.
• Das NavMenu.razor.css ist das Stylesheet für das Navigationsmenü der App.

Die Routes-Komponente (Routes.razor) befindet sich entweder im Server-Projekt oder im .Client-Projekt und legt das Routing mit der Router-Komponente fest. Bei clientseitigen interaktiven Komponenten fängt die Router-Komponente die Browsernavigation ab und rendert die Seite, die der angeforderten Adresse entspricht.

Der Ordner Components des Serverprojekts enthält die serverseitigen Razor Komponenten der App. Gemeinsam genutzte Komponenten befinden sich häufig im Stammverzeichnis des Ordners Components, während Layout- und Seitenkomponenten in der Regel in Ordnern innerhalb des Ordners Components abgelegt werden.

Der Components/Pages-Ordner des Server-Projekts enthält die routbaren serverseitigen Razor-Komponenten der App. Die Route für jede Seite wird mithilfe der @page-Anweisung angegeben.

Die App-Komponente (App.razor) ist die Stammkomponente der App mit HTML <head>-Markup, der Routes-Komponente und dem Blazor<script>-Tag. Die Stammkomponente ist die erste Komponente, die die App lädt.

Eine _Imports.razor-Datei in jedem der Server- und .Client-Projekte enthält gängige Razor-Direktiven für Razor-Komponenten beider Projekte, wie @using-Direktiven für Namespaces.

Der Ordner Properties des Serverprojekts enthält die Konfiguration der Entwicklungsumgebung in der Datei launchSettings.json.

Hinweis

Das http-Profil steht in der launchSettings.json-Datei vor dem https-Profil. Wenn eine App mit der .NET-CLI ausgeführt wird, wird die App auf einem HTTP-Endpunkt ausgeführt, da das erste gefundene Profil http lautet. Die Profilreihenfolge erleichtert für Linux- und macOS-Benutzer*innen den Übergang zu HTTPS. Wenn Sie es bevorzugen, die App mit der .NET CLI zu starten, ohne die Option -lp https oder --launch-profile https an den Befehl dotnet watch (oder dotnet run) übergeben zu müssen, fügen Sie das https-Profil einfach über dem http-Profil in die Datei ein.

Der wwwroot-Ordner des Server-Projekts ist der Webstamm-Ordner für das Server-Projekt, der die öffentlichen statischen Assets der App enthält.

Die Program.cs-Datei des Serverprojekts ist der Einstiegspunkt des Projekts, der den Host der ASP.NET Core-Webanwendung festlegt und die Startlogik der App enthält, einschließlich Dienstregistrierungen, Konfiguration, Protokollierung und Pipeline für die Anforderungsverarbeitung:

• Dienste für Razor-Komponenten werden durch Aufrufen von AddRazorComponents hinzugefügt. AddInteractiveServerComponents fügt Dienste hinzu, um das Rendern interaktiver Serverkomponenten zu unterstützen. AddInteractiveWebAssemblyComponents fügt Dienste hinzu, um das Rendern interaktiver WebAssembly-Komponenten zu unterstützen.
• MapRazorComponents ermittelt die verfügbaren Komponenten und gibt die Stammkomponente für die App (die erste geladene Komponente) an. Dabei handelt es sich standardmäßig um die App-Komponente (App.razor). AddInteractiveServerRenderMode konfiguriert das interaktive serverseitige Rendering (interaktive SSR) für die App. AddInteractiveWebAssemblyRenderMode konfiguriert den Interaktiven WebAssembly-Rendermodus für die App.

Die App-Einstellungsdateien (appsettings.Development.json, appsettings.json) im Server- oder .Client-Projekt stellen Konfigurationseinstellungen bereit. Im Serverprojekt befinden sich die Einstellungsdateien im Stammverzeichnis des Projekts. Im Projekt .Client werden Einstellungsdateien aus dem Ordner Webstamm, wwwroot, verwendet.

Im .Client-Projekt:

• Der Ordner Pages enthält routingfähige clientseitige Razor Komponenten. Die Route für jede Seite wird mithilfe der @page-Anweisung angegeben.

• Der wwwroot-Ordner ist der Webstamm-Ordner für das .Client-Projekt, der die öffentlichen statischen Assets der App enthält.

• Die Program.cs-Datei ist der Einstiegspunkt des Projekts, der den WebAssembly-Host einrichtet und die Startlogik des Projekts enthält, einschließlich der Dienstregistrierungen, der Konfiguration, der Protokollierung und der Pipeline für die Anfrageverarbeitung.

Zusätzliche Dateien und Ordner können in einer App angezeigt werden, die aus einer Blazor Web App-Projektvorlage erstellt wurde, wenn zusätzliche Optionen konfiguriert sind. Beispielsweise umfasst das Erstellen einer App mit ASP.NET Core Identity zusätzliche Ressourcen zur Authentifizierung und Autorisierung.

Eigenständige Blazor WebAssembly-App

Eigenständige Blazor WebAssembly-Projektvorlage: blazorwasm

Die Blazor WebAssembly-Vorlage erstellt die anfänglichen Dateien und die Verzeichnisstruktur für eine eigenständige Blazor WebAssembly-App:

• Wenn die Vorlage blazorwasm verwendet wird, wird die App mit Folgendem aufgefüllt:
  • Demonstrationscode für eine Weather-Komponente, die Daten aus der statischen Ressource weather.json lädt, und für die Benutzerinteraktion mit einer Counter-Komponente.
  • Bootstrap für das Front-End-Toolkit.
• Die blazorwasm-Vorlage kann auch ohne Beispielseiten und Formatierung generiert werden.

Projektstruktur:

• Layout-Ordner: Hierin befinden sich die folgenden Layoutkomponenten und Stylesheets:

  • MainLayout-Komponente (MainLayout.razor): Die Layoutkomponente der App.
  • MainLayout.razor.css: Stylesheet für das Hauptlayout der App.
  • NavMenu-Komponente (NavMenu.razor): Diese Komponente implementiert die Navigation in der Seitenleiste. Sie schließt die NavLink-Komponente (NavLink) ein, die Navigationslinks zu anderen Razor-Komponenten rendert. Die NavLink-Komponente gibt automatisch einen ausgewählten Zustand an, wenn die Komponente geladen wird, sodass der Benutzer nachvollziehen kann, welche Komponente derzeit angezeigt wird.
  • NavMenu.razor.css: Stylesheet für das Navigationsmenü der App.

• Ordner Pages: Enthält die routingfähigen Razor-Komponenten der Blazor-App (.razor). Die Route für jede Seite wird mithilfe der @page-Anweisung angegeben. Die Vorlage besteht aus den folgenden Komponenten:

  • Counter-Komponente (Counter.razor): Implementiert die Zählerseite.
  • Index-Komponente (Index.razor): Diese Komponente implementiert die Home-Seite.
  • Weather-Komponente (Weather.razor): Implementiert die Wetterseite

• _Imports.razor: Enthält gängige Razor-Anweisungen, die in die Komponenten der App (.razor) eingefügt werden sollen, z. B. @using-Anweisungen für Namespaces.

• App.razor: Hierbei handelt es sich um die Stammkomponente der App, die das clientseitige Routing mithilfe der Router-Komponente einrichtet. Die Router-Komponente fängt die Browsernavigation ab und rendert die Seite, die der angeforderten Adresse entspricht.

• Ordner Properties: Enthält die Konfiguration der Entwicklungsumgebung in der Datei launchSettings.json.

  Hinweis

  Das http-Profil steht in der launchSettings.json-Datei vor dem https-Profil. Wenn eine App mit der .NET-CLI ausgeführt wird, wird die App auf einem HTTP-Endpunkt ausgeführt, da das erste gefundene Profil http lautet. Die Profilreihenfolge erleichtert für Linux- und macOS-Benutzer*innen den Übergang zu HTTPS. Wenn Sie es bevorzugen, die App mit der .NET CLI zu starten, ohne die Option -lp https oder --launch-profile https an den Befehl dotnet watch (oder dotnet run) übergeben zu müssen, fügen Sie das https-Profil einfach über dem http-Profil in die Datei ein.

• wwwroot-Ordner: Dabei handelt es sich um das Webstammverzeichnis für die App, das die öffentlichen statischen Ressourcen der App enthält, einschließlich der appsettings.json-Datei sowie Dateien mit den Umgebungseinstellungen der App für die Konfigurationseinstellungen und die Beispielwetterdaten (sample-data/weather.json). Die Webseite index.html ist die Stammseite der App, die als HTML-Seite implementiert ist:

  • Wenn eine Seite der App zum ersten Mal angefordert wird, wird diese Seite gerendert und in der Antwort zurückgegeben.
  • Die Seite gibt an, wo die App-Stammkomponente gerendert wird. Die Komponente wird an der Position des div-DOM-Elements mit einem id-Objekt von app (<div id="app">Loading...</div>) gerendert.

• Program.cs: Der Einstiegspunkt der App, der den WebAssembly-Host einrichtet:

  • Die App-Komponente ist die Stammkomponente der App. Die App-Komponente wird als das div-DOM-Element mit einem id-Objekt von app (<div id="app">Loading...</div> in wwwroot/index.html) für die Stammkomponentensammlung (builder.RootComponents.Add<App>("#app")) angegeben.
  • Dienste werden hinzugefügt und konfiguriert (z. B. builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Zusätzliche Dateien und Ordner können in einer App angezeigt werden, die aus einer Blazor WebAssembly-Projektvorlage erstellt wurde, wenn zusätzliche Optionen konfiguriert sind. Beispielsweise umfasst das Erstellen einer App mit ASP.NET Core Identity zusätzliche Ressourcen zur Authentifizierung und Autorisierung.

Speicherort des Blazor-Skripts

Das Skript Blazor wird in einer eingebetteten Ressource im freigegebenen ASP.NET Core-Framework bereitgestellt.

In einer Blazor Web App befindet sich das Blazor-Skript in der Datei Components/App.razor:

<script src="_framework/blazor.web.js"></script>

In einer Blazor Server-App befindet sich das Blazor-Skript in der Datei Pages/_Host.cshtml:

<script src="_framework/blazor.server.js"></script>

In einer Blazor WebAssembly-App befindet sich der Blazor-Skriptinhalt in der Datei wwwroot/index.html:

<script src="_framework/blazor.webassembly.js"></script>

Speicherort der Inhalte <head> und <body>

In einer Blazor Web App befinden sich die Inhalte <head> und <body> in der Datei Components/App.razor.

In einer Blazor WebAssembly-App befinden sich die Inhalte <head> und <body> in der Datei wwwroot/index.html.

Zusätzliche Ressourcen

• Tools für Blazor in ASP.NET Core
• Blazor-Hostingmodelle in ASP.NET Core
• Minimal-APIs – Übersicht
• GitHub-Repository mit Blazor-Beispielen (dotnet/blazor-samples) (Informationen zum Herunterladen)