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 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 detailliertere Einführung für erfahrenere Entwickler finden Sie unter Einführung in Razor Pages.For a more advanced introduction aimed at experienced developers, 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:

  • Erstellen einer Razor Pages-Web-AppCreate 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.

Start- oder Indexseite

Erforderliche KomponentenPrerequisites

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.

  • 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 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 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

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.

    Weitere Informationen finden Sie unter Trust the ASP.NET Core HTTPS development certificate (Festlegen des ASP.NET Core-HTTPS-Entwicklungszertifikats als vertrauenswürdig).See Trust the ASP.NET Core HTTPS development certificate for more information.

    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).

    Start- oder Indexseite

    Die folgende Abbildung zeigt die App, nachdem Sie das Einverständnis zur Nachverfolgung gegeben haben:The following image shows the app after you give consent to tracking:

    Start- oder Indexseite

Ü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:

  • Eine .cshtml-Datei, die HTML-Markup mit C#-Code in Razor-Syntax enthältA .cshtml file that contains HTML markup with C# code using Razor syntax.
  • Eine .cshtml.cs-Datei mit C# Code, in dem Seitenereignisse verarbeitet werdenA .cshtml.cs file that contains 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-Dateien, JavaScript-Dateien und CSS-Dateien.Contains static files, such as 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, such as 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 ASP.NET Core-Webhost.For more information, see ASP.NET Core-Webhost.

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

In diesem Tutorial:In this tutorial, you:

  • Haben Sie eine Razor Pages-Web-App erstellt.Created a Razor Pages web app.
  • Haben Sie die App ausgeführt.Ran the app.
  • Haben Sie die Projektdateien überprüft.Examined the project files.

Wechseln Sie zum nächsten Tutorial in der Reihe:Advance to the next tutorial in the series: