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

Von Rick AndersonBy Rick Anderson

In diesem Tutorial lernen Sie Grundlegendes zur Erstellung einer ASP.NET Core-Webapp mit Razor Pages.This tutorial teaches the basics of building an ASP.NET Core Razor Pages web app.

Die App verwaltet eine Datenbank mit Filmtiteln.The app manages a database of movie titles. Sie lernen Folgendes:You learn how to:

  • Erstellen einer Razor Pages-Web-AppCreate a Razor Pages web app.
  • Hinzufügen eines Modells und Erstellen eines Gerüsts für das ModellAdd and scaffold a model.
  • Arbeiten mit einer DatenbankWork with a database.
  • Hinzufügen von Such- und ÜberprüfungsfunktionenAdd search and validation.

Am Ende verfügen Sie über eine App, die Filmtitel verwalten und anzeigen kann.At the end, you have an app that can manage and display movie titles items.

View or download sample code (how to download).

Erforderliche KomponentenPrerequisites

VorraussetzungenPrerequisites

Erstellen einer Razor-Web-AppCreate a Razor web app

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

  • Erstellen Sie eine neue ASP.NET Core-Webanwendung.Create a new 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/einfügen.It's important to name the project RazorPagesMovie so the namespaces will match when you copy/paste code. neue ASP.NET Core-Webanwendungnew ASP.NET Core Web Application

  • Wählen Sie in der Dropdownliste ASP.NET Core 2.2 und anschließend Webanwendung aus.Select ASP.NET Core 2.2 in the dropdown, and then select Web Application.

    neue ASP.NET Core-Webanwendung

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

    Projektmappen-Explorer

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

    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. In der vorherigen Abbildung ist die Portnummer 5001.In the preceding image, the port number is 5001. Wenn Sie die App ausführen, wird eine andere Portnummer angezeigt.When you run the app, you'll see a different port number.

    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 Seite zu aktualisieren und Änderungen anzuzeigen.Many developers prefer to use non-debug mode to refresh the page and view changes.

  • Wählen Sie Akzeptieren aus, um der Nachverfolgung zuzustimmen.Select Accept to consent to tracking. Diese App verfolgt keine personenbezogenen Informationen nach.This app doesn't track personal information. Der generierte Vorlagencode enthält Objekte, die bei der Erfüllung der Datenschutz-Grundverordnung (DSGVO) als Unterstützung dienen sollen.The template generated code includes assets to help meet General Data Protection Regulation (GDPR).

    Start- oder Indexseite

    Die folgende Abbildung zeigt die App, nachdem die Nachverfolgung akzeptiert wurde:The following image shows the app after accepting tracking:

    Start- oder Indexseite

Projektdateien und -ordnerProject files and folders

Die folgende Tabelle listet die Dateien und Ordner im Projekt auf.The following table lists the files and folders in the project. An diesem Punkt des Tutorials ist die Datei Startup.cs, die wichtigste, die Sie kennen müssen.At this point in the tutorial, the Startup.cs file is the most important to understand. Sie müssen nicht jeden der unten angegebenen Links ansehen.You don't need to review each link provided below. Die Links werden als Referenz bereitgestellt, wenn Sie weitere Informationen zu einer Datei oder einem Ordner im Projekt benötigen.The links are provided as a reference when you need more information on a file or folder in the project.

Datei oder OrdnerFile or folder ZweckPurpose
wwwrootwwwroot Enthält statische Dateien.Contains static files. Weitere Informationen finden Sie unter Statische Dateien.See Static files.
SeitenPages Ordner für Razor Pages.Folder for Razor Pages.
appsettings.jsonappsettings.json KonfigurationConfiguration
Program.csProgram.cs Hostet die ASP.NET Core-App.Hosts the ASP.NET Core app.
Startup.csStartup.cs Konfiguriert Dienste und die Anforderungspipeline.Configures services and the request pipeline. Siehe Startup.See Startup.

Der SeitenordnerThe Pages folder

Die Datei _Layout.cshtml enthält häufige HTML-Elemente (Skripts und Stylesheets) und legt das Layout für die Anwendung fest.The _Layout.cshtml file contains common HTML elements (scripts and stylesheets) and sets the layout for the application. Wenn Sie beispielsweise auf RazorPagesMovie, Home (Startseite) oder Privacy (Datenschutz) klicken, werden dieselben Elemente angezeigt.For example, when you click on RazorPagesMovie, Home, or Privacy, you see the same elements. Die häufigen Elemente umfassen das Navigationsmenü am oberen Rand und den Header am unteren Rand des Fensters.The common elements include the navigation menu on the top and the header on the bottom of the window. Weitere Informationen finden Sie unter Layout.See Layout for more information.

Die Datei _ViewImports.cshtml enthält Razor-Anweisungen, die in jede Razor Page importiert werden.The _ViewImports.cshtml file contains Razor directives that are imported into each Razor Page. Weitere Informationen finden Sie unter Importing Shared Directives (Importieren gemeinsamer Anweisungen).See Importing Shared Directives for more information.

Die Datei _ViewStart.cshtml legt die Eigenschaft Layout der Razor Pages auf die Verwendung der Datei _Layout.cshtml fest.The _ViewStart.cshtml sets the Razor Pages Layout property to use the _Layout.cshtml file. Weitere Informationen finden Sie unter Layout.See Layout for more information.

Die Datei _ValidationScriptsPartial.cshtml enthält einen Verweis auf jQuery-Validierungsskripts.The _ValidationScriptsPartial.cshtml file provides a reference to jQuery validation scripts. Wenn Sie im späteren Verlauf des Tutorials die Seiten Create und Edit hinzufügen, wird dazu die Datei _ValidationScriptsPartial.cshtml verwendet.When the Create and Edit pages are added later in the tutorial, the _ValidationScriptsPartial.cshtml file will be used.

Die Seiten Index, Error und Privacy werden zu folgenden Zwecken bereitgestellt:Index, Error, and Privacy pages are provided to:

  • Index: Starten einer AppIndex: Start an app.
  • Error: Anzeigen von FehlerinformationenError: Display error information.
  • Privacy: Angeben von Details zur Datenschutzrichtlinie der WebsitePrivacy: Specify details about the site's privacy policy.

Für das vorliegende Tutorial werden diese Seiten nicht verwendet.For this tutorial, the preceding pages are not used.

Verwenden von F7 zum Umschalten zwischen einer Razor-Seite und dem PageModelUse F7 to toggle between a Razor Page and the PageModel

Mit F7 wechseln Sie zwischen einer Razor Page-Datei (*.cshtml) und der C#-Datei (*. cshtml.cs).F7 toggles between a Razor Page (*.cshtml file) and the C# file (*.cshtml.cs).