Blazor-Projektstruktur in ASP.NET Core

  • Artikel

Hinweis

Dies ist nicht die neueste Version dieses Artikels. 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 die NavLink-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, der Routes-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 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 dotnet run-Befehl übergeben zu müssen, schreiben Sie das https-Profil einfach über dem http-Profil in die Datei.

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

    • 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 eine Counter-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 einer Counter-Komponente.
    • Bootstrap für das Front-End-Toolkit.
  • Bei Verwendung der Vorlage blazorserver-empty wird die App ohne Demonstrationscode und Bootstrap erstellt.

Projektstruktur:

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

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

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

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

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

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

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

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

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

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

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

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

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

Blazor Server-Projektvorlage: blazorserver

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Blazor Server-Projektvorlage: blazorserver

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Blazor Server-Projektvorlage: blazorserver

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Eigenständige Blazor WebAssembly-App

Eigenständige Blazor WebAssembly-Projektvorlage: blazorwasm

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

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

Projektstruktur:

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

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

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

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

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

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

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

    Hinweis

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

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

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

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

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

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

Blazor WebAssembly

Blazor WebAssembly-Projektvorlagen: blazorwasm, blazorwasm-empty

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

  • Wenn die Vorlage blazorwasm verwendet wird, wird die App mit Folgendem aufgefüllt:
    • Demonstrationscode für eine FetchData-Komponente, die Daten aus der statischen Ressource weather.json lädt, und für die Benutzerinteraktion mit einer Counter-Komponente.
    • Bootstrap für das Front-End-Toolkit.
  • Bei Verwendung der Vorlage blazorwasm-empty wird die App ohne Demonstrationscode und Bootstrap erstellt.

Projektstruktur:

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

    • Counter-Komponente (Counter.razor): Implementiert die Zählerseite.
    • FetchData-Komponente (FetchData.razor): Implementiert die Seite zum Abrufen von Daten.
    • Index-Komponente (Index.razor): Diese Komponente implementiert die Home-Seite.

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

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

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

  • Ordner wwwroot: Das Webstammverzeichnis für die App, das die öffentlichen statischen Ressourcen der App enthält, einschließlich appsettings.json und Dateien mit den Umgebungseinstellungen der App für Konfigurationseinstellungen. Die Webseite index.html ist die Stammseite der App, die als HTML-Seite implementiert ist:

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

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

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

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

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

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

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

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

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

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

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

Blazor WebAssembly

Blazor WebAssembly-Projektvorlage: blazorwasm

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

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

    • Counter-Komponente (Counter.razor): Implementiert die Zählerseite.
    • FetchData-Komponente (FetchData.razor): Implementiert die Seite zum Abrufen von Daten.
    • Index-Komponente (Index.razor): Diese Komponente implementiert die Home-Seite.

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

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

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

  • Ordner wwwroot: Das Webstammverzeichnis für die App, das die öffentlichen statischen Ressourcen der App enthält, einschließlich appsettings.json und Dateien mit den Umgebungseinstellungen der App für Konfigurationseinstellungen. Die Webseite index.html ist die Stammseite der App, die als HTML-Seite implementiert ist:

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

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

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

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

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

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

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

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

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

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

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

Blazor WebAssembly

Blazor WebAssembly-Projektvorlage: blazorwasm

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

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

    • Counter-Komponente (Counter.razor): Implementiert die Zählerseite.
    • FetchData-Komponente (FetchData.razor): Implementiert die Seite zum Abrufen von Daten.
    • Index-Komponente (Index.razor): Diese Komponente implementiert die Home-Seite.

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

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

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

  • Ordner wwwroot: Das Webstammverzeichnis für die App, das die öffentlichen statischen Ressourcen der App enthält, einschließlich appsettings.json und Dateien mit den Umgebungseinstellungen der App für Konfigurationseinstellungen. Die Webseite index.html ist die Stammseite der App, die als HTML-Seite implementiert ist:

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

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

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

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

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

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

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

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

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

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

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

Blazor WebAssembly

Blazor WebAssembly-Projektvorlage: blazorwasm

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

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

    • Counter-Komponente (Counter.razor): Implementiert die Zählerseite.
    • FetchData-Komponente (FetchData.razor): Implementiert die Seite zum Abrufen von Daten.
    • Index-Komponente (Index.razor): Diese Komponente implementiert die Home-Seite.

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

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

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

  • Ordner wwwroot: Das Webstammverzeichnis für die App, das die öffentlichen statischen Ressourcen der App enthält, einschließlich appsettings.json und Dateien mit den Umgebungseinstellungen der App für Konfigurationseinstellungen. Die Webseite index.html ist die Stammseite der App, die als HTML-Seite implementiert ist:

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

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

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

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

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

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

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

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

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

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

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

Speicherort des Blazor-Skripts

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

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

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

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

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

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

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

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

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

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

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

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

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

Speicherort der Inhalte <head> und <body>

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

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

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

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

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

Dual Blazor Server/Blazor WebAssembly App

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

Zusätzliche Ressourcen