Tutorial: Erste Schritte mit Razor Pages in ASP.NET Core

Von Rick Anderson

Dies ist das erste Tutorial einer Reihe, in der Sie Grundlegendes zur Erstellung einer ASP.NET Core-Web-App mit Razor Pages erfahren.

Eine erweiterte Einführung für Entwickler, die mit Controllern und Ansichten vertraut sind, finden Sie unter Einführung in Razor Pages. Sie können eine Videoeinführung unter Entity Framework Core für Anfänger ansehen.

Wenn Sie mit der ASP.NET Core Entwicklung noch nicht vertraut sind und sich nicht sicher sind, welche ASP.NET Core-Webbenutzeroberfläche Ihren Anforderungen am besten entspricht, finden Sie weitere Informationen unter Auswählen einer ASP.NET Core-Benutzeroberfläche.

Am Ende dieses Tutorials verfügen Sie über eine Razor Pages-Web-App, mit der eine Filmdatenbank verwaltet werden kann.

Voraussetzungen

Visual Studio

• Visual Studio 2022 Preview mit der Workload ASP.NET- und Webentwicklung

  

Visual Studio Code

• Visual Studio Code
• C#-Entwicklerkit für Visual Studio Code
• .NET 9.0 SDK

Sie können den Visual Studio Code-Anweisungen unter macOS, Linux oder Windows folgen. Es können Änderungen erforderlich sein, wenn Sie eine andere integrierte Entwicklungsumgebung (Integrated Development Environment, IDE) als Visual Studio Code verwenden.

Erstellen einer Razor Pages-Web-App

Visual Studio

• Starten Sie Visual Studio, und wählen Sie Neues Projekt aus.

• Wählen Sie im Dialogfeld Neues Projekt erstellen die Option ASP.NET Core Webanwendung (Razor Seiten)>Weiter.

• Geben Sie RazorPagesMovie im Dialogfeld Neues Projekt konfigurieren für Projektname ein. Es ist wichtig, dem Projekt den Namen RazorPagesMovie mit genau dieser Groß-/Kleinschreibung zu geben, damit die Namespaces übereinstimmen, wenn Sie Beispielcode kopieren und einfügen.

• Wählen Sie Weiter aus.

• Im Dialogfeld Zusätzliche Informationen:

  • Wählen Sie .NET 9.0 (Vorschau) aus.
  • Überprüfen Sie, ob Keine Anweisungen der obersten Ebene verwenden deaktiviert ist.

• Klicken Sie auf Erstellen.

  

  Das folgende Startprojekt wird erstellt:

  

Alternative Ansätze zum Erstellen des Projekts finden Sie unter Erstellen eines neuen Projekts in Visual Studio.

Visual Studio Code

Das Tutorial setzt voraus, dass Sie mit Visual Studio Code vertraut sind. Weitere Informationen finden Sie unter Erste Schritte mit Visual Studio Code.

• Wählen Sie im Menü Terminal die Option Neues Terminal aus, um das integrierte Terminal zu öffnen.

• Wechseln Sie zu dem Verzeichnis (cd), in dem Projekt enthalten sein soll.

• Führen Sie die folgenden Befehle aus:

  dotnet new webapp -o RazorPagesMovie
  code -r RazorPagesMovie
  

  Der Befehl dotnet new erstellt ein neues Razor Pages-Projekt im Ordner RazorPagesMovie.

  Der Befehl code öffnet den Ordner RazorPagesMovie in der aktuellen Instanz von Visual Studio Code.

In Visual Studio Code wird ggf. ein Dialogfeld mit der Frage Vertrauen Sie den Autoren der Dateien in diesem Ordner? angezeigt.

• Wenn Sie allen Dateien im übergeordneten Ordner vertrauen, wählen Sie Den Autoren aller Dateien im übergeordneten Ordner vertrauen aus.
• Wählen Sie Ja, ich vertraue den Autoren aus, da der Projektordner von .NET generierte Dateien enthält.
• Wenn Visual Studio Code Sie auffordert, Ressourcen zum Erstellen und Debuggen des Projekts hinzuzufügen, wählen Sie Ja aus. Wenn Visual Studio Code keine Build- und Debugressourcen hinzufügen kann, wählen Sie Ansicht>Befehlspalette aus, und geben Sie „.NET“ in das Suchfeld ein. Wählen Sie in der Liste der Befehle den Befehl .NET: Generate Assets for Build and Debug aus.

Visual Studio Code fügt einen .vscode-Ordner mit den generierten launch.json- und tasks.json-Dateien hinzu.

Ausführen der App

Visual Studio

Wählen Sie RazorPagesMovie im Projektmappen-Explorer aus und drücken Sie dann Strg+F5, um die App ohne den Debugger 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 IIS Express-SLL-Zertifikat vertrauen möchten.

Das folgende Dialogfeld wird angezeigt:

Klicken Sie auf Ja, wenn Sie zustimmen möchten, dass das Entwicklungszertifikat vertrauenswürdig ist.

Informationen dazu, wie Sie dem Firefox-Browser vertrauen, finden Sie unter Firefox-Zertifikatfehler SEC_ERROR_INADEQUATE_KEY_USAGE.

Visual Studio:

• Führt die App aus, die den KestrelServer startet.
• Startet den Standardbrowser unter https://localhost:<port>, der die Benutzeroberfläche der Apps anzeigt. <port> ist der zufällige Port, der zugewiesen wird, wenn die App erstellt wurde.

Schließen Sie das Browserfenster.

Visual Studio Code

• Vertrauen Sie dem HTTPS-Entwicklungszertifikat, indem Sie den folgenden Befehl ausführen:

  dotnet dev-certs https --trust
  

  Der vorherige Befehl zeigt das folgende Dialogfeld an, sofern das Zertifikat nicht zuvor schon als vertrauenswürdig eingestuft wurde:

  

• Klicken Sie auf Ja, wenn Sie zustimmen möchten, dass das Entwicklungszertifikat vertrauenswürdig ist.

  Weitere Informationen finden Sie im Abschnitt Festlegen des HTTPS-Entwicklungszertifikats von ASP.NET Core als vertrauenswürdig des Artikels SSL erzwingen.

Informationen dazu, wie Sie dem Firefox-Browser vertrauen, finden Sie unter Firefox-Zertifikatfehler SEC_ERROR_INADEQUATE_KEY_USAGE.

Drücken Sie in Visual Studio Code STRG+F5 (Windows) oder ⌘+F5 (macOS), um die App ohne Debugging auszuführen.

Wählen Sie am Prompt Debugger auswählen C#.

Wählen Sie in der Eingabeaufforderung Startkonfiguration wählen C#: RazorPagesMovie [https] RazorPagesMovie.

Der Standardbrowser wurde mit der folgenden URL gestartet: https://localhost:<port>, wobei <port> die zufällig generierte Portnummer ist.

Schließen Sie das Browserfenster.

Wählen Sie in Visual Studio Code im Menü Ausführen die Option Debuggen beenden oder drücken Sie UMSCHALT+F5, um die App zu beenden.

Überprüfen der Projektdateien

In den folgenden Abschnitten erhalten Sie eine Übersicht über die wichtigsten Projektordner und -dateien, mit denen Sie in späteren Tutorials arbeiten werden.

Ordner „Seiten“

Enthält Razor-Seiten und unterstützende Dateien. Jede Razor-Seite besteht aus einem Dateienpaar:

• Einer .cshtml-Datei mit HTML-Markup mit C#-Code in Razor-Syntax.
• Einer .cshtml.cs-Datei mit C#-Code zum Verarbeiten von Seitenereignissen.

Unterstützende Dateien haben Namen, die mit einem Unterstrich beginnen. Zum Beispiel sind in der Datei _Layout.cshtml Benutzeroberflächenelemente konfiguriert, die für alle Seiten gelten. _Layout.cshtml richtet das Navigationsmenü oben auf der Seite und den Urheberrechtshinweis unten auf der Seite ein. Weitere Informationen finden Sie unter Layout in ASP.NET Core.

Ordner „wwwroot“

Enthält statische Ressourcen, z. B. HTML-, JavaScript- und CSS-Dateien. Weitere Informationen finden Sie unter Statische Dateien in ASP.NET Core.

appsettings.json

Enthält Konfigurationsdaten, z. B. Verbindungszeichenfolgen. Weitere Informationen finden Sie unter Konfiguration in ASP.NET Core.

Program.cs

Enthält den folgenden Code:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseRouting();

app.UseAuthorization();

app.MapStaticAssets();
app.MapRazorPages();

app.Run();

Mit den folgenden Codezeilen in dieser Datei wird eine WebApplicationBuilder-Instanz mit vorkonfigurierten Standardwerten erstellt, Unterstützung für Razor Pages zum DI-Container (Dependency Injection) hinzugefügt und die App kompiliert:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

Die Seite mit Ausnahmen für Entwickler ist standardmäßig aktiviert und enthält hilfreiche Informationen zu Ausnahmen. Produktions-Apps sollten nicht im Entwicklungsmodus ausgeführt werden, da die Seite mit Ausnahmen für Entwickler vertrauliche Informationen weitergeben kann.

Der folgende Code legt den Ausnahmeendpunkt auf /Error fest und aktiviert HTTP Strict Transport Security Protocol (HSTS), wenn die App nicht im Entwicklungsmodus ausgeführt wird:

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

Der vorangehende Code wird beispielsweise ausgeführt, wenn sich die App im Produktions- oder Testmodus befindet. Weitere Informationen finden Sie unter Verwenden mehrerer Umgebungen in ASP.NET Core.

Der folgende Code aktiviert verschiedene Middleware:

• app.UseHttpsRedirection();: Leitet alle HTTP-Anforderungen an HTTPS um
• app.UseRouting();: Fügt der Middlewarepipeline einen Routenabgleich hinzu Weitere Informationen finden Sie unter Routing in ASP.NET Core.
• app.UseAuthorization();: Autorisiert einen Benutzer für den Zugriff auf sichere Ressourcen. Diese App verwendet keine Autorisierung, daher kann diese Zeile entfernt werden.
• app.MapRazorPages();: Konfiguriert das Endpunktrouting für Razor Pages
• app.MapStaticAssets();: Optimiert die Bereitstellung von statischen Assets in einer App, wie z. B. HTML, CSS, Bilder und JavaScript. Weitere Informationen finden Sie unter Neuerungen bei ASP.NET Core 9.0.
• app.Run();: Führt die App aus.

Problembehandlung mit dem fertiggestellten Beispiel

Wenn Sie auf ein Problem stoßen, das Sie nicht lösen können, vergleichen Sie Ihren den Code mit dem vollständigen Projekt. Anzeigen oder Herunterladen des fertiggestellten Projekts (Downloadanleitung).

Nächste Schritte

Weiter: Hinzufügen eines Modells