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
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
.
Navigate to Pizza.cshtml.cs
You’re currently provided with a method, PizzaTotal()
, and a 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!
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”) |
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);