With a page model, you can create certain data and behaviors that you’ll be able to call from the view page. Let’s say you want to display information about a user in a user profile page; you can create a class holding properties of interest for that user (username, age, birthday, etc) and simply call the properties in the view page instead of hardcoding them. Moreover, what if the user wants to update their username? The class can hold a method that updates the username property.

The model you’ll create must inherit from the PageModel class to have access to various properties that will be useful when working with HTTP requests. Let’s look at an example:

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

namespace RazorTest.Pages
{
  public class UserModel : PageModel
  {
    public string ConvertToUsername (string firstName)
    {
      return "l33t_user_" + firstName;
    }

    public int Age { get; set; }
    public string Username { get; set; }
    public bool Status { get; set; }
    public DateTime Birthday { get; set; }

    public void OnGet()
    {
      Age = 25;
      Username = ConvertToUsername("John");
      Status = true;
      Birthday = DateTime.Now;
    }
  }
}

In the above model, there are 4 properties that will be accessible in the view page. Through the OnGet() method, you’re able to assign values to those properties on page load. But how exactly does the OnGet() method work?

The OnGet() method is what we call a handler method in Razor Pages. These are methods that are executed as a result of a request. Let’s say a user wants to view their profile page on a website they’re registered at. Once the profile page is reached, a GET request will be sent to the server to fetch all the information about the said user. The GET request invokes the OnGet() method. In this case, we’re assigning values to the properties in our UserModel once the page is loaded.

Once a model has been created you can access its properties and methods in the view page using the @model directive followed by the model you’re referring to:

@model ModelName

After the model has been specified, Razor exposes a Model property for accessing the model passed to the view. So you can then call these properties using @Model in the view page:

@page
@model UserModel
<div>
  Age: @Model.Age
  <br />
  Username: @Model.Username
  <br />
  Status: @Model.Status
  <br />
  Birthday: @Model.Birthday.ToString("MM/dd/yyyy")
</div>

You can also create methods and call them in the OnGet() method. Let’s create one where we generate a Username by prepending a string before the user’s firstName:

public string ConvertToUsername (string firstName)
{
  return "l33t_user_" + firstName;
}

We can create a property called Username:

public string Username {get; set;}

Then we would call it in our OnGet() method as so:

public void OnGet()
{
  Username = ConvertToUsername("John");
}