Blazor-Projektstruktur in ASP.NET Core
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 .NET- und .NET Core-Supportrichtlinie. Die aktuelle Version finden Sie in der .NET 9-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ältNavLink
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.
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 einerCounter
-Komponente. - Bootstrap für das Front-End-Toolkit.
- Demonstrationscode für eine
- Bei Verwendung der Vorlage
blazorserver-empty
wird die App ohne Demonstrationscode und Bootstrap erstellt.
Projektstruktur:
Data
-Ordner: Dieser Ordner enthält dieWeatherForecast
-Klasse und Implementierung vonWeatherForecastService
, die Beispielwetterdaten für dieFetchData
-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 DateilaunchSettings.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 dieNavLink
-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 dieFetchData
-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.
- Hiermit werden die DI-Dienste (Dependency Injection) der App angegeben. Dienste werden durch Aufruf von AddServerSideBlazor hinzugefügt, und
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 dieWeatherForecast
-Klasse und Implementierung vonWeatherForecastService
, die Beispielwetterdaten für dieFetchData
-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 DateilaunchSettings.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 dieNavLink
-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 dieFetchData
-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.
- Hiermit werden die DI-Dienste (Dependency Injection) der App angegeben. Dienste werden durch Aufruf von AddServerSideBlazor hinzugefügt, und
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 dieWeatherForecast
-Klasse und Implementierung vonWeatherForecastService
, die Beispielwetterdaten für dieFetchData
-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 DateilaunchSettings.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 dieNavLink
-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. DieStartup
-Klasse definiert zwei Methoden:ConfigureServices
: Diese Methode konfiguriert die DI-Dienste (Dependency Injection) der App. Dienste werden durch Aufruf von AddServerSideBlazor hinzugefügt, undWeatherForecastService
wird dem Dienstcontainer hinzugefügt, damit dieFetchData
-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 dieWeatherForecast
-Klasse und Implementierung vonWeatherForecastService
, die Beispielwetterdaten für dieFetchData
-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 DateilaunchSettings.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 dieNavLink
-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. DieStartup
-Klasse definiert zwei Methoden:ConfigureServices
: Diese Methode konfiguriert die DI-Dienste (Dependency Injection) der App. Dienste werden durch Aufruf von AddServerSideBlazor hinzugefügt, undWeatherForecastService
wird dem Dienstcontainer hinzugefügt, damit dieFetchData
-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 Ressourceweather.json
lädt, und für die Benutzerinteraktion mit einerCounter
-Komponente. - Bootstrap für das Front-End-Toolkit.
- Demonstrationscode für eine
- 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 dieNavLink
-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 DateilaunchSettings.json
.Hinweis
Das
http
-Profil steht in derlaunchSettings.json
-Datei vor demhttps
-Profil. Wenn eine App mit der .NET-CLI ausgeführt wird, wird die App auf einem HTTP-Endpunkt ausgeführt, da das erste gefundene Profilhttp
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 Befehldotnet watch
(oderdotnet run
) übergeben zu müssen, fügen Sie dashttps
-Profil einfach über demhttp
-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 derappsettings.json
-Datei sowie Dateien mit den Umgebungseinstellungen der App für die Konfigurationseinstellungen und die Beispielwetterdaten (sample-data/weather.json
). Die Webseiteindex.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 desdiv
-DOM-Elements mit einemid
-Objekt vonapp
(<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. DieApp
-Komponente wird als dasdiv
-DOM-Element mit einemid
-Objekt vonapp
(<div id="app">Loading...</div>
inwwwroot/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>()
).
- Die
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 Ressourceweather.json
lädt, und für die Benutzerinteraktion mit einerCounter
-Komponente. - Bootstrap für das Front-End-Toolkit.
- Demonstrationscode für eine
- 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 DateilaunchSettings.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 dieNavLink
-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ßlichappsettings.json
und Dateien mit den Umgebungseinstellungen der App für Konfigurationseinstellungen. Die Webseiteindex.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 desdiv
-DOM-Elements mit einemid
-Objekt vonapp
(<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. DieApp
-Komponente wird als dasdiv
-DOM-Element mit einemid
-Objekt vonapp
(<div id="app">Loading...</div>
inwwwroot/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>()
).
- Die
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 dieFetchData
-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 DateilaunchSettings.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 dieNavLink
-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ßlichappsettings.json
und Dateien mit den Umgebungseinstellungen der App für Konfigurationseinstellungen. Die Webseiteindex.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 desdiv
-DOM-Elements mit einemid
-Objekt vonapp
(<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. DieApp
-Komponente wird als dasdiv
-DOM-Element mit einemid
-Objekt vonapp
(<div id="app">Loading...</div>
inwwwroot/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>()
).
- Die
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 dieFetchData
-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 DateilaunchSettings.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 dieNavLink
-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ßlichappsettings.json
und Dateien mit den Umgebungseinstellungen der App für Konfigurationseinstellungen. Die Webseiteindex.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 desdiv
-DOM-Elements mit einemid
-Objekt vonapp
(<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. DieApp
-Komponente wird als dasdiv
-DOM-Element mit einemid
-Objekt vonapp
(<div id="app">Loading...</div>
inwwwroot/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>()
).
- Die
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 dieFetchData
-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 DateilaunchSettings.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 dieNavLink
-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ßlichappsettings.json
und Dateien mit den Umgebungseinstellungen der App für Konfigurationseinstellungen. Die Webseiteindex.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 desapp
-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. DieApp
-Komponente wird als dasapp
-DOM-Element (<app>Loading...</app>
inwwwroot/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>()
).
- Die
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 dieFetchData
-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.