Razor Pages Fundamentals

This document provides a comprehensive overview of Razor Pages, a page-focused programming model for building web UIs with ASP.NET Core. It simplifies the development of pages that are focused on handling page-specific logic and rendering.

What are Razor Pages?

Razor Pages are built on the ASP.NET Core MVC (Model-View-Controller) architecture but are designed to be simpler for page-focused scenarios. Each Razor Page consists of two primary files:

• Razor file (.cshtml): Contains the HTML markup and Razor syntax for rendering the UI.
• Code-behind file (.cshtml.cs): Contains the C# code that handles the page's logic, including data handling, business logic, and page model properties.

Creating Your First Razor Page

To create a Razor Page in an ASP.NET Core project, follow these steps:

1. Right-click on the Pages folder in your project.
2. Select Add > Razor Page....
3. Choose a template (e.g., "Razor Page" or "Razor Page - Empty").
4. Provide a name for your page (e.g., Index, About). This will create both the .cshtml and .cshtml.cs files.

Example: A Simple Page Model

Consider a simple page named Greeting.cshtml:

Pages/Greeting.cshtml

@page
@model GreetingModel
@{
    ViewData["Title"] = "Greeting";
}

Hello, @Model.Name!
Welcome to our ASP.NET Core application.

Pages/Greeting.cshtml.cs

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

public class GreetingModel : PageModel
{
    [BindProperty(SupportsGet = true)]
    public string Name { get; set; }

    public void OnGet()
    {
        if (string.IsNullOrEmpty(Name))
        {
            Name = "Guest";
        }
    }
}

Page Directives

The @page directive at the top of a Razor file is essential. It marks the file as a Razor Page and enables its use as a server-side executable page.

The @model Directive

The @model directive specifies the C# class that serves as the page's model. This model is responsible for providing data to the Razor view and handling user input.

Page Handlers

Razor Pages use a convention-based approach for handling HTTP requests. Methods named OnGet, OnPost, OnPut, OnDelete, etc., are automatically invoked based on the HTTP verb. These methods can accept parameters that are bound from the request.

GET Requests

The OnGet method is invoked for HTTP GET requests. It's often used to fetch data to display on the page.

POST Requests

The OnPost method is invoked for HTTP POST requests. It's typically used to process form submissions or perform actions that modify data.

Model Binding

Razor Pages seamlessly integrate with ASP.NET Core's model binding system. This allows properties in your page model to be automatically populated from incoming request data (query strings, form data, route values).

The [BindProperty] attribute is commonly used to enable model binding for page model properties. SupportsGet = true allows the property to be bound from query string parameters even for POST requests if the value isn't provided in the form.

Layout Pages

Razor Pages can leverage layout pages (_Layout.cshtml) to define common UI elements like headers, footers, and navigation, ensuring a consistent look and feel across your application. The _ViewStart.cshtml file typically specifies the default layout for all Razor Pages.

Razor Syntax

Razor syntax uses the @ symbol to embed server-side code within HTML. This includes:

• @variableName: Displays the value of a variable.
• @{ ... }: Executes a block of C# code.
• @if (...) { ... }: Conditional rendering.
• @foreach (...) { ... }: Iterating over collections.

File Structure

Razor Pages typically reside in the Pages folder of your ASP.NET Core project. The routing is based on the folder structure within Pages.

• Pages/Index.cshtml maps to the root URL (e.g., /).
• Pages/About.cshtml maps to /About.
• Pages/Admin/Users.cshtml maps to /Admin/Users.

Further Reading

• Official ASP.NET Core Razor Pages Documentation
• Razor Syntax Overview