ENDS 12/4: Get 50% off your Pro annual membership using code [CYBER23](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=CYBER23)


Routing

Well done! Instead of ugly URLs like:
```
localhost:8000/Movies/Horror/Create?title=Spooky+Ghosts&length=120
```

You can now re-define them like:
```
localhost:8000/AddScaries/Spooky+Ghosts/120
```

In this lesson you learned:
* Typing a string after the `@page` directive will edit the page's default route.
* Typing parameters within curly braces after the `@page` directive will define a route template.
* Route values can be made optional with a question mark `?`.
* Route values can be constrained using the colon syntax and [keyword constraints](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/routing#route-constraint-reference).
*  The `asp-route-{value}` attribute can add additional information to an `<a>` element's `href` attribute, either in the form of an additional route segment or query string, depending on how the route template is defined.

```html

@page

@page "/Days"

@page "/Days/{day}"

@page "/Days/{day:int}"

@page "/Days/{day:int?}"

Review

Remember the Anchor Tag Helper? It's the one with `asp-page` and `asp-route-{value}`  attributes that allows us to create `<a>` links that submit data with a `GET` request.

Previously we saw how the resulting `asp-route-{value}` appended a query string to the URL:

```html
<a asp-page="./Blogpost" asp-route-id="4">ID 4</a>
```

The above Razor syntax would render as this HTML:

```html
<a href="./Blogpost?id=4">ID 4</a>
```

What happens if our URL template accepts URL segments instead of a query string? It would be defined like this in **Blogpost.cshtml**:

```
@page {id}
```

Here we find another advantage of Tag Helpers over plain HTML: it automatically formats URLs to match the defined template. 

When we use URL segments instead of query strings, the old Anchor Tag Helper...

```html
<a asp-page="./Blogpost" asp-route-id="4">ID 4</a>
```

...would render as this HTML...

```html
<a href="./Blogpost/4">ID 4</a>
```

In review:

* `asp-page` &mdash; Sets an anchor tag's `href` attribute value to a specific page
* `asp-route-{value}` &mdash; Appends route values to the generated `href` attribute, either as query string values or URL segments (depending on the route template). `{value}` is the name of the parameter.


asp-route-{value} revisited

By default, each page's URL is defined by its filename:
* **Index.cshtml** is at `localhost:8000`
* **Privacy.cshtml** is at `localhost:8000/Privacy`

What if we want to override those defaults?

We can add and/or change URL segments by adding a string after the `@page` directive. For example, if we used this line at the top of **Privacy.cshtml**...

```html
@page "/Pirates"
```

...then **Privacy.cshtml** would now be available at `localhost:8000/Pirates`.

If we remove the forward slash (`/`), then we append a segment. Using this line...

```html
@page "Pirates"
```

...makes  **Privacy.cshtml** available at `localhost:8000/Privacy/Pirates`.

Aside from practical jokes, custom URLs are useful when you have a page deep in your folder hierarchy and you want a shorter URL. For example, if we used this line at the top of **Movies/Horror/Create.cshtml**...

```html
@page "/AddScaries"
```

...then that file would be available at `localhost:8000/AddScaries` instead of `localhost:8000/Movies/Horror/Create`.

Just make sure to use that forward slash, `/`. If you don't, it will append the segment to the end of the existing URL.


Customize the URL

We can make route values optional with a question mark `?`. 

For example, this defines an optional `title` template:

```html
@page "{title?}"
```

In order to capture that in a method parameter, you'll need to also use the question mark there:

```cs
public void OnGet(string? title) { }
```

When combining with an `if` - `else` statement, your handler method can change behavior based on whether the value was provided:

```cs
public void OnGet(string? title)
{
  if (String.IsNullOrEmpty(title))
  {
    IsGeneralDisplay = true;
  }
  else
  {
    Title = title.Value;
    IsGeneralDisplay = false;
  }
}
```

In the `if` condition, we use `String.IsNullOrEmpty()` to check the value of `title`. It returns true if the `title` is not provided in the URL or it is empty (`""`). For non-string types, we use the `HasValue` property. For example:

```cs
public void OnPost(bool? b)
{
  if (b.HasValue)
  {
    // Access b.Value
  }
  else
  {
    // b is null
  }
}
```

You can [read more about nullable types in the Microsoft documentation](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/nullable-value-types).


Add Optional Route Templates

Imagine that you were building an exercise app to track your activity. You could store each of your day's steps and workouts in the app and you could view both your total activity for the week and individual activity for each day.

With the page-based framework of Razor Pages,
* How would you duplicate the individual-day view? Would you need to write a new page for every day?
* How could you customize your URLs to match each day?

These questions can be solved with _routing_. Instead of URLs like `/Activity` you can rename it to `Days` and make variable route parameters like `/Days/1`, `/Days/2`, etc.  In this lesson you'll do the following:
* Define custom URL segments 
* Define route templates
* Add Constraints on route templates
* Understand how Tag Helpers adapt to custom routing


Introduction to Routing

So far, we've seen two ways to pass data from the browser to a page model. Once a form is submitted we can:
1. Capture the data using method parameters, like `OnPost(string title)`, or
2. Bind the data to properties using `[BindProperty]`

In both cases the `POST` request is made to a URL with a query string, like:

```
localhost:8000/Movies?title=Inception
```

We can reformat the URL so that the data is provided in URL segments instead, like:

```
localhost:8000/Movies/Inception
```

This format makes the URL more readable and more search-engine friendly. Here's the generalized format:

```
localhost:8000/Movies/{title}
```

Inside a **.cshtml** file, we can specify this with the `@page` directive, using a kind of variable, known as a route value or route parameter, wrapped in curly braces. Assuming the page lives in **Movies.cshtml**, then the first line of the file would be:

```html
@page "{title}"
```

Make sure that you use double quotes and curly braces: `"{  }"`.

The way to capture these values is no different than before.

Capture with method parameters:
```cs
OnPost(string title)
```
Or with model-binding:
```cs
[BindProperty]
string Title { get; set; }
```


Route Templates

Like everywhere else in C#, strict type constraints help us avoid errors. Imagine if someone sent a `POST` request to this URL:
```
localhost:8000/veggies/YES/fruits/NO/grains/IDUNNO/protein/SORTA/dairy/NEVER
```

It would break our application, which expects integers for each of those route values. Within our `@page` directive we can specify that constraint like the below, where `int` stands for "integer" (we'll show an abbreviated version here):

```
@page "/veggies/{veggies:int}..."
```

The general format is:

```
@page "{routevalue:constraint}"
```

If you want the route value to remain optional, use the question mark after the constraint, like:

```
@page "/veggies/{veggies:int?}..."
```

There are a lot of constraints out there, but here are a few to get started:
* `int` &mdash; value must be any integer
* `alpha` &mdash; value must consist of one or more alphabetical characters (a-z, case-insensitive)
* `bool` &mdash; value must be true or false (case-insensitive)

A longer (but not exhaustive) [list of constraints is available in the Microsoft documentation](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/routing#route-constraint-reference).

