ASP.NET: Page Models

Handle, route, and redirect requests using Page Models in ASP.NET

Start

Key Concepts

Review core concepts you need to learn to master this subject

asp-for

URLs in Razor Pages

OnGet() & OnGetAsync()

OnPost() & OnPostAsync()

Void Handler Methods

Task Handler Methods

Handler Method Parameters

Model Binding

asp-for

<!-- In .cshtml file -->
Enter a username: <input asp-for="Username" />

The asp-for attribute is used to connect an <input> element to a page model property.

The above example would be connected to a Username property in the page model:

public class IndexModel : PageModel
{
  [BindProperty]
  public string Username { get; set; }
}

In the rendered HTML, attributes like type, id, and name will be added to the <input> tag:

Enter a username:
<input type="text" id="Username" name="Username" >

Page Model Basics

Lesson 1 of 3

1
Re-Introduction To Page Models
When you want to take your website to the next level, you need to do more than display text and images. You need to handle data and route requests. That’s where page models come in! Let’s review s…
Start
2
OnGet()
Page models handle HTTP requests, like GET and POST. We define their response using handler methods. One of those handler methods is the OnGet(…
Start
3
OnPost()
The OnPost() handler method is invoked when a POST request is sent to a page. This usually happens when a user submits a form (an HTML element). Just like with OnGet(), the default behavior of a…
Start
4
Model Binding
In the previous exercise we typed out each parameter name in the form, then copied them over to the OnPost() method, then set them equal to properties. In some cases, we would need a fourth step to…
Start
5
asp-for
So far, we’ve built an HTML form in the view page. When submitted it sends a URL query string to our app according to the name attributes of the form. We captured the query values first using meth…
Start
6
asp-route-{value}
The Input Tag Helper, with asp-for, allows us to easily create a form that submits data with a POST request. What Tag Helper and attribute(s) would help us with GET requests? Similarly, the Anch…
Start
7
OnGetAsync()
An asynchronous operation is one that allows the computer to “move on” to other tasks while waiting for the asynchronous operation to complete. Asynchronous programming means that time-consuming op…
Start
8
OnPostAsync()
Just as OnGet() has an asynchronous version, OnGetAsync(), OnPost() has its own asynchronous version named OnPostAsync(). The same async/await / Task concepts apply to this method: * Mark the meth…
Start
9
Review
Well done! We’ve covered a lot of page model concepts. Let’s review: * When a GET request is made to a page, the OnGet() or OnGetAsync() method from its page model is invoked. * When a POST request…
Start