Get started with ASP.NET Core Razor Pages in Visual Studio Code

By Rick Anderson

This tutorial teaches the basics of building an ASP.NET Core Razor Pages web app. We recommend you complete Introduction to Razor Pages before starting this tutorial. Razor Pages is the recommended way to build UI for web applications in ASP.NET Core.

Prerequisites

Install the following:

Create a Razor web app

From a terminal, run the following commands:

dotnet new webapp -o RazorPagesMovie
cd RazorPagesMovie
dotnet run
dotnet new razor -o RazorPagesMovie
cd RazorPagesMovie
dotnet run

The preceding commands use the .NET Core CLI to create and run a Razor Pages project. Open a browser to http://localhost:5000 to view the application.

Home or Index page

The default template creates RazorPagesMovie, Home, About and Contact links and pages. Depending on the size of your browser window, you might need to click the navigation icon to show the links.

Home or Index page

Test the links. The RazorPagesMovie and Home links go to the Index page. The About and Contact links go to the About and Contact pages, respectively.

Project files and folders

The following table lists the files and folders in the project. For this 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.
appsettings.json Configuration
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, About or Contact, 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 we add Create and Edit pages later in the tutorial, the _ValidationScriptsPartial.cshtml file will be used.

The About, Contact and Index pages are basic pages you can use to start an app. The Error page is used to display error information. The Privacy page allows you to specify details about your site's privacy policy.

Open the project

Press Ctrl+C to shut down the application.

From Visual Studio Code (VS Code), select File > Open Folder, and then select the RazorPagesMovie folder.

  • Select Yes to the Warn message "Required assets to build and debug are missing from 'RazorPagesMovie'. Add them?"
  • Select Restore to the Info message "There are unresolved dependencies".

Launch the app

Press Ctrl+F5 to start the app without debugging. Alternatively, from the Debug menu, select Start Without Debugging.

In the next tutorial, we add a model to the project.