Blazor-Projektstruktur in ASP.NET Core
Hinweis
Dies ist nicht die neueste Version dieses Artikels. Informationen zum aktuellen Release finden Sie in der .NET 8-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.
Informationen zum aktuellen Release finden Sie in der .NET 8-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
Projektvorlage für Blazor-Web-Apps: blazor
Die Blazor-Web App-Projektvorlage bietet einen einzigen Startpunkt für die Verwendung von Razor-Komponenten zum Erstellen eines beliebigen Stils der Webbenutzeroberfläche, sowohl serverseitiges gerendertes als auch clientseitiges Rendern. 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.
Standardmäßig ermöglicht die Blazor-Web-App-Vorlage sowohl statisches als auch interaktives serverseitiges Rendering innerhalb eines Projekts. 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.
Weitere Informationen finden Sie unter ASP.NET Core Blazor-Rendermodi.
Serverprojekt:
Components
-Ordner: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 für Benutzer*innen an, welche Komponente derzeit angezeigt wird.NavMenu.razor.css
: Stylesheet für das Navigationsmenü der App.
Pages
-Ordner: Enthält die routingfähigen serverseitigen Razor-Komponenten der App (.razor
). Die Route für jede Seite wird mithilfe der@page
-Anweisung angegeben. Die Vorlage besteht aus den folgenden Teilen:Counter
-Komponente (Counter.razor
): Implementiert die Seite Indikator.Error
-Komponente (Error.razor
): Diese Komponente implementiert die Fehlerseite.Home
-Komponente (Home.razor
): Diese Komponente implementiert die Home-Seite.Weather
-Komponente (Weather.razor
): Implementiert die Seite Wettervorhersage.
App
-Komponente (App.razor
): Die Stammkomponente der App mit HTML-<head>
-Markup, derRoutes
-Komponente und dem Blazor-<script>
-Tag. Die Stammkomponente ist die erste Komponente, die die App lädt.Routes
-Komponente (Routes.razor
): Legt das Routing unter Verwendung 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._Imports.razor
: Enthält gängige Razor-Anweisungen, die in die serverseitig gerenderten App-Komponenten (.razor
) eingefügt werden sollen, z. B.@using
-Anweisungen für Namespaces.
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: Der Webstammordner für das Serverprojekt, das die öffentlichen statischen Ressourcen der App enthält.Program.cs
-Datei: Diese ist der Einstiegspunkt des Serverprojekts, das den Host für die ASP.NET Core-Web-App einrichtet 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.
App-Einstellungsdateien (
appsettings.Development.json
,appsettings.json
): Diese geben Konfigurationseinstellungen für das Serverprojekt an.
Clientprojekt (
.Client
):Pages
-Ordner: Enthält die routingfähigen clientseitigen Razor-Komponenten der App (.razor
). Die Route für jede Seite wird mithilfe der@page
-Anweisung angegeben. Die Vorlage enthält eineCounter
-Komponente (Counter.razor
), die die Seite Leistungsindikator implementiert.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.Das
.Client
-Projekt ist lediglich ein Blazor-Projekt, das nicht so eng in andere Features als Blazor von ASP.NET Core und die Spezifikationen integriert sein muss. Daher wird dafür eine weniger komplexe Komponentenordnerstruktur verwendet. Sie können natürlich trotzdem Ihre bevorzugte Komponentenordnerstruktur 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.Der Webstammordner für das clientseitige Projekt, der die öffentlichen statischen Ressourcen der App enthält, darunter App-Einstellungsdateien (
appsettings.Development.json
,appsettings.json
), die Konfigurationseinstellungen für das clientseitige Projekt bereitstellen.Program.cs
-Datei: Dies ist der clientseitige Einstiegspunkt des Projekts, der den WebAssembly- Host einrichtet und die Startlogik des Projekts enthält, einschließlich Dienstregistrierungen, Konfiguration, Protokollierung und Pipeline für die Anforderungsverarbeitung._Imports.razor
: Enthält gängige Razor-Anweisungen, die in die durch WebAssembly gerenderten App-Komponenten (.razor
) eingefügt werden sollen, z. B.@using
-Anweisungen für Namespaces.
Zusätzliche Dateien und Ordner können in einer App angezeigt werden, die aus einer Projektvorlage für Blazor-Web-Apps 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.