Razor Pages Tutorial

Introduction to Razor Pages

Razor Pages is a page-based programming model in ASP.NET Core for building dynamic, data-driven web applications. Razor Pages makes coding page-focused scenarios easier and more productive. In this tutorial, we will walk through creating a Razor Pages application from start to finish, covering the basics and more advanced features of Razor Pages.

Setting Up the Development Environment

First, make sure you have the .NET SDK installed on your machine. You can download it from the official .NET download page. Once installed, you can verify the installation by running the following command in your terminal:

If the installation was successful, you should see the version number of the .NET SDK installed.

Creating a New Razor Pages Application

To create a new Razor Pages application, open your terminal and run the following command:

This command creates a new Razor Pages application in a folder named RazorPagesApp.

Project Structure

Navigate to the RazorPagesApp folder and open it in your preferred code editor. You will see the following structure:

The Pages folder contains Razor Pages, each consisting of a .cshtml file and an associated page model file (.cshtml.cs). The Program.cs and Startup.cs files configure the application.

Running the Application

To run the application, use the following command:

Open your browser and navigate to https://localhost:5001. You should see the default homepage of your Razor Pages application.

Creating a New Razor Page

To create a new Razor Page, right-click on the Pages folder in your code editor, select Add, then New Item..., and finally choose Razor Page. Name the new page About.cshtml.

Edit the About.cshtml file to include the following content:

You can now navigate to https://localhost:5001/About to see your new page in action.

Using a Page Model

Razor Pages use a PageModel class to handle page logic. Open the About.cshtml.cs file and modify it as follows:

Update the About.cshtml file to display the message:

Now, when you navigate to https://localhost:5001/About, you will see the message from the PageModel.

Working with Forms

Let's create a simple form in Razor Pages. Add a new Razor Page named Contact.cshtml. Update the page with the following content:

Modify the Contact.cshtml.cs file to handle form submissions:

Update the Contact.cshtml file to display the message:

Now, when you submit the form, you will see a confirmation message displayed.

Conclusion

In this tutorial, we covered the basics of Razor Pages, including setting up the development environment, creating a new Razor Pages application, working with Page Models, and handling forms. Razor Pages provide a clean and efficient way to build web applications with ASP.NET Core. With this foundation, you can explore more advanced features and build powerful web applications.