Erstellen einer Blazor-Filmdatenbank-App (Teil 1 – Erstellen einer Blazor Web App)

Dieser Artikel ist der erste Teil des Tutorials zur Blazor-Filmdatenbank-App, das Ihnen die Grundlagen zum Erstellen einer ASP.NET Core-Blazor Web App mit Funktionen zur Verwaltung einer Filmdatenbank vermittelt.

In diesem Teil der Tutorialreihe wird erläutert, wie Sie eine Blazor Web App erstellen, die statisches serverseitiges Rendering (static SSR) verwendet. Statisches SSR bedeutet, dass Inhalte auf dem Server gerendert und als Reaktion auf einzelne Anforderungen an den Client zur Anzeige gesendet werden.

Voraussetzungen

Visual Studio 2022 (neuestes Release) mit dem Workload ASP.NET- und Webentwicklung

Neueste Versionen von:

• Visual Studio Code
• C#-Entwicklerkit
• .NET SDK

Die Visual Studio Code-Anweisungen (VS Code) für ASP.NET Core-Entwicklung in diesem Tutorial verwenden in einigen Teilen der Dokumentation die .NET CLI, die Teil des .NET SDK ist. .NET CLI-Befehle werden im integrierten Terminal von VS Code ausgegeben, das standardmäßig auf eine PowerShell-Befehlsshell festgelegt ist. Das Terminal wird geöffnet, indem in der Menüleiste im Menü Terminalneues Terminal ausgewählt wird.

.NET SDK (aktuelles Release)

Die .NET-CLI wird als Teil des .NET Core SDK installiert. Wenn Sie Befehle ausgeben möchten, die sich auf das Projekt auswirken, öffnen Sie die Befehlsshell im Stammordner des Projekts.

Erstellen der Datei Blazor Web App

In Visual Studio:

• Wählen Sie im Startfenster die Option Neues Projekt erstellen aus. Wählen Sie alternativ auf der Menüleiste Datei>Neu>Projekt aus.

• Wählen Sie im Dialogfeld Neues Projekt erstellen in der Liste der Projektvorlagen Blazor Web App aus. Wählen Sie die Schaltfläche Weiter aus.

• Geben Sie im Dialogfeld Neues Projekt konfigurieren im Feld BlazorWebAppMovies den Namen für das Projekt ein. Übernehmen Sie dabei die gleiche Groß-/Kleinschreibung. Die Verwendung von exakt diesem Projektnamen ist wichtig, um sicherzustellen, dass die Namespaces für den Code übereinstimmen, den Sie aus dem Tutorial in die zu erstellende App kopieren.

• Vergewissern Sie sich, dass der Standort für die App geeignet ist. Legen Sie das Kontrollkästchen Lösung und Projekt im selben Verzeichnis ablegen fest, damit es Ihrem bevorzugten Speicherort für die Lösungsdatei entspricht. Wählen Sie die Schaltfläche Weiter aus.

• Verwenden Sie im Dialogfeld Zusätzliche Informationen die folgenden Einstellungen:

  • Framework: Wählen Sie .NET 7.0 (Support für Standardlaufzeit) aus.
  • Authentifizierungstyp: Keine
  • Für HTTPS konfigurieren: Aktiviert
  • Interaktiver Rendermodus: Server
  • Interaktivitätsort: Pro Seite/Komponente
  • Beispielseiten einschließen: Aktiviert
  • Keine Anweisungen der obersten Ebene verwenden: Nicht aktiviert
  • Klicken Sie auf Erstellen.

Die Visual Studio-Anweisungen in Teilen dieser Tutorialreihe verwenden EF Core-Befehle, um Datenbankmigrationen hinzuzufügen und die Datenbank zu aktualisieren. EF Core-Befehle werden mit verbundenen Diensten in Visual Studio ausgegeben. Weitere Informationen erhalten Sie im weiteren Verlauf in dieser Tutorialreihe.

Das Tutorial setzt voraus, dass Sie mit VS Code vertraut sind. Wenn Sie noch nicht mit VS Code vertraut sind, lesen Sie die VS Code-Dokumentation. Die auf der Seite Einführungsvideos aufgeführten Videos sollen Ihnen einen Überblick über die Features von VS Code bieten.

Vergewissern Sie sich, dass das neueste C#Dev Kit und .NET SDK installiert sind.

In VS Code:

Erstellen eines neuen Projekts:

• Wechseln Sie zur Ansicht Explorer und wählen Sie die Schaltfläche .NET-Projekt erstellen aus. Alternativ können Sie die Befehlspalette mit STRG+UMSCHALT+P aufrufen und dann „.NET“ eingeben und den Befehl .NET: Neues Projekt suchen und auswählen.

• Wählen Sie die Blazor Web App-Projektvorlage aus der Liste aus.

• Erstellen Sie im Dialogfeld Projektspeicherort einen Ordner für das Projekt oder wählen Sie einen aus.

• Benennen Sie in der Befehlspalette das Projekt BlazorWebAppMovies mit richtiger Groß-/Kleinschreibung. Die Verwendung von exakt diesem Projektnamen ist wichtig, um sicherzustellen, dass die Namespaces für den Code übereinstimmen, den Sie aus dem Tutorial in die zu erstellende App kopieren.

• Wählen Sie "Projekt erstellen" aus, um die App zu erstellen.

Vergewissern Sie sich, dass das neueste .NET SDK installiert ist.

In einer Befehlsshell:

• Wechseln Sie mit dem Befehl cd zum Verzeichnis, in dem Sie den Projektordner erstellen möchten (z. B. cd c:/users/Bernie_Kopell/Documents).

• Verwenden Sie den Befehl „dotnet new“ mit der blazor-Projektvorlage, um ein neues Blazor Web App-Projekt zu erstellen. Die an den Befehl übergebene --o|--outputOption erstellt das Projekt in einem neuen Ordner am aktuellen Speicherort des Shellverzeichnisses. Benennen Sie das Projekt BlazorWebAppMovies (unter Beachtung der Groß-/Kleinschreibung), sodass die Namespaces für den Code übereinstimmen, den Sie aus dem Tutorial in die App kopieren.

  dotnet new blazor -o BlazorWebAppMovies
  

Ausführen der App

Drücken Sie F5 auf der Tastatur, um die App auszuführen.

Visual Studio zeigt das folgende Dialogfeld an, wenn ein Projekt noch nicht für die Verwendung von SSL konfiguriert ist:

Wählen Sie Ja aus, wenn Sie dem ASP.NET Core-SSL-Zertifikat vertrauen.

Das folgende Dialogfeld wird angezeigt:

Wählen Sie Ja aus, um das Risiko zu bestätigen und das Zertifikat zu installieren.

Visual Studio:

• Kompiliert und führt die App aus.
• Startet den Standardbrowser unter https://localhost:{PORT}, der die Benutzeroberfläche der Apps anzeigt. Der {PORT}-Platzhalter ist der zufällige Port, der der App beim Erstellen zugewiesen wird. Wenn Sie den Port aufgrund eines lokalen Portkonflikts ändern müssen, ändern Sie den Port in der Projektdatei Properties/launchSettings.json.

Navigieren Sie zu den Seiten der App, um zu bestätigen, dass die App normal funktioniert.

Drücken Sie in VS Code F5, um die App auszuführen.

Wählen Sie auf der Eingabeaufforderung Debugger auswählen in der Befehlspalette oben auf der VS Code-Benutzeroberfläche C# aus. Wählen Sie bei der nächsten Eingabeaufforderung die Standardstartkonfiguration (C#: BlazorWebAppMovies [Default Configuration]) aus.

Der Standardbrowser unter http://localhost:{PORT}, der die Benutzeroberfläche der App anzeigt, wird gestartet,. Der {PORT}-Platzhalter ist der zufällige Port, der der App beim Erstellen zugewiesen wird. Wenn Sie den Port aufgrund eines lokalen Portkonflikts ändern müssen, ändern Sie den Port in der Projektdatei Properties/launchSettings.json.

Navigieren Sie zu den Seiten der App, um zu bestätigen, dass die App normal funktioniert.

Führen Sie in einer Befehlsshell, die im Stammordner des Projekts geöffnet wurde, den dotnet watch-Befehl aus, um die App zu kompilieren und zu starten:

dotnet watch

Die App wird kompiliert und ausgeführt. Die App wird bei http://localhost:{PORT} gestartet, wobei {PORT} der zufällige Port ist, der der App beim Erstellen zugewiesen wird. Wenn Sie den Port aufgrund eines lokalen Portkonflikts ändern müssen, ändern Sie den Port in der Projektdatei Properties/launchSettings.json.

Navigieren Sie zu den Seiten der App, um zu bestätigen, dass die App normal funktioniert.

Beenden der App

Beenden Sie die App mit einem der folgenden Ansätze:

• Schließen Sie das Browserfenster.
• In Visual Studio:

  • Verwenden Sie die Schaltfläche „Beenden“ in der Menüleiste von Visual Studio:

    

  • Drücken Sie UMSCHALTTASTE+F5 auf der Tastatur.

Beenden Sie die App mit dem folgenden Ansatz:

1. Schließen Sie das Browserfenster.
2. Führen Sie in VS Code eine der folgenden Aktionen aus:
   • Wählen Sie im Menü AusführenDebuggen beenden aus.
   • Drücken Sie UMSCHALTTASTE+F5 auf der Tastatur.

Beenden Sie die App mit dem folgenden Ansatz:

1. Schließen Sie das Browserfenster.
2. Drücken Sie in der Befehlsshell STRG+C.

Überprüfen der Projektdateien

In den folgenden Abschnitten erhalten Sie eine Übersicht über die Ordner und Dateien des Projekts.

Wenn Sie die App erstellen, müssen Sie in den folgenden Abschnitten keine Änderungen an den Projektdateien vornehmen. Wenn Sie die Beschreibungen der Ordner und Dateien lesen, untersuchen Sie sie im Projekt.

Wenn Sie nur die Artikel lesen und die App nicht erstellen, können Sie sich auf die fertige Beispiel-App im GitHub-Repository für Blazor-Beispiele (dotnet/blazor-samples) beziehen. Wählen Sie den neuesten Versionsordner im Repository aus. Der Beispielordner für das Projekt dieses Tutorials trägt den Namen BlazorWebAppMovies. Die Beispiel-App ist die fertige Version der App, nachdem alle Schritte der Lernprogrammreihe ausgeführt wurden. Code im Beispiel stimmt nicht immer mit den Schritten des Tutorials bis zum Ende der Reihe überein.

Properties-Ordner

Der Properties-Ordner enthält die Konfiguration der Entwicklungsumgebung in der launchSettings.json-Datei.

wwwroot-Ordner

Der wwwroot-Ordner enthält statische Objekte, z. B. Bild-, JavaScript– (.js) und Stylesheet- (.css) Dateien.

Components-, Components/Pages- und Components/Layout-Ordner

Diese Ordner enthalten Razor-Komponenten, die häufig als „Komponenten“ bezeichnet werden, und unterstützende Dateien. Eine Komponente ist ein eigenständiger Teil der Benutzeroberfläche mit optionaler Verarbeitungslogik. Komponenten können geschachtelt, wiederverwendet und für mehrere Projekte freigegeben werden.

Komponenten werden mithilfe einer Kombination aus C# und HTML-Markup in Razor-Komponentendateien mit der Dateierweiterung .razor implementiert.

In der Regel werden Komponenten, die in anderen Komponenten geschachtelt sind und nicht direkt an einer URL erreichbar („routingfähig“) sind, in den Components-Ordner abgelegt. Komponenten, die über eine URL geroutet werden können, werden in der Regel im Components/Pages-Ordner platziert.

Der Components/Layout-Ordner enthält die folgenden Layoutkomponenten und Stylesheets:

• MainLayout-Komponente (MainLayout.razor): Die hauptsächliche 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. Diese Komponente verwendet mehrere NavLink-Komponenten, um Navigationslinks zu anderen Razor-Komponenten zu rendern.
• NavMenu.razor.css: Stylesheet für das Navigationsmenü der App.

Components/_Imports.razor-Datei

Die _Imports-Datei (_Imports.razor) enthält allgemeine Razor-Direktiven, die in die Razor-Komponenten der App aufgenommen werden sollen. Razor-Direktiven sind reservierte Schlüsselwörter mit dem Präfix @, die im Razor-Markup angezeigt werden, und ändern die Art und Weise, wie Komponentenmarkup oder Komponentenelemente kompiliert werden oder funktionieren.

Components/App.razor-Datei

Die App-Komponente (App.razor) ist die Stammkomponente der App, die Folgendes beinhaltet:

• HTML-Markup.
• Die Routes-Komponente.
• Das Blazor-Skript (<script>-Tag für blazor.web.js).

Die Stammkomponente ist die erste Komponente, die die App lädt.

Components/Routes.razor-Datei

Die Routes-Komponente (Routes.razor) richtet Routing für die App ein.

appsettings.json-Datei

Die appsettings.json-Datei enthält Konfigurationsdaten, z. B. Verbindungszeichenfolgen.

Warnung

Speichern Sie keine geheimen App-Schlüssel, Verbindungszeichenfolge s, Anmeldeinformationen, Kennwörter, persönliche Identifikationsnummern (PINs), privaten C#/.NET-Code oder private Schlüssel/Token im clientseitigen Code, der immer unsicher ist. In Test-/Staging- und Produktionsumgebungen sollten serverseitiger Blazor Code und Web-APIs sichere Authentifizierungsflüsse verwenden, die die Authentifizierung von Anmeldeinformationen innerhalb von Projektcode- oder Konfigurationsdateien vermeiden. Außerhalb der lokalen Entwicklungstests wird empfohlen, die Verwendung von Umgebungsvariablen zum Speichern vertraulicher Daten zu vermeiden, da Umgebungsvariablen nicht der sicherste Ansatz sind. Für lokale Entwicklungstests wird das Tool "Geheimer Manager" zum Sichern vertraulicher Daten empfohlen. Weitere Informationen finden Sie unter "Sichere Verwaltung vertraulicher Daten und Anmeldeinformationen".

Program.cs-Datei

Die Program.cs-Datei enthält Code zum Erstellen der App und zum Konfigurieren der Pipeline für die Verarbeitung von Anfragen der App.

Die Reihenfolge der Zeilen in der Projektvorlage der Blazor Web App unterscheidet sich in verschiedenen Versionen von .NET, sodass die Reihenfolge der Zeilen in der Datei Program.cs möglicherweise nicht mit der Reihenfolge der Zeilen übereinstimmt, die in diesem Abschnitt behandelt werden.

A WebApplicationBuilder erstellt die App mit vorkonfigurierten Standardwerten:

var builder = WebApplication.CreateBuilder(args);

Razor Komponentendienste werden der App durch Aufrufen AddRazorComponentshinzugefügt, wodurch Razor Komponenten Code auf dem Server rendern und ausführen können, und AddInteractiveServerComponents Dienste zur Unterstützung des Renderns interaktiver Serverkomponenten hinzugefügt werden:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Die WebApplication (von der app-Variable im folgenden Code gehaltene) wird erstellt:

var app = builder.Build();

Als Nächstes wird die HTTP-Anforderungspipeline konfiguriert.

In der Entwicklungsumgebung:

• Middleware für Ausnahmehandler (UseExceptionHandler) verarbeitet Fehler und zeigt während der Ausführung der Entwicklungs-App eine Entwickler-Ausnahmeseite an.
• Middleware für HTTP Strict Transport Security Protocol (HSTS) (UseHsts) verarbeitet HSTS.

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    app.UseHsts();
}

Middleware für HTTPS-Umleitung (UseHttpsRedirection) erzwingt das HTTPS-Protokoll, indem HTTP-Anforderungen an HTTPS umgeleitet werden, wenn ein HTTPS-Port verfügbar ist:

app.UseHttpsRedirection();

Middleware für Fälschungsschutz (UseAntiforgery) erzwingt Fälschungsschutz für die Formularverarbeitung:

app.UseAntiforgery();

Zuordnen statischer Ressourcen-Routingendpunktkonventionen (MapStaticAssets) ordnet statische Dateien wie Bilder, Skripts und Stylesheets zu, die während des Builds als Endpunkte erstellt werden:

app.MapStaticAssets();

MapRazorComponents ordnet Komponenten, die in der Stammkomponente App definiert sind, der angegebenen .NET-Assembly zu und rendert routingfähige Komponenten und AddInteractiveServerRenderMode konfiguriert die interaktive serverseitige Renderingunterstützung (interaktive SSR) für die App:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Hinweis

Die Erweiterungsmethoden AddInteractiveServerComponents aktivieren AddRazorComponents und AddInteractiveServerRenderMode aktivieren MapRazorComponents die App, die interaktive SSR übernehmen kann, was erst im letzten Teil der Lernprogrammreihe für Interaktivität relevant ist. In den nächsten Artikeln werden die Komponenten der App nur noch statische SSR verwenden.

Die App wird ausgeführt, indem Run in der WebApplication (app) aufgerufen wird:

app.Run();

Problembehandlung mit dem fertiggestellten Beispiel

Wenn Sie beim Verfolgen des Tutorials auf ein Problem stoßen, das Sie anhand des Textes nicht lösen können, vergleichen Sie Ihren Code mit dem fertigen Projekt im Blazor-Beispiele-Repository:

Blazor GitHub-Beispielrepository (dotnet/blazor-samples)

Wählen Sie den Ordner mit der neuesten Version. Der Beispielordner für das Projekt dieses Tutorials trägt den Namen BlazorWebAppMovies.

Zusätzliche Ressourcen

Bei Verwendung von VS Code oder der .NET CLI übernimmt diese Tutorialserie ein unsicheres HTTP-Protokoll, um den Übergang zu SSL/HTTPS-Sicherheit für Linux- und macOS-Benutzende zu erleichtern. Weitere Informationen zur Übernahme von SSL/HTTPS finden Sie unter Erzwingen von HTTPS in ASP.NET Core.

Nächste Schritte

Weiter: Hinzufügen eines Modells und Erstellen eines Gerüsts für das Modell