Razor Pages - Overview

Razor pages provides a way to build web applications using a page-focused approach. Under the hood, it uses the same routing and middleware as MVC, and it provides directory-based conventions for views. Pages can have a viewmodel where we can define page data and actions.

• Pages: Pages are the main part of a Razor Pages application. Pages are created in the Pages directory and are named with the .cshtml extension. Each page can have a corresponding .cshtml.cs file which contains the page model.
• Page Model: The page model is responsible for handling requests and rendering the page. It is a class that contains the data and actions for the page. The page model is defined in a .cshtml.cs file and is associated with a .cshtml file.

Getting Started

Create a new project using the dotnet command-line interface.

dotnet new webapp -n MyRazorApp

This will create a new project with the name MyRazorApp. With the following directory structure:

MyRazorApp/
├── Pages/
│   ├── Index.cshtml
│   ├── Privacy.cshtml
│   └── ...
├── appsettings.json
├── Program.cs
└── ...

Routing

Razor Pages uses the same routing and middleware as MVC. The routing is based on the file structure of the Pages directory. For example, a request to / will be handled by the Index.cshtml page, and a request to /Privacy will be handled by the Privacy.cshtml page.

There is a @page directive at the top of each .cshtml file which specifies the route for the page. The @page directive can also take a route template as an argument.

@page "/about"

<h1>About</h1>
<p>This is the about page.</p>

Page Model

The page model is a class that contains the data and actions for the page. It is defined in a .cshtml.cs file and is associated with a .cshtml file. The page model is responsible for handling requests and rendering the page.

public class IndexModel : PageModel
{
    public void OnGet()
    {
        // This method is called when the page is requested.
        // Implicitly returns the Index.cshtml page.
    }

    public void OnPost()
    {
        // This method is called when the page is posted to.
    }
}

Example return values

• Page(): Returns the associated .cshtml page.
• RedirectToPage(): Redirects to another page.
• StatusCode(): Returns a status code.
• Json(): Returns JSON data.
• PartialView(): Returns a partial view.
• Content(): Returns content.
• File(): Returns a file.

Accepting Input

Form Submission can be handled using the OnPost method. The OnPost method can accept parameters from the form.

• BindProperty attribute
• Method parameters

public class ContactModel : PageModel
{
    // BindProperty attribute is used to bind the form data to the property.
    [BindProperty]
    public string Name { get; set; }

    public void OnPost()
    {
        // Access the form data using the properties.
        var name = Name;
    }
}

Query parameters can be accepted using the OnGet method.

• BindProperty
• Method parameters
• Request.Query

public class ContactModel : PageModel
{
    // 1. BindProperty attribute can be used
    [BindProperty(SupportsGet = true)]
    public string Name { get; set; }

    // or 2. Method parameters
    public void OnGet(string name)
    {
        // name will contain the value of the query parameter.
        // /contact?name=alice
    }
}

Some useful tag helpers:

• asp-page: Generates a link to a page.
• asp-route: Generates a link with route parameters.
• asp-for: Binds a form field to a property.
• asp-validation-for: Displays validation messages.
• asp-antiforgery: Generates an anti-forgery token.