Blazor-Projektstruktur in ASP.NET Core

  • Artikel

Hinweis

Dies ist nicht die neueste Version dieses Artikels. Die aktuelle Version finden Sie in der .NET 9-Version dieses Artikels.

Warnung

Diese Version von ASP.NET Core wird nicht mehr unterstützt. Weitere Informationen finden Sie in der Supportrichtlinie für .NET und .NET Core. Informationen zum aktuellen Release finden Sie in der .NET 8-Version dieses Artikels.

Wichtig

Diese Informationen beziehen sich auf ein Vorabversionsprodukt, das vor der kommerziellen Freigabe möglicherweise noch wesentlichen Änderungen unterliegt. Microsoft gibt keine Garantie, weder ausdrücklich noch impliziert, hinsichtlich der hier bereitgestellten Informationen.

Die aktuelle Version finden Sie in der .NET 9-Version dieses Artikels.

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:

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.

Blazor Server

Blazor Server-Projektvorlagen: blazorserver, blazorserver-empty

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

  • Wenn die Vorlage blazorserver verwendet wird, wird die App mit Folgendem aufgefüllt:
    • Demonstrationscode für eine FetchData-Komponente, die Daten eines Wettervorhersagediensts (WeatherForecastService) lädt, und die Interaktion des Benutzers mit einer Counter-Komponente.
    • Bootstrap für das Front-End-Toolkit.
  • Bei Verwendung der Vorlage blazorserver-empty wird die App ohne Demonstrationscode und Bootstrap erstellt.

Projektstruktur:

  • Data-Ordner: Dieser Ordner enthält die WeatherForecast-Klasse und Implementierung von WeatherForecastService, die Beispielwetterdaten für die FetchData-Komponente der App bereitstellt.

  • Ordner Pages: Dieser Ordner enthält die routingfähigen RazorKomponenten (.razor) der Blazor-App und die Razor-Stammseite einer Blazor Server-App. Die Route für jede Seite wird mithilfe der @page-Anweisung angegeben. Die Vorlage besteht aus den folgenden Teilen:

    • _Host.cshtml: Die Stammseite der App, die als Razor-Seite implementiert ist:
      • Wenn eine Seite der App zum ersten Mal angefordert wird, wird diese Seite gerendert und in der Antwort zurückgegeben.
      • Die Hostseite gibt an, wo die App-Stammkomponente (App.razor) gerendert wird.
    • Counter-Komponente (Counter.razor): Implementiert die Zählerseite.
    • Error-Komponente (Error.razor): Wird gerendert, wenn in der App eine nicht behandelte Ausnahme auftritt.
    • FetchData-Komponente (FetchData.razor): Implementiert die Seite zum Abrufen von Daten.
    • Index-Komponente (Index.razor): Diese Komponente implementiert die Home-Seite.

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

  • Shared-Ordner: Enthält die folgenden freigegebenen Komponenten 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.
    • SurveyPrompt-Komponente (SurveyPrompt.razor): Blazor-Umfragekomponente.

  • Ordner wwwroot: Der Web Root-Ordner für die App, der die öffentlichen statischen Ressourcen der App enthält.

  • _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.

  • appsettings.json und Dateien mit den Umgebungseinstellungen der App: Geben Sie Konfigurationseinstellungen für die App an.

  • Program.cs: Dies ist der Einstiegspunkt der App, der den ASP.NET Core-Host einrichtet und die Startlogik der App enthält, einschließlich Dienstregistrierungen und der Pipelinekonfiguration für die Anforderungsverarbeitung:

    • Hiermit werden die DI-Dienste (Dependency Injection) der App angegeben. Dienste werden durch Aufruf von AddServerSideBlazor hinzugefügt, und WeatherForecastService wird dem Dienstcontainer hinzugefügt, damit die FetchData-Beispielkomponente darauf zugreifen kann.
    • Konfiguriert die Pipeline für die Anforderungsverarbeitung der App:
      • MapBlazorHub wird aufgerufen, um einen Endpunkt für die Echtzeitverbindung mit dem Browser einzurichten. Die Verbindung wird mit SignalR hergestellt. Dabei handelt es sich um ein Framework zum Hinzufügen von Echtzeitwebfunktionen zu Apps.
      • MapFallbackToPage("/_Host") wird aufgerufen, um die Stammseite der App (Pages/_Host.cshtml) einzurichten und die Navigation zu aktivieren.

Zusätzliche Dateien und Ordner können in einer App angezeigt werden, die aus einer Blazor Server-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.

Blazor Server-Projektvorlage: blazorserver

Die Blazor Server-Vorlage erstellt die anfänglichen Dateien und die Verzeichnisstruktur für eine Blazor Server-App. Die App wird mit Demonstrationscode für eine FetchData-Komponente, die Daten aus dem registrierten Dienst WeatherForecastService lädt, und für die Benutzerinteraktion mit einer Counter-Komponente aufgefüllt.

  • Data-Ordner: Dieser Ordner enthält die WeatherForecast-Klasse und Implementierung von WeatherForecastService, die Beispielwetterdaten für die FetchData-Komponente der App bereitstellt.

  • Ordner Pages: Dieser Ordner enthält die routingfähigen RazorKomponenten (.razor) der Blazor-App und die Razor-Stammseite einer Blazor Server-App. Die Route für jede Seite wird mithilfe der @page-Anweisung angegeben. Die Vorlage besteht aus den folgenden Teilen:

    • _Host.cshtml: Die Stammseite der App, die als Razor-Seite implementiert ist:
      • Wenn eine Seite der App zum ersten Mal angefordert wird, wird diese Seite gerendert und in der Antwort zurückgegeben.
      • Die Hostseite gibt an, wo die App-Stammkomponente (App.razor) gerendert wird.
    • _Layout.cshtml: Die Layoutseite für die Stammseite _Host.cshtml der App.
    • Counter-Komponente (Counter.razor): Implementiert die Zählerseite.
    • Error-Komponente (Error.razor): Wird gerendert, wenn in der App eine nicht behandelte Ausnahme auftritt.
    • FetchData-Komponente (FetchData.razor): Implementiert die Seite zum Abrufen von Daten.
    • Index-Komponente (Index.razor): Diese Komponente implementiert die Home-Seite.

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

  • Shared-Ordner: Enthält die folgenden freigegebenen Komponenten 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.
    • SurveyPrompt-Komponente (SurveyPrompt.razor): Blazor-Umfragekomponente.

  • Ordner wwwroot: Der Web Root-Ordner für die App, der die öffentlichen statischen Ressourcen der App enthält.

  • _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.

  • appsettings.json und Dateien mit den Umgebungseinstellungen der App: Geben Sie Konfigurationseinstellungen für die App an.

  • Program.cs: Dies ist der Einstiegspunkt der App, der den ASP.NET Core-Host einrichtet und die Startlogik der App enthält, einschließlich Dienstregistrierungen und der Pipelinekonfiguration für die Anforderungsverarbeitung:

    • Hiermit werden die DI-Dienste (Dependency Injection) der App angegeben. Dienste werden durch Aufruf von AddServerSideBlazor hinzugefügt, und WeatherForecastService wird dem Dienstcontainer hinzugefügt, damit die FetchData-Beispielkomponente darauf zugreifen kann.
    • Konfiguriert die Pipeline für die Anforderungsverarbeitung der App:
      • MapBlazorHub wird aufgerufen, um einen Endpunkt für die Echtzeitverbindung mit dem Browser einzurichten. Die Verbindung wird mit SignalR hergestellt. Dabei handelt es sich um ein Framework zum Hinzufügen von Echtzeitwebfunktionen zu Apps.
      • MapFallbackToPage("/_Host") wird aufgerufen, um die Stammseite der App (Pages/_Host.cshtml) einzurichten und die Navigation zu aktivieren.

Zusätzliche Dateien und Ordner können in einer App angezeigt werden, die aus einer Blazor Server-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.

Blazor Server-Projektvorlage: blazorserver

Die Blazor Server-Vorlage erstellt die anfänglichen Dateien und die Verzeichnisstruktur für eine Blazor Server-App. Die App wird mit Demonstrationscode für eine FetchData-Komponente, die Daten aus dem registrierten Dienst WeatherForecastService lädt, und für die Benutzerinteraktion mit einer Counter-Komponente aufgefüllt.

  • Data-Ordner: Dieser Ordner enthält die WeatherForecast-Klasse und Implementierung von WeatherForecastService, die Beispielwetterdaten für die FetchData-Komponente der App bereitstellt.

  • Ordner Pages: Dieser Ordner enthält die routingfähigen RazorKomponenten (.razor) der Blazor-App und die Razor-Stammseite einer Blazor Server-App. Die Route für jede Seite wird mithilfe der @page-Anweisung angegeben. Die Vorlage besteht aus den folgenden Teilen:

    • _Host.cshtml: Die Stammseite der App, die als Razor-Seite implementiert ist:
      • Wenn eine Seite der App zum ersten Mal angefordert wird, wird diese Seite gerendert und in der Antwort zurückgegeben.
      • Die Hostseite gibt an, wo die App-Stammkomponente (App.razor) gerendert wird.
    • Counter-Komponente (Counter.razor): Implementiert die Zählerseite.
    • Error-Komponente (Error.razor): Wird gerendert, wenn in der App eine nicht behandelte Ausnahme auftritt.
    • FetchData-Komponente (FetchData.razor): Implementiert die Seite zum Abrufen von Daten.
    • Index-Komponente (Index.razor): Diese Komponente implementiert die Home-Seite.

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

  • Shared-Ordner: Enthält die folgenden freigegebenen Komponenten 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.
    • SurveyPrompt-Komponente (SurveyPrompt.razor): Blazor-Umfragekomponente.

  • Ordner wwwroot: Der Web Root-Ordner für die App, der die öffentlichen statischen Ressourcen der App enthält.

  • _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.

  • appsettings.json und Dateien mit den Umgebungseinstellungen der App: Geben Sie Konfigurationseinstellungen für die App an.

  • Program.cs: Der Einstiegspunkt der App, der den ASP.NET Core-Host einrichtet.

  • Startup.cs: Diese Datei enthält die Startlogik der App. Die Startup-Klasse definiert zwei Methoden:

    • ConfigureServices: Diese Methode konfiguriert die DI-Dienste (Dependency Injection) der App. Dienste werden durch Aufruf von AddServerSideBlazor hinzugefügt, und WeatherForecastService wird dem Dienstcontainer hinzugefügt, damit die FetchData-Beispielkomponente darauf zugreifen kann.
    • Configure: Konfiguriert die Pipeline für die Anforderungsverarbeitung der App:
      • MapBlazorHub wird aufgerufen, um einen Endpunkt für die Echtzeitverbindung mit dem Browser einzurichten. Die Verbindung wird mit SignalR hergestellt. Dabei handelt es sich um ein Framework zum Hinzufügen von Echtzeitwebfunktionen zu Apps.
      • MapFallbackToPage("/_Host") wird aufgerufen, um die Stammseite der App (Pages/_Host.cshtml) einzurichten und die Navigation zu aktivieren.

Zusätzliche Dateien und Ordner können in einer App angezeigt werden, die aus einer Blazor Server-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.

Blazor Server-Projektvorlage: blazorserver

Die Blazor Server-Vorlage erstellt die anfänglichen Dateien und die Verzeichnisstruktur für eine Blazor Server-App. Die App wird mit Demonstrationscode für eine FetchData-Komponente, die Daten aus dem registrierten Dienst WeatherForecastService lädt, und für die Benutzerinteraktion mit einer Counter-Komponente aufgefüllt.

  • Data-Ordner: Dieser Ordner enthält die WeatherForecast-Klasse und Implementierung von WeatherForecastService, die Beispielwetterdaten für die FetchData-Komponente der App bereitstellt.

  • Ordner Pages: Dieser Ordner enthält die routingfähigen RazorKomponenten (.razor) der Blazor-App und die Razor-Stammseite einer Blazor Server-App. Die Route für jede Seite wird mithilfe der @page-Anweisung angegeben. Die Vorlage besteht aus den folgenden Teilen:

    • _Host.cshtml: Die Stammseite der App, die als Razor-Seite implementiert ist:
      • Wenn eine Seite der App zum ersten Mal angefordert wird, wird diese Seite gerendert und in der Antwort zurückgegeben.
      • Die Hostseite gibt an, wo die App-Stammkomponente (App.razor) gerendert wird.
    • Counter-Komponente (Counter.razor): Implementiert die Zählerseite.
    • Error-Komponente (Error.razor): Wird gerendert, wenn in der App eine nicht behandelte Ausnahme auftritt.
    • FetchData-Komponente (FetchData.razor): Implementiert die Seite zum Abrufen von Daten.
    • Index-Komponente (Index.razor): Diese Komponente implementiert die Home-Seite.

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

  • Shared-Ordner: Enthält die folgenden freigegebenen Komponenten:

    • MainLayout-Komponente (MainLayout.razor): Die Layoutkomponente 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.
    • SurveyPrompt-Komponente (SurveyPrompt.razor): Blazor-Umfragekomponente.

  • Ordner wwwroot: Der Web Root-Ordner für die App, der die öffentlichen statischen Ressourcen der App enthält.

  • _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.

  • appsettings.json und Dateien mit den Umgebungseinstellungen der App: Geben Sie Konfigurationseinstellungen für die App an.

  • Program.cs: Der Einstiegspunkt der App, der den ASP.NET Core-Host einrichtet.

  • Startup.cs: Diese Datei enthält die Startlogik der App. Die Startup-Klasse definiert zwei Methoden:

    • ConfigureServices: Diese Methode konfiguriert die DI-Dienste (Dependency Injection) der App. Dienste werden durch Aufruf von AddServerSideBlazor hinzugefügt, und WeatherForecastService wird dem Dienstcontainer hinzugefügt, damit die FetchData-Beispielkomponente darauf zugreifen kann.
    • Configure: Konfiguriert die Pipeline für die Anforderungsverarbeitung der App:
      • MapBlazorHub wird aufgerufen, um einen Endpunkt für die Echtzeitverbindung mit dem Browser einzurichten. Die Verbindung wird mit SignalR hergestellt. Dabei handelt es sich um ein Framework zum Hinzufügen von Echtzeitwebfunktionen zu Apps.
      • MapFallbackToPage("/_Host") wird aufgerufen, um die Stammseite der App (Pages/_Host.cshtml) einzurichten und die Navigation zu aktivieren.

Zusätzliche Dateien und Ordner können in einer App angezeigt werden, die aus einer Blazor Server-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.

Blazor WebAssembly

Blazor WebAssembly-Projektvorlagen: blazorwasm, blazorwasm-empty

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

  • Wenn die Vorlage blazorwasm verwendet wird, wird die App mit Folgendem aufgefüllt:
    • Demonstrationscode für eine FetchData-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.
  • Bei Verwendung der Vorlage blazorwasm-empty wird die App ohne Demonstrationscode und Bootstrap erstellt.

Projektstruktur:

  • 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.
    • FetchData-Komponente (FetchData.razor): Implementiert die Seite zum Abrufen von Daten.
    • Index-Komponente (Index.razor): Diese Komponente implementiert die Home-Seite.

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

  • Shared-Ordner: Enthält die folgenden freigegebenen Komponenten 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.
    • SurveyPrompt-Komponente (SurveyPrompt.razor) (ASP.NET Core in .NeT 7 oder früher): Blazor-Umfragekomponente.

  • Ordner wwwroot: Das Webstammverzeichnis für die App, das die öffentlichen statischen Ressourcen der App enthält, einschließlich appsettings.json und Dateien mit den Umgebungseinstellungen der App für Konfigurationseinstellungen. 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.

  • _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.

  • 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.

Eine gehostete Blazor WebAssembly-Projektmappe umfasst die folgenden ASP.NET Core-Projekte:

  • Client: Die Blazor WebAssembly-App.
  • Server: Eine App, die die Blazor WebAssembly-App und Wetterdaten für Clients bereitstellt.
  • Shared: Ein Projekt, das allgemeine Klassen, Methoden und Ressourcen verwaltet.

Die Projektmappe wird aus der Blazor WebAssembly-Projektvorlage in Visual Studio mit aktiviertem Kontrollkästchen Von ASP.NET Core gehostet oder mit der Option -ho|--hosted über den .NET CLI-Befehl dotnet new blazorwasm generiert. Weitere Informationen finden Sie unter Tools für ASP.NET Core Blazor.

Die Projektstruktur der clientseitigen App in einer gehosteten Blazor WebAssembly-Projektmappe (Projekt „Client“) entspricht der Projektstruktur für eine eigenständige Blazor WebAssembly-App. Zusätzliche Dateien in einer gehosteten Blazor WebAssembly-Projektmappe:

  • Das Projekt „Server“ umfasst einen Wettervorhersagecontroller unter Controllers/WeatherForecastController.cs, der Wetterdaten an die FetchData-Komponente des Projekts „Client“ zurückgibt.
  • Das Projekt „Shared“ enthält eine Wettervorhersageklasse unter WeatherForecast.cs, die Wetterdaten für die Projekte „Client“ und „Server“ darstellt.

Blazor WebAssembly

Blazor WebAssembly-Projektvorlage: blazorwasm

Die Blazor WebAssembly-Vorlage erstellt die anfänglichen Dateien und die Verzeichnisstruktur für eine Blazor WebAssembly-App. Die App wird mit Demonstrationscode für eine FetchData-Komponente, die Daten aus der statischen Ressource weather.json lädt, und für die Benutzerinteraktion mit einer Counter-Komponente aufgefüllt.

  • 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.
    • FetchData-Komponente (FetchData.razor): Implementiert die Seite zum Abrufen von Daten.
    • Index-Komponente (Index.razor): Diese Komponente implementiert die Home-Seite.

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

  • Shared-Ordner: Enthält die folgenden freigegebenen Komponenten 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.
    • SurveyPrompt-Komponente (SurveyPrompt.razor): Blazor-Umfragekomponente.

  • Ordner wwwroot: Das Webstammverzeichnis für die App, das die öffentlichen statischen Ressourcen der App enthält, einschließlich appsettings.json und Dateien mit den Umgebungseinstellungen der App für Konfigurationseinstellungen. 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.

  • _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.

  • 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.

Eine gehostete Blazor WebAssembly-Projektmappe umfasst die folgenden ASP.NET Core-Projekte:

  • Client: Die Blazor WebAssembly-App.
  • Server: Eine App, die die Blazor WebAssembly-App und Wetterdaten für Clients bereitstellt.
  • Shared: Ein Projekt, das allgemeine Klassen, Methoden und Ressourcen verwaltet.

Die Projektmappe wird aus der Blazor WebAssembly-Projektvorlage in Visual Studio mit aktiviertem Kontrollkästchen Von ASP.NET Core gehostet oder mit der Option -ho|--hosted über den .NET CLI-Befehl dotnet new blazorwasm generiert. Weitere Informationen finden Sie unter Tools für ASP.NET Core Blazor.

Die Projektstruktur der clientseitigen App in einer gehosteten Blazor WebAssembly-Projektmappe (Projekt „Client“) entspricht der Projektstruktur für eine eigenständige Blazor WebAssembly-App. Zusätzliche Dateien in einer gehosteten Blazor WebAssembly-Projektmappe:

  • Das Projekt „Server“ umfasst einen Wettervorhersagecontroller unter Controllers/WeatherForecastController.cs, der Wetterdaten an die FetchData-Komponente des Projekts „Client“ zurückgibt.
  • Das Projekt „Shared“ enthält eine Wettervorhersageklasse unter WeatherForecast.cs, die Wetterdaten für die Projekte „Client“ und „Server“ darstellt.

Blazor WebAssembly

Blazor WebAssembly-Projektvorlage: blazorwasm

Die Blazor WebAssembly-Vorlage erstellt die anfänglichen Dateien und die Verzeichnisstruktur für eine Blazor WebAssembly-App. Die App wird mit Demonstrationscode für eine FetchData-Komponente, die Daten aus der statischen Ressource weather.json lädt, und für die Benutzerinteraktion mit einer Counter-Komponente aufgefüllt.

  • 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.
    • FetchData-Komponente (FetchData.razor): Implementiert die Seite zum Abrufen von Daten.
    • Index-Komponente (Index.razor): Diese Komponente implementiert die Home-Seite.

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

  • Shared-Ordner: Enthält die folgenden freigegebenen Komponenten 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.
    • SurveyPrompt-Komponente (SurveyPrompt.razor): Blazor-Umfragekomponente.

  • Ordner wwwroot: Das Webstammverzeichnis für die App, das die öffentlichen statischen Ressourcen der App enthält, einschließlich appsettings.json und Dateien mit den Umgebungseinstellungen der App für Konfigurationseinstellungen. 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.

  • _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.

  • 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.

Eine gehostete Blazor WebAssembly-Projektmappe umfasst die folgenden ASP.NET Core-Projekte:

  • Client: Die Blazor WebAssembly-App.
  • Server: Eine App, die die Blazor WebAssembly-App und Wetterdaten für Clients bereitstellt.
  • Shared: Ein Projekt, das allgemeine Klassen, Methoden und Ressourcen verwaltet.

Die Projektmappe wird aus der Blazor WebAssembly-Projektvorlage in Visual Studio mit aktiviertem Kontrollkästchen Von ASP.NET Core gehostet oder mit der Option -ho|--hosted über den .NET CLI-Befehl dotnet new blazorwasm generiert. Weitere Informationen finden Sie unter Tools für ASP.NET Core Blazor.

Die Projektstruktur der clientseitigen App in einer gehosteten Blazor WebAssembly-Projektmappe (Projekt „Client“) entspricht der Projektstruktur für eine eigenständige Blazor WebAssembly-App. Zusätzliche Dateien in einer gehosteten Blazor WebAssembly-Projektmappe:

  • Das Projekt „Server“ umfasst einen Wettervorhersagecontroller unter Controllers/WeatherForecastController.cs, der Wetterdaten an die FetchData-Komponente des Projekts „Client“ zurückgibt.
  • Das Projekt „Shared“ enthält eine Wettervorhersageklasse unter WeatherForecast.cs, die Wetterdaten für die Projekte „Client“ und „Server“ darstellt.

Blazor WebAssembly

Blazor WebAssembly-Projektvorlage: blazorwasm

Die Blazor WebAssembly-Vorlage erstellt die anfänglichen Dateien und die Verzeichnisstruktur für eine Blazor WebAssembly-App. Die App wird mit Demonstrationscode für eine FetchData-Komponente, die Daten aus der statischen Ressource weather.json lädt, und für die Benutzerinteraktion mit einer Counter-Komponente aufgefüllt.

  • 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.
    • FetchData-Komponente (FetchData.razor): Implementiert die Seite zum Abrufen von Daten.
    • Index-Komponente (Index.razor): Diese Komponente implementiert die Home-Seite.

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

  • Shared-Ordner: Enthält die folgenden freigegebenen Komponenten:

    • MainLayout-Komponente (MainLayout.razor): Die Layoutkomponente 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.
    • SurveyPrompt-Komponente (SurveyPrompt.razor): Blazor-Umfragekomponente.

  • Ordner wwwroot: Das Webstammverzeichnis für die App, das die öffentlichen statischen Ressourcen der App enthält, einschließlich appsettings.json und Dateien mit den Umgebungseinstellungen der App für Konfigurationseinstellungen. 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 app-DOM-Elements (<app>Loading...</app>) gerendert.

  • _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.

  • 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 app-DOM-Element (<app>Loading...</app> 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.

Eine gehostete Blazor WebAssembly-Projektmappe umfasst die folgenden ASP.NET Core-Projekte:

  • Client: Die Blazor WebAssembly-App.
  • Server: Eine App, die die Blazor WebAssembly-App und Wetterdaten für Clients bereitstellt.
  • Shared: Ein Projekt, das allgemeine Klassen, Methoden und Ressourcen verwaltet.

Die Projektmappe wird aus der Blazor WebAssembly-Projektvorlage in Visual Studio mit aktiviertem Kontrollkästchen Von ASP.NET Core gehostet oder mit der Option -ho|--hosted über den .NET CLI-Befehl dotnet new blazorwasm generiert. Weitere Informationen finden Sie unter Tools für ASP.NET Core Blazor.

Die Projektstruktur der clientseitigen App in einer gehosteten Blazor WebAssembly-Projektmappe (Projekt „Client“) entspricht der Projektstruktur für eine eigenständige Blazor WebAssembly-App. Zusätzliche Dateien in einer gehosteten Blazor WebAssembly-Projektmappe:

  • Das Projekt „Server“ umfasst einen Wettervorhersagecontroller unter Controllers/WeatherForecastController.cs, der Wetterdaten an die FetchData-Komponente des Projekts „Client“ zurückgibt.
  • Das Projekt „Shared“ enthält eine Wettervorhersageklasse unter WeatherForecast.cs, die Wetterdaten für die Projekte „Client“ und „Server“ darstellt.

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 Server-App befindet sich das Blazor-Skript in der Datei Pages/_Host.cshtml:

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

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

<script src="_framework/blazor.server.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 Server-App befinden sich die Inhalte <head> und <body> in der Datei Pages/_Host.cshtml.

In einer Blazor Server-App befinden sich die Inhalte <head> und <body> in der Datei Pages/_Layout.cshtml.

In einer Blazor Server-App befinden sich die Inhalte <head> und <body> in der Datei Pages/_Host.cshtml.

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

Dual Blazor Server/Blazor WebAssembly App

Ein Ansatz, um eine App zu erstellen, die entweder als Blazor Server App oder Blazor WebAssembly App ausgeführt werden kann, besteht darin, die ganze App-Logik und alle App-Komponenten in eine Razor Klassenbibliothek (RCL) zu platzieren und auf die RCL aus separaten Blazor Server und Blazor WebAssembly Projekten zu verweisen. Für allgemeine Dienste, deren Implementierungen sich je nach Hostingmodell unterscheiden, definieren Sie die Dienstschnittstellen in der RCL und implementieren sie die Dienste in den Blazor Server und Blazor WebAssembly Projekten.

Zusätzliche Ressourcen