Skip to Content
Learn
Razor Pages Syntax II
Working with the Page Model

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"); }

Instructions

1.

Suppose you’re building an application to take orders at a pizza restaurant. You will be filling out properties in Pizza.cshtml.cs to complete the app.

In order for the view page, Pizza.cshtml, to know what model it will have access to, you need to specify it.

Use the @model directive to specify the model: PizzaModel.

2.

Navigate to Pizza.cshtml.cs

You’re currently provided with a method, PizzaTotal(), and an double property, Total, but some information is missing!

Add the following properties:

Property DataType
Customer String
Order String
ExtraCheese Boolean

Make sure they are public properties and to provide them with a getter and a setter!

3.

Once properties have been defined in the class, we can assign some values to them. Since we want the app to be initialized with some state and have the values be rendered on the page load, we’ll be assigning values in the OnGet() method.

Within the OnGet() method, assign the following values to the properties below:

Property Value
Customer your name
Order “Cheese”
ExtraCheese false
Total PizzaTotal(“Cheese”)
4.

Now we can work on our view page, take a look at Pizza.cshtml. There will be placeholders where we can call the properties.

Call each property in the appropriate place and click Run afterward. You should now see the values being rendered on the page.

To render the Total property correctly, use the dollar sign $ and the String.Format() method. Here’s an example of String.Format() in plain C#:

double cost = 15.00; string formattedCost = String.Format("{0:0.00}", cost);
Folder Icon

Sign up to start coding

Already have an account?