Introduction to Page Handlers

Welcome to the first lesson of our course. In this lesson, we'll dive into Page Handlers and their critical role in web applications. By the end of this lesson, you'll understand how to work with GET and POST handlers and how to make your pages interact with each other.

Page Handlers are special methods in Razor Pages that handle HTTP requests. They allow you to respond to GET, POST, PUT, DELETE, and other HTTP methods. In simple terms, they allow you to define what happens when a user visits a page (GET) or submits a form (POST).

In this lesson, we'll focus on the two most common handlers:

• OnGet is used to handle HTTP GET requests.
• OnPost is used to handle HTTP POST requests.

To understand how GET handlers work, let's look at the Contact page example. We define App/Pages/Contact.cshtml.cs like that:

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

public class ContactModel : PageModel
{
    [BindProperty]
    public string Name { get; set; }

    public void OnGet()
    {
        // GET request logic
    }

    public void OnPost()
    {
        // POST request logic
    }
}

In the above code, the OnGet method is the GET handler. When users navigate to the /Contact page, this method is called. Although it's currently empty, you can add logic to initialize the page or fetch data. The [BindProperty] attribute is used to bind the property Name to the corresponding form field so that the value from the input field with the name Name will automatically be mapped to the Name property in the ContactModel class when the form is submitted.

Then, we define App/Pages/Contact.cshtml:

@page
@model ContactModel
<form method="post">
    <div>
        <label for="Name">Name</label>
        <input id="Name" name="Name" asp-for="Name" value="@Model.Name" />
    </div>
    <button type="submit">Save</button>
</form>

This file represents the HTML content of the Contact page. We include an HTML form here that sends an HTTP POST request under the hood—the request is processed by the OnPost handler that we defined earlier.

Let's break down the input field attributes:

• id="Name": Sets the unique identifier for the input element, which can be used in JavaScript or CSS.
• name="Name": Specifies the name of the input field. The value of this attribute gets sent to the server upon form submission.
• asp-for="Name": This is a tag helper that binds the input field to the Name property in the ContactModel class. It simplifies the form field binding process and ensures the input field’s value is correctly populated with the property's value, which is updated when the form is submitted.
• value="@Model.Name": Sets the initial value of the input field to the value of the Name property in the ContactModel class.

Using these attributes ensures consistency across the Razor page and the PageModel class, making data binding more straightforward and reducing the likelihood of errors.

Let's see how we can add some functionality to the OnGet and OnPost methods in our Contact page. For this example, we will pre-populate the Name property when the page loads. On top of that, we will log the Name provided from the form to the console in the OnPost method.

App/Pages/Contact.cshtml.cs

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

public class ContactModel : PageModel
{
    [BindProperty]
    public string Name { get; set; }

    public void OnGet()
    {
        // Pre-populate the Name property
        Name = "John Doe";
    }

    public void OnPost()
    {
        // Handle form submission
        Console.WriteLine("Name provided in the form: " + Name);
        return Page();
    }
}

With this modification, when users navigate to the /Contact page, the Name property will be pre-set to "John Doe". After they input the name and click "Save", the specified name will be logged on the server side to the console. return Page() returns the current page, meaning it will re-render the page with any changes that might have occurred during the handling of the request but does not trigger a full browser reload like a traditional page refresh

Navigating between pages is a common task in web applications. For our example, we have an Index page that links to the Contact page.

App/Pages/Index.cshtml

@page
<!DOCTYPE html>
<html>
<head>
    <title>Main Page</title>
</head>
<body>
    <h1>Welcome to the Main Page</h1>
    <a href="/Contact">Go to Contact Page</a>
</body>
</html>

App/Pages/Index.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

public class IndexModel : PageModel
{
    public void OnGet()
    {
        // GET request logic for the main page
    }
}

Here, the Index page has a simple link to navigate to the Contact page. The OnGet method in IndexModel handles the initial load of the main page.

When a user clicks the link, they are directed to the Contact page where the GET handler in Contact.cshtml.cs is invoked, and the form is presented.

In this lesson, we covered the basics of Page Handlers in Razor Pages. You learned about GET and POST handlers, saw examples of how to implement them in your code, and connected different pages using handlers. Understanding these handlers allows you to manage user interactions and data submissions seamlessly.

Now, it's time to put this knowledge into practice. Next, you'll tackle a series of exercises designed to reinforce what we've covered. Keep experimenting with GET and POST handlers and try navigating between different pages. Good luck, and enjoy the learning journey!