How do PageModel and Page classes work together in ASP.NET Core Razor Pages

Objective: To learn how PageModel derived class works in tandem with its front razor page in ASP.NET Core Razor Pages?

In ASP.NET Core Razor Pages, the PageModel derived class works closely with its corresponding Razor Page (the front page) to facilitate the handling of requests and rendering of views. Here’s a detailed overview of how they work together:

1. Structure and Naming Convention

• Page and PageModel Pairing: Each Razor Page is typically defined in a .cshtml file (e.g., Contact.cshtml) and is associated with a PageModel class (e.g., ContactModel.cs). The PageModel class is usually found in the same folder and may have the same name as the Razor Page file (minus the .cshtml extension).

2. Handling Requests

• Routing: When a request is made to the Razor Page (e.g., /Contact), the ASP.NET Core routing system matches the request to the appropriate Razor Page and its corresponding PageModel. The framework automatically creates an instance of the PageModel class.
• Model Binding: If the request includes data (e.g., form submissions), the framework binds this data to properties in the PageModel class. This is done using attributes like [BindProperty], which specify which properties should receive values from the request.

3. Page Lifecycle Methods

• OnGet Method: This method is called when a GET request is made to the page. It is typically used to prepare the page (e.g., initializing data, setting default values).

Example in ContactModel.cs:

public void OnGet()
{
    // Logic to run when the page is first loaded
}

OnPost Method:

• This method is triggered when a POST request is made, such as when a user submits a form.
• It processes the data submitted, performs validation, and defines what happens next (e.g., redirecting to another page or returning the same page with error messages).

Example in ContactModel.cs:

public IActionResult OnPost()
{
    if (!ModelState.IsValid)
    {
        return Page(); // Return to the same page with validation errors
    }

    // Process the submitted data
    return RedirectToPage("Success"); // Redirect to a success page
}

4. Rendering Views

HTML Markup: The Razor Page (.cshtml file) contains the HTML markup, which can utilize Razor syntax to display data from the PageModel. For example, you can bind form fields to properties in the PageModel:

@page
@model ContactModel

<form method="post">
    <input asp-for="Name" placeholder="Your Name" />
    <input asp-for="Email" placeholder="Your Email" />
    <button type="submit">Submit</button>
</form>

Accessing PageModel Data: You can access the properties of the PageModel directly within the Razor markup. For example:

<h2>@Model.Name</h2>

5. Validation and Error Handling

• Model State: The ModelState property in the PageModel is used to check if the submitted data is valid. If validation fails, the page can be rendered again with error messages, allowing users to correct their input.
• Displaying Validation Messages: You can display validation messages in the Razor Page using:

<span asp-validation-summary="ModelOnly"></span>

Summary

The PageModel derived class and its associated Razor Page work together to create a seamless experience for processing user input and rendering HTML. The PageModel handles the business logic, data binding, and request lifecycle, while the Razor Page focuses on presenting the data and providing an interface for user interaction. This separation of concerns promotes cleaner code and easier maintenance in ASP.NET Core applications.

Related links:

PageModel class

Directives in Razor Pages

MVC vs Razor Pages