Codecademy Logo

ASP.NET Page Models and Request Handling

Related learning

  • Course

    Learn ASP.NET

    Learn how to build fast, secure, and maintainable web apps with ASP.NET and the Razor Pages architecture.
    • With Certificate
    • Intermediate.
      20 hours
  • Course

    ASP.NET

    Learn how to build fast, secure, and maintainable web apps with ASP.NET and the Razor Pages architecture.
    • With Certificate
    • Intermediate.
      20 hours

asp-for

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" >


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

URLs in Razor Pages

In a default Razor Pages application, each view page’s URL route is its path minus .cshtml.

For example, given the folder structure:

Pages
|-- About.cshtml
|-- About.cshtml.cs
|-- Index.cshtml
|-- Index.cshtml.cs
|-- Businesses/
   |-- Codecademy.cshtml
   |-- Codecademy.cshtml.cs
  • About.cshtml is available at https://localhost:8000/About
  • Codecademy.cshtml is available at https://localhost:8000/Businesses/Codecademy
  • Index.cshtml is available at https://localhost:8000/Index OR https://localhost:8000

OnGet() & OnGetAsync()

When a page model receives a GET request, its OnGet() or OnGetAsync() method is invoked. This typically happens when a user navigates to the page model’s corresponding view page.

A page model must have either OnGet() or OnGetAsync(). It cannot have both.

public class ZooModel : PageModel
{
  public string FavoriteAnimal { get; set; }


  // Sets FavoriteAnimal when page is requested
  public void OnGet()
  {
    FavoriteAnimal = "Hippo";
  }
}

OnPost() & OnPostAsync()

When a page model receives a POST request, its OnPost() or OnPostAsync() method is invoked. This typically happens when a user submits a form on the page model’s corresponding view page.

A page model must have either OnPost() or OnPostAsync(). It cannot have both.

public class IndexModel : PageModel
{
  public string Message { get; set; }


  public void OnPost()
  {
    Message = "OnPost() called!";
  }
}

Void Handler Methods

In a page model, synchronous handler methods like OnGet() and OnPost() that have no return statement will have a return type of void.

This results in the current page being rendered in response to every request.

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


  public void OnGet()
  { 
    Username = "n/a";
  }


  public void OnPost(string username)
  {  
    Username = username;
  }
}

Task Handler Methods

In a page model, asynchronous handler methods like OnGetAsync() and OnPostAsync() that have no return statement will have a return type of Task.

This results in the current page being rendered in response to every request.

public class IndexModel : PageModel
{
  public string Users { get; set; }
  private UserContext _context { get; set; }


  public IndexModel(UserContext context)
  {
    _context = context;
  }


  // Task return type
  public async Task OnGetAsync()
  { 
    Users = await _context.Users.ToListAsync();
  }


  // Task return type
  public async Task OnPostAsync(string username)
  {  
    _context.Users.Add(username);
    await _context.SaveChangesAsync();
  }
}

Handler Method Parameters

Page model handler methods, like OnGet(), OnGetAsync(), OnPost(), and OnPostAsync(), can access an incoming HTTP request’s query string via its own method parameters.

The name of the method parameter(s) must match (case-insensitive) the name(s) in the query string.

// Example GET request
// https://localhost:8000/Songs?id=1
public async Task OnGetAsync(int id)
{ 
  // id is 1
}


// Example POST request
// https://localhost:8000/Songs?songName=Say%20It%20Loud
public async Task OnPostAsync(string songName)
{  
  // songName is "Say It Loud"
}

Model Binding

In model binding, a page model retrieves data from an HTTP request, converts the data to .NET types, and updates the corresponding model properties. It is enabled with the [BindProperty] attribute.

public class IndexModel : PageModel
{
  [BindProperty]
  public string Username { get; set; }
  
  [BindProperty]
  public bool IsActive { get; set; }
  
  // Example POST
  // https://localhost:8000?username=muhammad&IsActive=true
  public void OnPost()
  {
    // Username is "muhammad"
    // IsActive is true
  }
}

Learn more on Codecademy

  • Course

    Learn ASP.NET

    Learn how to build fast, secure, and maintainable web apps with ASP.NET and the Razor Pages architecture.
    • With Certificate
    • Intermediate.
      20 hours
  • Course

    ASP.NET

    Learn how to build fast, secure, and maintainable web apps with ASP.NET and the Razor Pages architecture.
    • With Certificate
    • Intermediate.
      20 hours
Previous
Next