Tutorial: Get started with Razor Pages in ASP.NET Core
This tutorial teaches the basics of building an ASP.NET Core Razor Pages web app.
The app manages a database of movie titles. You learn how to:
- Create a Razor Pages web app.
- Add and scaffold a model.
- Work with a database.
- Add search and validation.
At the end, you have an app that can manage and display movie titles items.
Create a Razor web app
From the Visual Studio File menu, select New > Project.
Create a new ASP.NET Core Web Application. Name the project RazorPagesMovie. It's important to name the project RazorPagesMovie so the namespaces will match when you copy/paste code.
Select ASP.NET Core 2.2 in the dropdown, and then select Web Application.
The following starter project is created:
Press Ctrl-F5 to run without the debugger.
Visual Studio starts IIS Express and runs the app. The address bar shows
localhost:port#and not something like
example.com. That's because
localhostis the standard hostname for the local computer. Localhost only serves web requests from the local computer. When Visual Studio creates a web project, a random port is used for the web server. In the preceding image, the port number is 5001. When you run the app, you'll see a different port number.
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. Many developers prefer to use non-debug mode to refresh the page and view changes.
Select Accept to consent to tracking. This app doesn't track personal information. The template generated code includes assets to help meet General Data Protection Regulation (GDPR).
The following image shows the app after accepting tracking:
Project files and folders
The following table lists the files and folders in the project. At this point in the tutorial, the Startup.cs file is the most important to understand. You don't need to review each link provided below. The links are provided as a reference when you need more information on a file or folder in the project.
|File or folder||Purpose|
|wwwroot||Contains static files. See Static files.|
|Pages||Folder for Razor Pages.|
|Program.cs||Hosts the ASP.NET Core app.|
|Startup.cs||Configures services and the request pipeline. See Startup.|
The Pages folder
The _Layout.cshtml file contains common HTML elements (scripts and stylesheets) and sets the layout for the application. For example, when you click on RazorPagesMovie, Home, or Privacy, you see the same elements. The common elements include the navigation menu on the top and the header on the bottom of the window. See Layout for more information.
The _ViewImports.cshtml file contains Razor directives that are imported into each Razor Page. See Importing Shared Directives for more information.
The _ViewStart.cshtml sets the Razor Pages
Layout property to use the _Layout.cshtml file. See Layout for more information.
The _ValidationScriptsPartial.cshtml file provides a reference to jQuery validation scripts. When the
Edit pages are added later in the tutorial, the _ValidationScriptsPartial.cshtml file will be used.
Privacy pages are provided to:
Index: Start an app.
Error: Display error information.
For this tutorial, the preceding pages are not used.
Use F7 to toggle between a Razor Page and the PageModel
F7 toggles between a Razor Page (*.cshtml file) and the C# file (*.cshtml.cs).