Blazor-Projektstruktur in ASP.NET Core

In diesem Artikel werden die Dateien und Ordner beschrieben, aus denen eine Blazor-App besteht, die mit einer der Projektvorlagen des Blazor-Frameworks generiert wurde. Informationen zur Verwendung der Tools zum Erstellen einer Blazor-App mit einer Blazor-Projektvorlage finden Sie unter Tools für ASP.NET-Core Blazor. Informationen zu den Blazor-Hostingmodellen Blazor WebAssembly und Blazor Server finden Sie unter Blazor-Hostingmodelle in ASP.NET Core.

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.

  • Pages-Ordner: Enthält die routingfähigen Komponenten/Seiten (.razor), aus denen die Blazor-App besteht. 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.
  • Properties/launchSettings.json: Enthält die Konfiguration der Entwicklungsumgebung.

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

    • MainLayout-Komponente (MainLayout.razor): Die Layoutkomponente der App.
    • MainLayout.razor.css: Stylesheet für das Hauptlayout der App.
    • NavMenu-Komponente (NavMenu.razor): Diese Komponente implementiert die Navigation in der Seitenleiste. Sie schließt die NavLink-Komponente (NavLink) ein, die Navigationslinks zu anderen Razor-Komponenten rendert. Die NavLink-Komponente gibt automatisch einen ausgewählten Zustand an, wenn die Komponente geladen wird, sodass der Benutzer nachvollziehen kann, welche Komponente derzeit angezeigt wird.
    • NavMenu.razor.css: Stylesheet für das Navigationsmenü der App.
    • SurveyPrompt-Komponente (SurveyPrompt.razor): Blazor-Umfragekomponente.
  • wwwroot: Das Webstammverzeichnis für die App, das die öffentlichen statischen Ressourcen der App enthält, einschließlich appsettings.json und Dateien mit den Umgebungseinstellungen der App für Konfigurationseinstellungen. Die Webseite index.html ist die Stammseite der App, die als HTML-Seite implementiert ist:

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

Hinweis

JavaScript-Dateien (JS), die der Datei wwwroot/index.html hinzugefügt werden, müssen vor dem schließenden </body>-Tag eingefügt werden. Die Reihenfolge, in der benutzerdefinierter JS-Code aus JS-Dateien geladen wird, ist in einigen Szenarien wichtig. Stellen Sie beispielsweise sicher, dass JS-Dateien mit Interopmethoden vor JS-Dateien des Blazor-Frameworks eingeschlossen werden.

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

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

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

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

Blazor Server

Blazor Server-Projektvorlage: blazorserver

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

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

  • Pages-Ordner: Dieser Ordner enthält die routingfähigen Komponenten/Seiten (.razor), aus denen die Blazor-App besteht, sowie 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.

Hinweis

JavaScript-Dateien (JS), die der Datei Pages/_Layout.cshtml hinzugefügt werden, müssen vor dem schließenden </body>-Tag eingefügt werden. Die Reihenfolge, in der benutzerdefinierter JS-Code aus JS-Dateien geladen wird, ist in einigen Szenarien wichtig. Stellen Sie beispielsweise sicher, dass JS-Dateien mit Interopmethoden vor JS-Dateien des Blazor-Frameworks eingeschlossen werden.

  • Properties/launchSettings.json: Enthält die Konfiguration der Entwicklungsumgebung.

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

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

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

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

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

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

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

Nullable-Verweistypen (NRTs) und statische Analyse des .NET-Compilers mit NULL-Status

Blazor-Projektvorlagen umfassen die Verwendung von Nullable-Verweistypen (Nullable Reference Types, NRTs) und der statischen Analyse des .NET-Compilers mit NULL-Status. Diese Features wurden mit C# 8 veröffentlicht und sind standardmäßig für Apps aktiviert, die mit ASP.NET Core 6.0 (C# 10) oder höher generiert wurden.

Die statischen Analysewarnungen des .NET-Compilers mit NULL-Status können entweder ignoriert werden oder als Leitfaden für die lokale Aktualisierung eines Dokumentationsbeispiels oder einer Beispiel-App dienen. Die statische Analyse mit NULL-Status kann deaktiviert werden, indem in der Projektdatei der App Nullable auf disable festgelegt wird. Dies wird nur für Dokumentationsbeispiele und Beispiel-Apps empfohlen, wenn die Compilerwarnungen beim Lernen der Verwendung von .NET störend sind. Es wird nicht empfohlen, die Überprüfung des NULL-Status in Produktionsprojekten zu deaktivieren.

Weitere Informationen zu NRTs, zur MSBuild-Eigenschaft Nullable und zum Aktualisieren von Apps (einschließlich #pragma-Anleitungen) finden Sie in den folgenden Ressourcen in der C#-Dokumentation:

Zusätzliche Ressourcen

In diesem Artikel werden die Dateien und Ordner beschrieben, aus denen eine Blazor-App besteht, die mit einer der Projektvorlagen des Blazor-Frameworks generiert wurde. Informationen zur Verwendung der Tools zum Erstellen einer Blazor-App mit einer Blazor-Projektvorlage finden Sie unter Tools für ASP.NET-Core Blazor. Informationen zu den Blazor-Hostingmodellen Blazor WebAssembly und Blazor Server finden Sie unter Blazor-Hostingmodelle in ASP.NET Core.

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.

  • Pages-Ordner: Enthält die routingfähigen Komponenten/Seiten (.razor), aus denen die Blazor-App besteht. 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.
  • Properties/launchSettings.json: Enthält die Konfiguration der Entwicklungsumgebung.

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

    • MainLayout-Komponente (MainLayout.razor): Die Layoutkomponente der App.
    • MainLayout.razor.css: Stylesheet für das Hauptlayout der App.
    • NavMenu-Komponente (NavMenu.razor): Diese Komponente implementiert die Navigation in der Seitenleiste. Sie schließt die NavLink-Komponente (NavLink) ein, die Navigationslinks zu anderen Razor-Komponenten rendert. Die NavLink-Komponente gibt automatisch einen ausgewählten Zustand an, wenn die Komponente geladen wird, sodass der Benutzer nachvollziehen kann, welche Komponente derzeit angezeigt wird.
    • NavMenu.razor.css: Stylesheet für das Navigationsmenü der App.
    • SurveyPrompt-Komponente (SurveyPrompt.razor): Blazor-Umfragekomponente.
  • wwwroot: Das Webstammverzeichnis für die App, das die öffentlichen statischen Ressourcen der App enthält, einschließlich appsettings.json und Dateien mit den Umgebungseinstellungen der App für Konfigurationseinstellungen. Die Webseite index.html ist die Stammseite der App, die als HTML-Seite implementiert ist:

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

Hinweis

JavaScript-Dateien (JS), die der Datei wwwroot/index.html hinzugefügt werden, müssen vor dem schließenden </body>-Tag eingefügt werden. Die Reihenfolge, in der benutzerdefinierter JS-Code aus JS-Dateien geladen wird, ist in einigen Szenarien wichtig. Stellen Sie beispielsweise sicher, dass JS-Dateien mit Interopmethoden vor JS-Dateien des Blazor-Frameworks eingeschlossen werden.

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

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

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

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

Blazor Server

Blazor Server-Projektvorlage: blazorserver

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

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

  • Pages-Ordner: Dieser Ordner enthält die routingfähigen Komponenten/Seiten (.razor), aus denen die Blazor-App besteht, sowie 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.

Hinweis

JavaScript-Dateien (JS), die der Datei Pages/_Host.cshtml hinzugefügt werden, müssen vor dem schließenden </body>-Tag eingefügt werden. Die Reihenfolge, in der benutzerdefinierter JS-Code aus JS-Dateien geladen wird, ist in einigen Szenarien wichtig. Stellen Sie beispielsweise sicher, dass JS-Dateien mit Interopmethoden vor JS-Dateien des Blazor-Frameworks eingeschlossen werden.

  • Properties/launchSettings.json: Enthält die Konfiguration der Entwicklungsumgebung.

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

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

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

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

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

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

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

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

Zusätzliche Ressourcen

In diesem Artikel werden die Dateien und Ordner beschrieben, aus denen eine Blazor-App besteht, die mit einer der Projektvorlagen des Blazor-Frameworks generiert wurde. Informationen zur Verwendung der Tools zum Erstellen einer Blazor-App mit einer Blazor-Projektvorlage finden Sie unter Tools für ASP.NET-Core Blazor. Informationen zu den Blazor-Hostingmodellen Blazor WebAssembly und Blazor Server finden Sie unter Blazor-Hostingmodelle in ASP.NET Core.

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.

  • Pages-Ordner: Enthält die routingfähigen Komponenten/Seiten (.razor), aus denen die Blazor-App besteht. 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.
  • Properties/launchSettings.json: Enthält die Konfiguration der Entwicklungsumgebung.

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

    • MainLayout-Komponente (MainLayout.razor): Die Layoutkomponente der App.
    • NavMenu-Komponente (NavMenu.razor): Diese Komponente implementiert die Navigation in der Seitenleiste. Sie schließt die NavLink-Komponente (NavLink) ein, die Navigationslinks zu anderen Razor-Komponenten rendert. Die NavLink-Komponente gibt automatisch einen ausgewählten Zustand an, wenn die Komponente geladen wird, sodass der Benutzer nachvollziehen kann, welche Komponente derzeit angezeigt wird.
    • SurveyPrompt-Komponente (SurveyPrompt.razor): Blazor-Umfragekomponente.
  • wwwroot: Das Webstammverzeichnis für die App, das die öffentlichen statischen Ressourcen der App enthält, einschließlich appsettings.json und Dateien mit den Umgebungseinstellungen der App für Konfigurationseinstellungen. Die Webseite index.html ist die Stammseite der App, die als HTML-Seite implementiert ist:

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

Hinweis

JavaScript-Dateien (JS), die der Datei wwwroot/index.html hinzugefügt werden, müssen vor dem schließenden </body>-Tag eingefügt werden. Die Reihenfolge, in der benutzerdefinierter JS-Code aus JS-Dateien geladen wird, ist in einigen Szenarien wichtig. Stellen Sie beispielsweise sicher, dass JS-Dateien mit Interopmethoden vor JS-Dateien des Blazor-Frameworks eingeschlossen werden.

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

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

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

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

Blazor Server

Blazor Server-Projektvorlage: blazorserver

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

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

  • Pages-Ordner: Dieser Ordner enthält die routingfähigen Komponenten/Seiten (.razor), aus denen die Blazor-App besteht, sowie 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.

Hinweis

JavaScript-Dateien (JS), die der Datei Pages/_Host.cshtml hinzugefügt werden, müssen vor dem schließenden </body>-Tag eingefügt werden. Die Reihenfolge, in der benutzerdefinierter JS-Code aus JS-Dateien geladen wird, ist in einigen Szenarien wichtig. Stellen Sie beispielsweise sicher, dass JS-Dateien mit Interopmethoden vor JS-Dateien des Blazor-Frameworks eingeschlossen werden.

  • Properties/launchSettings.json: Enthält die Konfiguration der Entwicklungsumgebung.

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

    • MainLayout-Komponente (MainLayout.razor): Die Layoutkomponente der App.
    • NavMenu-Komponente (NavMenu.razor): Diese Komponente implementiert die Navigation in der Seitenleiste. Sie schließt die NavLink-Komponente (NavLink) ein, die Navigationslinks zu anderen Razor-Komponenten rendert. Die NavLink-Komponente gibt automatisch einen ausgewählten Zustand an, wenn die Komponente geladen wird, sodass der Benutzer nachvollziehen kann, welche Komponente derzeit angezeigt wird.
    • SurveyPrompt-Komponente (SurveyPrompt.razor): Blazor-Umfragekomponente.
  • wwwroot: Der Ordner Web Root für die App, der die öffentlichen statischen Ressourcen der App enthält.

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

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

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

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

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

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

Zusätzliche Ressourcen