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.

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 der Reihe verfügen Sie über eine App, mit der eine Filmdatenbank verwaltet werden kann.

Zeigen Sie Beispielcode an, oder laden Sie diesen herunter (Vorgehensweise zum Herunterladen).

In diesem Tutorial:

  • Sie erstellen eine Razor Pages-Web-App.
  • Führen Sie die App aus.
  • Überprüfen Sie die Projektdateien.

Am Ende dieses Tutorials verfügen Sie über eine funktionsfähige Razor Pages-Web-App, die der Sie in späteren Tutorials weiterentwickeln werden.

Seite Home oder Index

Voraussetzungen

Erstellen einer Razor Pages-Web-App

  1. Starten Sie Visual Studio, und wählen Sie Neues Projekt erstellen aus. Weitere Informationen finden Sie unter Erstellen eines neuen Projekts in Visual Studio.

    Erstellen eines neuen Projekts im Startfenster

  2. Wählen Sie im Dialogfeld Neues Projekt erstellen die Option ASP.NET Core-Webanwendung aus, und klicken Sie dann auf Weiter.

    Erstellen einer ASP.NET Core-Webanwendung

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

  4. Klicken Sie auf Erstellen.

    Konfigurieren des Projekts

  5. Wählen Sie im Dialogfeld Neue ASP.NET Core-Webanwendung erstellen Folgendes aus:

    1. In den Dropdownmenüs .NET Core und ASP.NET Core 5.0.
    2. Webanwendung
    3. Erstellen:

    Auswählen von „ASP.NET Core-Web-App“

    Das folgende Startprojekt wird erstellt:

    Projektmappen-Explorer

Ausführen der App

  • Drücken Sie STRG+F5, um die Ausführung ohne den Debugger zu starten.

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

    Dieses Projekt ist für die Verwendung von SSL konfiguriert. Sie können sich dazu entscheiden, dem selbstsignierten Zertifikat zu vertrauen, das von IIS Express erstellt wurde, um SSL-Warnungen im Browser zu umgehen. Möchten Sie dem IIS Express-SLL-Zertifikat vertrauen?

    Wählen Sie Ja aus, wenn Sie dem IIS Express-SLL-Zertifikat vertrauen möchten.

    Das folgende Dialogfeld wird angezeigt:

    Dialogfeld „Sicherheitswarnung“

    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 startet IIS Express und führt die App aus. Die Adressleiste zeigt localhost:port# an, nicht example.com. Das liegt daran, dass es sich bei localhost um den Standardhostnamen für den lokalen Computer handelt. „Localhost“ dient nur Webanforderungen vom lokalen Computer. Wenn in Visual Studio ein Webprojekt erstellt wird, wird für den Webserver ein zufälliger Port verwendet.

Überprüfen der Projektdateien

Es folgt eine Übersicht über die Hauptprojektordner 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. Mit dieser Datei werden das Navigationsmenü oben auf der Seite und der Urheberrechtshinweis unten auf der Seite eingerichtet. 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 Einstiegspunkt für die App. Weitere Informationen finden Sie unter Generischer .NET-Host in ASP.NET Core.

Startup.cs

Diese Datei enthält Code, mit dem das App-Verhalten konfiguriert wird. Weitere Informationen finden Sie unter Anwendungsstart in ASP.NET Core.

Nächste Schritte

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.

Am Ende der Reihe verfügen Sie über eine App, mit der eine Filmdatenbank verwaltet werden kann.

Zeigen Sie Beispielcode an, oder laden Sie diesen herunter (Vorgehensweise zum Herunterladen).

In diesem Tutorial:

  • Sie erstellen eine Razor Pages-Web-App.
  • Führen Sie die App aus.
  • Überprüfen Sie die Projektdateien.

Am Ende dieses Tutorials verfügen Sie über eine funktionsfähige Razor Pages-Web-App, auf der Sie in späteren Tutorials aufbauen werden.

Die Home- oder Index-Seite

Voraussetzungen

Erstellen einer Razor Pages-Web-App

  • Klicken Sie in Visual Studio im Menü Datei auf Neu > Projekt.

  • Erstellen Sie eine neue ASP.NET Core-Webanwendung, und klicken Sie auf Weiter. Erstellen des neuen Projekts im Startfenster

  • Nennen Sie das Projekt RazorPagesMovie. Es ist wichtig, den Namen RazorPagesMovie zu verwenden, damit die Namespaces übereinstimmen, wenn Sie Code kopieren und einfügen. Benennen des Projekts

  • Klicken Sie in der Dropdownliste nacheinander auf ASP.NET Core 3.1, Webanwendung und Erstellen.

Auswählen von „ASP.NET Core-Webanwendung“

Das folgende Startprojekt wird erstellt:

Projektmappen-Explorer

Ausführen der App

  • Drücken Sie STRG+F5, um die Ausführung ohne den Debugger zu starten.

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

    Dieses Projekt ist für die Verwendung von SSL konfiguriert. Sie können sich dazu entscheiden, dem selbstsignierten Zertifikat zu vertrauen, das von IIS Express erstellt wurde, um SSL-Warnungen im Browser zu umgehen. Möchten Sie dem IIS Express-SLL-Zertifikat vertrauen?

    Wählen Sie Ja aus, wenn Sie dem IIS Express-SLL-Zertifikat vertrauen möchten.

    Das folgende Dialogfeld wird angezeigt:

    Dialogfeld „Sicherheitswarnung“

    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 startet IIS Express und führt die App aus. Die Adressleiste zeigt localhost:port# an, nicht example.com. Das liegt daran, dass es sich bei localhost um den Standardhostnamen für den lokalen Computer handelt. „Localhost“ dient nur Webanforderungen vom lokalen Computer. Wenn in Visual Studio ein Webprojekt erstellt wird, wird für den Webserver ein zufälliger Port verwendet.

Überprüfen der Projektdateien

Es folgt eine Übersicht über die Hauptprojektordner 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. Mit dieser Datei werden das Navigationsmenü oben auf der Seite und der Urheberrechtshinweis unten auf der Seite eingerichtet. Weitere Informationen finden Sie unter Layout in ASP.NET Core.

Ordner „wwwroot“

Enthält statische Dateien, 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 Einstiegspunkt für das Programm. Weitere Informationen finden Sie unter Generischer .NET-Host in ASP.NET Core.

Startup.cs

Diese Datei enthält Code, mit dem das App-Verhalten konfiguriert wird. Weitere Informationen finden Sie unter Anwendungsstart in ASP.NET Core.

Nächste Schritte

Dies ist das erste Tutorial aus einer Reihe. In der Reihe lernen Sie die Grundlagen zum Erstellen einer Razor Pages-Web-App mit ASP.NET Core.

Eine erweiterte Einführung für Entwickler, die mit Controllern und Ansichten vertraut sind, finden Sie unter Einführung in Razor Pages.

Am Ende der Reihe verfügen Sie über eine App, mit der eine Filmdatenbank verwaltet werden kann.

Zeigen Sie Beispielcode an, oder laden Sie diesen herunter (Vorgehensweise zum Herunterladen).

In diesem Tutorial:

  • Sie erstellen eine Razor Pages-Web-App.
  • Führen Sie die App aus.
  • Überprüfen Sie die Projektdateien.

Am Ende dieses Tutorials verfügen Sie über eine funktionsfähige Razor Pages-Web-App, auf der Sie in späteren Tutorials aufbauen werden.

Home- oder Index-Seite der App

Voraussetzungen

Warnung

Wenn Sie Visual Studio 2017 verwenden, finden Sie unter dotnet/sdk issue #3124 Informationen zu .NET Core SDK-Versionen, die nicht mit Visual Studio verwendet werden können.

Erstellen einer Razor Pages-Web-App

  • Klicken Sie in Visual Studio im Menü Datei auf Neu > Projekt.

  • Erstellen Sie eine neue ASP.NET Core-Webanwendung, und klicken Sie auf Weiter.

    Erstellen eines neuen Projekts

  • Nennen Sie das Projekt RazorPagesMovie. Es ist wichtig, den Namen RazorPagesMovie zu verwenden, damit die Namespaces übereinstimmen, wenn Sie Code kopieren und einfügen.

    Neues Projekt konfigurieren

  • Klicken Sie in der Dropdownliste auf ASP.NET Core 2.2, auf Webanwendung und anschließend auf Erstellen.

Auswählen von „Webanwendung“

Das folgende Startprojekt wird erstellt:

Projektmappen-Explorer

Ausführen der App

  • Drücken Sie STRG+F5, um die Ausführung ohne den Debugger zu starten.

    Das Starten der App mit STRG+F5 (Nicht-Debugmodus) ermöglicht die Änderung des Codes, das Speichern der Datei, das Aktualisieren des Browsers und das Anzeigen von Codeänderungen. Viele Entwickler bevorzugen den Nicht-Debugmodus, um die App schnell zu starten und Änderungen anzuzeigen.

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

    Dieses Projekt ist für die Verwendung von SSL konfiguriert. Sie können sich dazu entscheiden, dem selbstsignierten Zertifikat zu vertrauen, das von IIS Express erstellt wurde, um SSL-Warnungen im Browser zu umgehen. Möchten Sie dem IIS Express-SLL-Zertifikat vertrauen?

    Wählen Sie Ja aus, wenn Sie dem IIS Express-SLL-Zertifikat vertrauen möchten.

    Das folgende Dialogfeld wird angezeigt:

    Dialogfeld „Sicherheitswarnung“

    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 startet IIS Express und führt die App aus. Die Adressleiste zeigt localhost:port# an, nicht example.com. Das liegt daran, dass es sich bei localhost um den Standardhostnamen für den lokalen Computer handelt. „Localhost“ dient nur Webanforderungen vom lokalen Computer. Wenn in Visual Studio ein Webprojekt erstellt wird, wird für den Webserver ein zufälliger Port verwendet.

  • Wählen Sie auf der Homepage der App Akzeptieren aus, um der Nachverfolgung zuzustimmen.

    Diese App verfolgt keine persönlichen Informationen nach, aber die Projektvorlage enthält das Einverständniserklärungsfeature für den Fall, dass die App die allgemeine Datenschutz-Grundverordnung (DSGVO) der Europäischen Union erfüllen muss.

    Zustimmungsfunktion der Home- oder Index-Seite

    Die folgende Abbildung zeigt die App, nachdem Sie die Zustimmung zur Nachverfolgung gegeben haben:

    Home- oder Index-Seite der Anwendung

Überprüfen der Projektdateien

Es folgt eine Übersicht über die Hauptprojektordner 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. Mit dieser Datei werden das Navigationsmenü oben auf der Seite und der Urheberrechtshinweis unten auf der Seite eingerichtet. Weitere Informationen finden Sie unter Layout in ASP.NET Core.

Razor-Seiten werden von PageModel abgeleitet. Gemäß der Konvention wird die von PageModel abgeleitete Klasse <PageName>Model genannt.

Ordner „wwwroot“

Enthält statische Dateien, 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 Einstiegspunkt für das Programm. Weitere Informationen finden Sie unter Generischer .NET-Host in ASP.NET Core.

Startup.cs

Enthält Code, mit dem das App-Verhalten konfiguriert wird, beispielsweise, ob die App Zustimmung für cookies erfordert. Weitere Informationen finden Sie unter Anwendungsstart in ASP.NET Core.

Zusätzliche Ressourcen

Nächste Schritte