Use ASP.NET Razor Page Models to handle HTTP requests and capture data from query strings

Page Model Basics

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 is made to a page, the `OnPost()` or `OnPostAsync()` method from its page model is invoked.
* URL query string values can be accessed via a method's parameters.
* URL query string values can also be accessed via model binding, which is activated using `[BindProperty]`.
* The `asp-for` attribute in Input Tag Helpers connects an `<input>` element to a model property.
* The `asp-route-{value}` attribute in Anchor Tag Helpers adds additional information to a link.
* Synchronous handler methods, like `OnGet()` and `OnPost()`, with no return statement will have a return type of `void`.
* Asynchronous handler methods, like `OnGetAsync()` and `OnPostAsync()`, with no return statement will have a return type of `Task`.

If you'd like to see other examples of handler methods, look at [the first few sections of this introduction to Razor Pages by Microsoft](https://docs.microsoft.com/en-us/aspnet/core/razor-pages/) and check out [the Handler Methods section on Learn Razor Pages](https://www.learnrazorpages.com/razor-pages/handler-methods).

Review


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 method parameters, then using model binding.

We can make that first step (writing a form) even easier using [Tag Helpers](https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro). We expect you to be familiar with the general concept of Tag Helpers, but we'll show you a new use for them here.

Instead of using the `name` and `id` attributes in each `<input>` element, we'll use the `asp-for` attribute:

Take this Input Tag Helper, which uses the `asp-for` attribute:
```html
<input asp-for="Author">
```

It will render as this HTML:
```html
<input type="text" name="Author" id="Author">
```

Why is this Tag Helper better than basic HTML? The benefits will become clearer as we create more advanced properties, but:
* It saves you the hassle of writing HTML attributes.
* Integrated Development Environments (IDEs), like Visual Studio, can check for errors before you run the code.
* Changes to the property (in a model) are automatically carried into the view page.
* Advanced settings on properties, such as data validation, are converted into additional HTML attributes. We won't be covering those yet, so we won't see this benefit in this lesson.


asp-for

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 method with `async`
* Define the return type as `Task`
* Rename it `OnPostAsync()`


OnPostAsync()

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 Anchor Tag Helper, with `asp-page` and  `asp-route-{value}` attributes, allows us to create `<a>` links that submit data with a `GET` request.

* `asp-page` &mdash; Sets an anchor tag's `href` attribute value to a specific page.
* `asp-route-{value}` &mdash; Adds route values to an `href`. The `{value}` placeholder is interpreted as a potential route parameter. 

This markup in a view page...

```html
<a asp-page="./Authors" asp-route-fullname="Roald Dahl">Roald</a>
```

...would render as this HTML...

```html
<a href="./Authors?fullname=Roald+Dahl">Roald</a>
```

Like before, we can capture the query values via method parameters:
```cs
public void OnGet(string fullname)
{ }
```

Technically we could also use model binding with the attribute `[BindProperty(SupportsGet=true)]` but we generally avoid that because allowing users to set values in `GET` requests can be dangerous. If `GET` requests can set attributes, then it would be too easy to mistakenly edit our app's data by browsing to a URL. We prefer to set attributes in `POST` requests because they have built-in security from ASP.NET.

To recap: Anchor Tag Helpers generate `GET` requests. They use `asp-page` and `asp-route-{value}`:
```html
<a asp-page="./Authors" asp-route-fullname="Roald Dahl">Roald</a>
```

Input Tag Helpers (along with a form) generate `POST` requests. They use `asp-for`:
```html
<input asp-for="Title">
```

asp-route-{value}

Page models handle [HTTP requests](https://www.codecademy.com/articles/http-requests), like `GET` and `POST`. We define their response using handler methods.

One of those handler methods is the `OnGet()` method. Whenever a user makes a `GET` request to a page, the page model's `OnGet()` method is invoked. 

For example, if a user navigates to `localhost:8000/Archive` in their browser:
1. The browser sends a `GET` request to that URL.
2.  `localhost:8000/Archive` corresponds to **Archive.cshtml** so it receives the request.
3.  **Archive.cshtml** page references the `ArchiveModel`, so that class' `OnGet()` method will be invoked. 

It might sound complicated now, but it will feel natural by the end of this lesson. (You can even check this for yourself by exploring the relationship between `localhost:8000/`, **Index.cshtml**, and **Index.cshtml.cs** in the browser and editor.)

By default, an empty `OnGet()` method returns the corresponding view page. In the example above, the `ArchiveModel.OnGet()` corresponds to **Archive.cshtml**. 

Since an empty `OnGet()` method has no `return` statement, the return type is `void`:

```cs
public void OnGet()
{ }
```

Within the method we can set values to properties, which can be displayed in the view page.


OnGet()

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 operations don’t have to bring everything else in our programs to a halt.

There are countless examples of asynchronicity in our everyday lives. Cooking, for example, involves asynchronous operations such as a toaster toasting our bread or a rice cooker making our rice. While we wait on the completion of those operations, we’re free to do other tasks.

Similarly, web development makes use of asynchronous operations. Operations like making a network request or querying a database are done asynchronously so that we can work on other tasks.

C# enables this using `async`, `await`, and the `Task` type. 

For example, this code uses an asynchronous operation, `ReadLineAsync()`, to read from the file **storage.txt**. We use the keyword `await` to tell our app to "wait" for that operation to complete:
```cs
if (System.IO.File.Exists("storage.txt"))
{
  using (StreamReader reader = System.IO.File.OpenText("storage.txt"))
  {
    string content = await reader.ReadtoEndAsync();
  }
}
```

To do this within a request handler like `OnGet()`, we have to label it as an asynchronous method using `async`, switch the return type to `Task`, and rename it `OnGetAsync()`:

```cs
public async Task OnGetAsync()
{
  if (System.IO.File.Exists("storage.txt"))
  {
    using (StreamReader reader = System.IO.File.OpenText("storage.txt"))
    {
      string content = await reader.ReadtoEndAsync();
    }
  }
}
```

The last step &mdash; renaming it to `OnGetAsync()` &mdash; is optional but conventional.

In summary, if you are performing some asynchronous task within your `GET` handler method:
1. Add `async` to the signature
2. Change the return type to `Task`
3. Rename the method to `OnGetAsync()`

You cannot have both `OnGet()` and `OnGetAsync()`. Use one or the other.

By the way, our code used `using`, which we won't require you to learn, but if you're interested, [read this Microsoft article on `using`](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/using-statement).



 OnGetAsync()

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 convert each value into a valid .NET type... 

ASP.NET Core provides a feature that takes care of all that for us: _model binding_. In model binding, data is retrieved from an HTTP request, it is converted into .NET types, and it is stored in corresponding model properties.

To activate model binding in a page model, make sure that the desired property name matches the `name` attribute in the `<form>`, then label it with the attribute `[BindProperty]`.

In the view page:
```html
<form method="post">
  <div class="form-group">
    <label for="Title">Title</label>
    <input type="text" class="form-control" id="Title" name="Title" placeholder="Title">
  </div>
  <div class="form-group">
    <label for="Author">Author</label>
    <input type="text" class="form-control" id="Author" name="Author" placeholder="Author">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
```

In the page model:
```cs
[BindProperty]
string Title { get; set; }

[BindProperty]
string Author { get; set; }
```

We can then remove the method parameters and assume that the submitted form values are set to their corresponding properties:

```cs
// No more method parameters!
// No more Author = author!
public void OnPost()
{ }
```

You might not be familiar with _attributes_ in C#, but that's okay. All you need to know is that the line `[BindProperty]` goes directly above each property. 

Technically, you also need to use the `Microsoft.AspNetCore.Mvc` namespace, but that is included in default ASP.NET templates. If you'd like to learn more, [read about model binding in the Microsoft documentation](https://docs.microsoft.com/en-us/aspnet/core/mvc/models/model-binding).

Model Binding

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 some points about ASP.NET Core and the page-focused Razor Pages framework:
* In view pages (**.cshtml** files), Razor syntax lets us mix C# and HTML code in one file so that we can make flexible templates.
* In page models (**.cshtml.cs** files), we use C# code and special `PageModel` classes to maintain data and handle different actions, like `GET` and `POST` requests.

This lesson will focus on page models and some of the things we can do with them, such as:
* Respond to requests using the `OnGet()` and `OnPost()` methods
* Respond to requests using the asynchronous `OnGetAsync()` and `OnPostAsync()` methods
* Use model binding to share data between view pages and page models


Re-Introduction To Page Models

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 `<form>` element).

Just like with `OnGet()`, the default behavior of an empty `OnPost()` method is to send the corresponding page. Without a `return` statement, this method also returns `void`.

```cs
public void OnPost()
{ }
```

Usually `POST` requests come with some information in the form of a query string. For example, say that a form at `www.library.com/favorite` asks for a book and an author:

```html
<form method="post">
  <div class="form-group">
    <label for="Title">Title</label>
    <input type="text" class="form-control" id="Title" name="Title">
  </div>
  <div class="form-group">
    <label for="Author">Author</label>
    <input type="text" class="form-control" id="Author" name="Author">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
```

Notice that each `<input>` has a `name` attribute &mdash; `Title` and `Author`, respectively.

In a browser it would look like:

![title](https://content.codecademy.com/courses/asp-dot-net/favorite-book-form.png)

If a user provided the input `Where The Wild Things Are` and `Maurice Sendak`, the URL would look like this (`+` represents a space):

```
www.library.com/favorite?Title=Where+The+Wild+Things+Are&Author=Maurice+Sendak
```

`OnPost()` can capture the values in the query string via matching method parameters. To capture the above values, the method would look like this:

```cs
public void OnPost(string title, string author)
{
  Title = title;
  Author = author;
}
```

Those method parameters are matched case-insensitively; `author` or `Author` or `aUTHOR` would have worked.
