Introduction to Razor Pages

Razor Pages is a page-focused programming model for building dynamic, data-driven, client-side UIs. It simplifies the development of Razor-based web applications compared to earlier MVC patterns by providing a cleaner separation of concerns and a more streamlined development experience.

Razor Pages is built on top of ASP.NET Core MVC. It provides a convenient, page-based approach to building the UI. Each page is represented by a Razor file (`.cshtml`) and an optional Page Model class (`.cshtml.cs`). This model is ideal for developers who prefer a simpler structure for their web applications.

Razor Page Basics

A basic Razor Page consists of two files:

A Razor file (`.cshtml`) containing the HTML markup and Razor syntax.
A C# Page Model class (`.cshtml.cs`) that contains the logic and data for the page.

Example: Basic Razor Page (`Index.cshtml`)


<!DOCTYPE html>
<html>
<head>
    <title>Hello Razor Pages</title>
</head>
<body>
    <h1>@Model.Message</h1>
    <p>Current time: @DateTime.Now.ToString()</p>
</body>
</html>

Example: Corresponding Page Model (`Index.cshtml.cs`)


using Microsoft.AspNetCore.Mvc.RazorPages;
using System;

public class IndexModel : PageModel
{
    public string Message { get; set; } = "Welcome to Razor Pages!";

    public void OnGet()
    {
        // This method is executed when the page is requested with an HTTP GET.
        // You can set properties or perform other logic here.
    }
}

Page Models

Page Models provide a robust way to manage page-specific logic, data, and event handlers. They typically inherit from Microsoft.AspNetCore.Mvc.RazorPages.PageModel.

Properties: Used to pass data from the Page Model to the Razor view (e.g., Message in the example).
Event Handlers: Methods prefixed with On followed by an HTTP verb (e.g., OnGet, OnPost) are executed for the corresponding HTTP request.

Handling Requests

Razor Pages uses conventions for handling HTTP requests. The OnGet method handles GET requests, and OnPost handles POST requests. You can define multiple OnGet or OnPost methods to handle different request scenarios.

Example: Handling Multiple GET Requests


using Microsoft.AspNetCore.Mvc.RazorPages;

public class MultiHandlerModel : PageModel
{
    public string Info { get; private set; }

    public void OnGet()
    {
        Info = "This is the default GET handler.";
    }

    public void OnGetDetails()
    {
        Info = "This is a specific GET handler for details.";
    }
}

To invoke OnGetDetails, you would navigate to /your-page-name?handler=details.

Layout

Razor Pages seamlessly integrates with ASP.NET Core's layout system. You can define a default layout in Pages/_Layout.cshtml, and individual pages can specify a different layout or no layout at all.

Example: Specifying a Layout in a Razor Page


@page "{handler?}"
@model MyLayoutPageModel
@{
    Layout = "_CustomLayout"; // Use a custom layout
}
<h1>This page uses a custom layout.</h1>

Data Binding

Razor Pages supports automatic data binding for form submissions. By matching the names of HTML input elements to properties in your Page Model, the framework can automatically populate the model properties.

Example: Data Binding with a Form


<!-- MyForm.cshtml -->
<form method="post">
    <input asp-for="User.Name" />
    <input asp-for="User.Email" />
    <button type="submit">Submit</button>
</form>

@code {
    // MyForm.cshtml.cs
    public class MyFormModel : PageModel
    {
        [BindProperty] // Binds the form data to this property
        public UserInput User { get; set; }

        public void OnPost()
        {
            // User.Name and User.Email will be populated from the form
            if (ModelState.IsValid)
            {
                // Process user input
            }
        }
    }

    public class UserInput
    {
        public string Name { get; set; }
        public string Email { get; set; }
    }
}

Validation

You can use standard .NET data annotations for model validation. The ModelState.IsValid check in your Page Model methods, along with the <div asp-validation-for="Property"></div> tag helper in your Razor view, provides client-side and server-side validation feedback.

Form Handling

Handling form submissions is a core feature. Use the <form method="post"> element and an OnPost handler in your Page Model. The asp-page-handler attribute can be used to target specific POST handlers.

Routing

Razor Pages uses a file-based routing convention. The path to a Razor Page file within the Pages folder determines its URL. For example, a file at Pages/Products/Index.cshtml is accessible at the /Products URL.

You can customize routing using the @page directive with route templates or by implementing custom routing logic.

Example: Custom Routing


@page "/products/{productId:int}"
@model ProductDetailsModel

Authentication & Authorization

Razor Pages integrates fully with ASP.NET Core's authentication and authorization middleware. You can protect pages or actions using attributes like [Authorize] on your Page Model class or specific handler methods.

Example: Authorizing a Page


using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc.RazorPages;

[Authorize]
public class SecurePageModel : PageModel
{
    public void OnGet()
    {
        // This page is only accessible to authenticated users.
    }
}