Tutorial: Erste Schritte mit Razor Pages in ASP.NET CoreTutorial: Get started with Razor Pages in ASP.NET Core

Von Rick AndersonBy 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.This is the first tutorial of a series that teaches the basics of building an ASP.NET Core Razor Pages web app.

Eine erweiterte Einführung für Entwickler, die mit Controllern und Ansichten vertraut sind, finden Sie unter Einführung in Razor Pages.For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages.

Am Ende der Reihe verfügen Sie über eine App, mit der eine Filmdatenbank verwaltet werden kann.At the end of the series, you'll have an app that manages a database of movies.

Zeigen Sie Beispielcode an, oder laden Sie diesen herunter (Vorgehensweise zum Herunterladen).View or download sample code (how to download).

In diesem Tutorial:In this tutorial, you:

  • Create (erstellen) Sie eine Razor Pages-Web-App.Create a Razor Pages web app.
  • Führen Sie die App aus.Run the app.
  • Überprüfen Sie die Projektdateien.Examine the project files.

Am Ende dieses Tutorials verfügen Sie über eine funktionsfähige Razor Pages-Web-App, die der Sie in späteren Tutorials weiterentwickeln werden.At the end of this tutorial, you'll have a working Razor Pages web app that you'll enhance in later tutorials.

Seite „Home“ oder Index

VoraussetzungenPrerequisites

Create (Erstellen) einer Razor Pages-Web-AppCreate a Razor Pages web app

  1. Starten Sie Visual Studio, und wählen Sie CreateNeues Projekt erstellen aus.Start Visual Studio and select Create a new project. Weitere Informationen finden Sie unterCreate (Erstellen) eines neuen Projekts in Visual Studio.For more information, see Create a new project in Visual Studio.

    Create (Erstellen) eines neuen Projekts im Startfenster

  2. Wählen Sie im Dialogfeld CreateNeues Projekt erstellen die Option ASP.NET Core-Webanwendung aus, und klicken Sie dann auf Weiter.In the Create a new project dialog, select ASP.NET Core Web Application, and then select Next.

    neue ASP.NET Core-Webanwendung

  3. Geben Sie RazorPagesMovie im Dialogfeld Neues Projekt konfigurieren für Projektname ein.In the Configure your new project dialog, enter RazorPagesMovie for Project name. 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.It's important to name the project RazorPagesMovie, including matching the capitalization, so the namespaces will match when you copy and paste example code.

  4. Klicken Sie auf Create (Zur Kasse).Select Create.

    neue ASP.NET Core-Webanwendung

  5. Wählen Sie im Dialogfeld CreateNeue ASP.NET Core-Webanwendung erstellen Folgendes aus:In the Create a new ASP.NET Core web application dialog, select:

    1. In den Dropdownmenüs .NET Core und ASP.NET Core 5.0..NET Core and ASP.NET Core 5.0 in the dropdowns.
    2. WebanwendungWeb Application.
    3. Create.Create.

    neue ASP.NET Core-Webanwendung

    Das folgende Startprojekt wird erstellt:The following starter project is created:

    Projektmappen-Explorer

Ausführen der AppRun the app

  • Drücken Sie STRG+F5, um die Ausführung ohne den Debugger zu starten.Press Ctrl+F5 to run without the debugger.

    In Visual Studio wird das folgende Dialogfeld angezeigt:Visual Studio displays the following dialog:

    Dieses Projekt ist für die Verwendung von SSL konfiguriert.

    Wählen Sie Ja aus, wenn Sie dem IIS Express-SLL-Zertifikat vertrauen möchten.Select Yes if you trust the IIS Express SSL certificate.

    Das folgende Dialogfeld wird angezeigt:The following dialog is displayed:

    Dialogfeld „Sicherheitswarnung“

    Klicken Sie auf Ja, wenn Sie zustimmen möchten, dass das Entwicklungszertifikat vertrauenswürdig ist.Select Yes if you agree to trust the development certificate.

    For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

    Visual Studio startet IIS Express und führt die App aus.Visual Studio starts IIS Express and runs the app. Die Adressleiste zeigt localhost:port# an, nicht example.com.The address bar shows localhost:port# and not something like example.com. Das liegt daran, dass es sich bei localhost um den Standardhostnamen für den lokalen Computer handelt.That's because localhost is the standard hostname for the local computer. „Localhost“ dient nur Webanforderungen vom lokalen Computer.Localhost only serves web requests from the local computer. Wenn in Visual Studio ein Webprojekt erstellt wird, wird für den Webserver ein zufälliger Port verwendet.When Visual Studio creates a web project, a random port is used for the web server.

Überprüfen der ProjektdateienExamine the project files

Es folgt eine Übersicht über die Hauptprojektordner und -dateien, mit denen Sie in späteren Tutorials arbeiten werden.Here's an overview of the main project folders and files that you'll work with in later tutorials.

Ordner „Seiten“Pages folder

Enthält Razor-Seiten und unterstützende Dateien.Contains Razor pages and supporting files. Jede Razor-Seite besteht aus einem Dateienpaar:Each Razor page is a pair of files:

  • Einer .cshtml-Datei mit HTML-Markup mit C#-Code in Razor-Syntax.A .cshtml file that has HTML markup with C# code using Razor syntax.
  • Einer .cshtml.cs-Datei mit C#-Code zum Verarbeiten von Seitenereignissen.A .cshtml.cs file that has C# code that handles page events.

Unterstützende Dateien haben Namen, die mit einem Unterstrich beginnen.Supporting files have names that begin with an underscore. Zum Beispiel sind in der Datei _Layout.cshtml Benutzeroberflächenelemente konfiguriert, die für alle Seiten gelten.For example, the _Layout.cshtml file configures UI elements common to all pages. Mit dieser Datei werden das Navigationsmenü oben auf der Seite und der Urheberrechtshinweis unten auf der Seite eingerichtet.This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. Weitere Informationen finden Sie unter Layout in ASP.NET Core.For more information, see Layout in ASP.NET Core.

Ordner „wwwroot“wwwroot folder

Enthält statische Ressourcen, z. B. HTML-, JavaScript- und CSS-Dateien.Contains static assets, like HTML files, JavaScript files, and CSS files. Weitere Informationen finden Sie unter Statische Dateien in ASP.NET Core.For more information, see Statische Dateien in ASP.NET Core.

appsettings.json

Enthält Konfigurationsdaten, z. B. Verbindungszeichenfolgen.Contains configuration data, like connection strings. Weitere Informationen finden Sie unter Konfiguration in ASP.NET Core.For more information, see Konfiguration in ASP.NET Core.

Program.csProgram.cs

Enthält den Einstiegspunkt für die App.Contains the entry point for the app. Weitere Informationen finden Sie unter Generischer .NET-Host in ASP.NET Core.For more information, see Generischer .NET-Host in ASP.NET Core.

Startup.csStartup.cs

Diese Datei enthält Code, mit dem das App-Verhalten konfiguriert wird.Contains code that configures app behavior. Weitere Informationen finden Sie unter Anwendungsstart in ASP.NET Core.For more information, see Anwendungsstart in ASP.NET Core.

Nächste SchritteNext steps

Dies ist das erste Tutorial einer Reihe, in der Sie Grundlegendes zur Erstellung einer ASP.NET Core-Web-App mit Razor Pages erfahren.This is the first tutorial of a series that teaches the basics of building an ASP.NET Core Razor Pages web app.

Eine erweiterte Einführung für Entwickler, die mit Controllern und Ansichten vertraut sind, finden Sie unter Einführung in Razor Pages.For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages.

Am Ende der Reihe verfügen Sie über eine App, mit der eine Filmdatenbank verwaltet werden kann.At the end of the series, you'll have an app that manages a database of movies.

Zeigen Sie Beispielcode an, oder laden Sie diesen herunter (Vorgehensweise zum Herunterladen).View or download sample code (how to download).

In diesem Tutorial:In this tutorial, you:

  • Create (erstellen) Sie eine Razor Pages-Web-App.Create a Razor Pages web app.
  • Führen Sie die App aus.Run the app.
  • Überprüfen Sie die Projektdateien.Examine the project files.

Am Ende dieses Tutorials verfügen Sie über eine funktionsfähige Razor Pages-Web-App, auf der Sie in späteren Tutorials aufbauen werden.At the end of this tutorial, you'll have a working Razor Pages web app that you'll build on in later tutorials.

Seite „Home“ oder Index

VoraussetzungenPrerequisites

Create (Erstellen) einer Razor Pages-Web-AppCreate a Razor Pages web app

  • Klicken Sie in Visual Studio im Menü Datei auf Neu > Projekt.From the Visual Studio File menu, select New > Project.

  • Create (Erstellen) Sie eine neue ASP.NET Core-Webanwendung, und klicken Sie auf Weiter.Create a new ASP.NET Core Web Application and select Next. neue ASP.NET Core-Webanwendungnew ASP.NET Core Web Application

  • Nennen Sie das Projekt RazorPagesMovie.Name the project RazorPagesMovie. Es ist wichtig, den Namen RazorPagesMovie zu verwenden, damit die Namespaces übereinstimmen, wenn Sie Code kopieren und einfügen.It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code. neue ASP.NET Core-Webanwendungnew ASP.NET Core Web Application

  • Wählen Sie in der Dropdownliste nacheinander ASP.NET Core 3.1, Webanwendung und Create (Erstellen) aus.Select ASP.NET Core 3.1 in the dropdown, Web Application, and then select Create.

neue ASP.NET Core-Webanwendung

Das folgende Startprojekt wird erstellt:The following starter project is created:

Projektmappen-Explorer

Ausführen der AppRun the app

  • Drücken Sie STRG+F5, um die Ausführung ohne den Debugger zu starten.Press Ctrl+F5 to run without the debugger.

    In Visual Studio wird das folgende Dialogfeld angezeigt:Visual Studio displays the following dialog:

    Dieses Projekt ist für die Verwendung von SSL konfiguriert.

    Wählen Sie Ja aus, wenn Sie dem IIS Express-SLL-Zertifikat vertrauen möchten.Select Yes if you trust the IIS Express SSL certificate.

    Das folgende Dialogfeld wird angezeigt:The following dialog is displayed:

    Dialogfeld „Sicherheitswarnung“

    Klicken Sie auf Ja, wenn Sie zustimmen möchten, dass das Entwicklungszertifikat vertrauenswürdig ist.Select Yes if you agree to trust the development certificate.

    For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

    Visual Studio startet IIS Express und führt die App aus.Visual Studio starts IIS Express and runs the app. Die Adressleiste zeigt localhost:port# an, nicht example.com.The address bar shows localhost:port# and not something like example.com. Das liegt daran, dass es sich bei localhost um den Standardhostnamen für den lokalen Computer handelt.That's because localhost is the standard hostname for the local computer. „Localhost“ dient nur Webanforderungen vom lokalen Computer.Localhost only serves web requests from the local computer. Wenn in Visual Studio ein Webprojekt erstellt wird, wird für den Webserver ein zufälliger Port verwendet.When Visual Studio creates a web project, a random port is used for the web server.

Überprüfen der ProjektdateienExamine the project files

Es folgt eine Übersicht über die Hauptprojektordner und -dateien, mit denen Sie in späteren Tutorials arbeiten werden.Here's an overview of the main project folders and files that you'll work with in later tutorials.

Ordner „Seiten“Pages folder

Enthält Razor-Seiten und unterstützende Dateien.Contains Razor pages and supporting files. Jede Razor-Seite besteht aus einem Dateienpaar:Each Razor page is a pair of files:

  • Einer .cshtml-Datei mit HTML-Markup mit C#-Code in Razor-Syntax.A .cshtml file that has HTML markup with C# code using Razor syntax.
  • Einer .cshtml.cs-Datei mit C#-Code zum Verarbeiten von Seitenereignissen.A .cshtml.cs file that has C# code that handles page events.

Unterstützende Dateien haben Namen, die mit einem Unterstrich beginnen.Supporting files have names that begin with an underscore. Zum Beispiel sind in der Datei _Layout.cshtml Benutzeroberflächenelemente konfiguriert, die für alle Seiten gelten.For example, the _Layout.cshtml file configures UI elements common to all pages. Mit dieser Datei werden das Navigationsmenü oben auf der Seite und der Urheberrechtshinweis unten auf der Seite eingerichtet.This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. Weitere Informationen finden Sie unter Layout in ASP.NET Core.For more information, see Layout in ASP.NET Core.

Ordner „wwwroot“wwwroot folder

Enthält statische Dateien, z. B. HTML-, JavaScript- und CSS-Dateien.Contains static files, like HTML files, JavaScript files, and CSS files. Weitere Informationen finden Sie unter Statische Dateien in ASP.NET Core.For more information, see Statische Dateien in ASP.NET Core.

appsettings.jsonappSettings.json

Enthält Konfigurationsdaten, z. B. Verbindungszeichenfolgen.Contains configuration data, like connection strings. Weitere Informationen finden Sie unter Konfiguration in ASP.NET Core.For more information, see Konfiguration in ASP.NET Core.

Program.csProgram.cs

Enthält den Einstiegspunkt für das Programm.Contains the entry point for the program. Weitere Informationen finden Sie unter Generischer .NET-Host in ASP.NET Core.For more information, see Generischer .NET-Host in ASP.NET Core.

Startup.csStartup.cs

Diese Datei enthält Code, mit dem das App-Verhalten konfiguriert wird.Contains code that configures app behavior. Weitere Informationen finden Sie unter Anwendungsstart in ASP.NET Core.For more information, see Anwendungsstart in ASP.NET Core.

Nächste SchritteNext steps

Dies ist das erste Tutorial aus einer Reihe.This is the first tutorial of a series. In der Reihe lernen Sie die Grundlagen zum Erstellen einer Razor Pages-Web-App mit ASP.NET Core.The series teaches the basics of building an ASP.NET Core Razor Pages web app.

Eine erweiterte Einführung für Entwickler, die mit Controllern und Ansichten vertraut sind, finden Sie unter Einführung in Razor Pages.For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages.

Am Ende der Reihe verfügen Sie über eine App, mit der eine Filmdatenbank verwaltet werden kann.At the end of the series, you'll have an app that manages a database of movies.

Zeigen Sie Beispielcode an, oder laden Sie diesen herunter (Vorgehensweise zum Herunterladen).View or download sample code (how to download).

In diesem Tutorial:In this tutorial, you:

  • Create (erstellen) Sie eine Razor Pages-Web-App.Create a Razor Pages web app.
  • Führen Sie die App aus.Run the app.
  • Überprüfen Sie die Projektdateien.Examine the project files.

Am Ende dieses Tutorials verfügen Sie über eine funktionsfähige Razor Pages-Web-App, auf der Sie in späteren Tutorials aufbauen werden.At the end of this tutorial, you'll have a working Razor Pages web app that you'll build on in later tutorials.

Seite „Home“ oder Index

VoraussetzungenPrerequisites

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.If you use Visual Studio 2017, see dotnet/sdk issue #3124 for information about .NET Core SDK versions that don't work with Visual Studio.

Create (Erstellen) einer Razor Pages-Web-AppCreate a Razor Pages web app

  • Klicken Sie in Visual Studio im Menü Datei auf Neu > Projekt.From the Visual Studio File menu, select New > Project.

  • Create (Erstellen) Sie eine neue ASP.NET Core-Webanwendung, und klicken Sie auf Weiter.Create a new ASP.NET Core Web Application and select Next.

    neue ASP.NET Core-Webanwendung

  • Nennen Sie das Projekt RazorPagesMovie.Name the project RazorPagesMovie. Es ist wichtig, den Namen RazorPagesMovie zu verwenden, damit die Namespaces übereinstimmen, wenn Sie Code kopieren und einfügen.It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code.

    neue ASP.NET Core-Webanwendung

  • Wählen Sie in der Dropdownliste nacheinander ASP.NET Core 2.2, Webanwendung und Create (Erstellen) aus.Select ASP.NET Core 2.2 in the dropdown, Web Application, and then select Create.

neue ASP.NET Core-Webanwendung

Das folgende Startprojekt wird erstellt:The following starter project is created:

Projektmappen-Explorer

Ausführen der AppRun the app

  • Drücken Sie STRG+F5, um die Ausführung ohne den Debugger zu starten.Press Ctrl+F5 to run without the debugger.

    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.Launching the app with Ctrl+F5 (non-debug mode) allows you to make code changes, save the file, refresh the browser, and see the code changes. Viele Entwickler bevorzugen den Nicht-Debugmodus, um die App schnell zu starten und Änderungen anzuzeigen.Many developers prefer to use non-debug mode to quickly launch the app and view changes.

    In Visual Studio wird das folgende Dialogfeld angezeigt:Visual Studio displays the following dialog:

    Dieses Projekt ist für die Verwendung von SSL konfiguriert.

    Wählen Sie Ja aus, wenn Sie dem IIS Express-SLL-Zertifikat vertrauen möchten.Select Yes if you trust the IIS Express SSL certificate.

    Das folgende Dialogfeld wird angezeigt:The following dialog is displayed:

    Dialogfeld „Sicherheitswarnung“

    Klicken Sie auf Ja, wenn Sie zustimmen möchten, dass das Entwicklungszertifikat vertrauenswürdig ist.Select Yes if you agree to trust the development certificate.

    For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

    Visual Studio startet IIS Express und führt die App aus.Visual Studio starts IIS Express and runs the app. Die Adressleiste zeigt localhost:port# an, nicht example.com.The address bar shows localhost:port# and not something like example.com. Das liegt daran, dass es sich bei localhost um den Standardhostnamen für den lokalen Computer handelt.That's because localhost is the standard hostname for the local computer. „Localhost“ dient nur Webanforderungen vom lokalen Computer.Localhost only serves web requests from the local computer. Wenn in Visual Studio ein Webprojekt erstellt wird, wird für den Webserver ein zufälliger Port verwendet.When Visual Studio creates a web project, a random port is used for the web server.

  • Wählen Sie auf der Homepage der App Akzeptieren aus, um der Nachverfolgung zuzustimmen.On the app's home page, select Accept to consent to tracking.

    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.This app doesn't track personal information, but the project template includes the consent feature in case you need it to comply with the European Union's General Data Protection Regulation (GDPR).

    Seite „Home“ oder Index

    Die folgende Abbildung zeigt die App, nachdem Sie die Zustimmung zur Nachverfolgung gegeben haben:The following image shows the app after consent to tracking is provided:

    Seite „Home“ oder Index

Überprüfen der ProjektdateienExamine the project files

Es folgt eine Übersicht über die Hauptprojektordner und -dateien, mit denen Sie in späteren Tutorials arbeiten werden.Here's an overview of the main project folders and files that you'll work with in later tutorials.

Ordner „Seiten“Pages folder

Enthält Razor-Seiten und unterstützende Dateien.Contains Razor pages and supporting files. Jede Razor-Seite besteht aus einem Dateienpaar:Each Razor page is a pair of files:

  • Einer .cshtml-Datei mit HTML-Markup mit C#-Code in Razor-Syntax.A .cshtml file that has HTML markup with C# code using Razor syntax.
  • Einer .cshtml.cs-Datei mit C#-Code zum Verarbeiten von Seitenereignissen.A .cshtml.cs file that has C# code that handles page events.

Unterstützende Dateien haben Namen, die mit einem Unterstrich beginnen.Supporting files have names that begin with an underscore. Zum Beispiel sind in der Datei _Layout.cshtml Benutzeroberflächenelemente konfiguriert, die für alle Seiten gelten.For example, the _Layout.cshtml file configures UI elements common to all pages. Mit dieser Datei werden das Navigationsmenü oben auf der Seite und der Urheberrechtshinweis unten auf der Seite eingerichtet.This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. Weitere Informationen finden Sie unter Layout in ASP.NET Core.For more information, see Layout in ASP.NET Core.

Razor-Seiten werden von PageModel abgeleitet.Razor Pages are derived from PageModel. Gemäß der Konvention wird die von PageModel abgeleitete Klasse <PageName>Model genannt.By convention, the PageModel-derived class is named <PageName>Model.

Ordner „wwwroot“wwwroot folder

Enthält statische Dateien, z. B. HTML-, JavaScript- und CSS-Dateien.Contains static files, like HTML files, JavaScript files, and CSS files. Weitere Informationen finden Sie unter Statische Dateien in ASP.NET Core.For more information, see Statische Dateien in ASP.NET Core.

appsettings.jsonappSettings.json

Enthält Konfigurationsdaten, z. B. Verbindungszeichenfolgen.Contains configuration data, like connection strings. Weitere Informationen finden Sie unter Konfiguration in ASP.NET Core.For more information, see Konfiguration in ASP.NET Core.

Program.csProgram.cs

Enthält den Einstiegspunkt für das Programm.Contains the entry point for the program. Weitere Informationen finden Sie unter Generischer .NET-Host in ASP.NET Core.For more information, see Generischer .NET-Host in ASP.NET Core.

Startup.csStartup.cs

Enthält Code, mit dem das App-Verhalten konfiguriert wird, beispielsweise, ob die App Zustimmung für cookies erfordert.Contains code that configures app behavior, such as whether it requires consent for cookies. Weitere Informationen finden Sie unter Anwendungsstart in ASP.NET Core.For more information, see Anwendungsstart in ASP.NET Core.

Zusätzliche RessourcenAdditional resources

Nächste SchritteNext steps