Lesson 3
Routing in Razor Pages
Introduction to Routing in Razor Pages

Welcome to the lesson on routing in Razor Pages. In this session, you will learn about the concept of routing and how it applies to Razor Pages applications. We'll focus on creating custom routes in Razor Pages, which is essential for building navigable and user-friendly web applications.

Routing determines how an application responds to a client request for a particular URL. In Razor Pages, routing is straightforward and allows us to define both page-specific routes and custom routes tailored to our needs. By mastering routing, you'll be able to create more dynamic and complex web applications.

Defining Basic Routes

By default, Razor Pages uses a page-based routing approach where routes are determined by the file path of the pages.

For instance, the Index.cshtml file can be accessed at the root URL /.

Let's look at an example of the default index page routing:

Pages/Index.cshtml

HTML, XML
1@page
2@model IndexModel
3<!DOCTYPE html>
4<html>
5<head>
6    <title>Home Page</title>
7</head>
8<body>
9    <h1>Welcome to the Home Page</h1>
10    <ul>
11        <li><a href="/custom">Go to Custom Page</a></li>
12        <li><a href="/custom-route">Go to Custom Route</a></li>
13    </ul>
14</body>
15</html>

Explanation:

  • The <ul> with links will help us verify routing to custom pages and routes in later examples. These custom routes are not defined yet; we will define them in the next steps.
Creating Custom Pages and Routes

To define custom routes, we start by creating new Razor Pages. Let's create a new page called Custom.cshtml with a custom route.

Pages/Custom.cshtml

HTML, XML
1@page "/custom"
2@model CustomModel
3<!DOCTYPE html>
4<html>
5<head>
6    <title>Custom Page</title>
7</head>
8<body>
9    <h1>Custom Route</h1>
10    <p>This is a custom route page.</p>
11</body>
12</html>

and

Pages/Custom.cshtml.cs

C#
1using Microsoft.AspNetCore.Mvc.RazorPages;
2
3public class CustomModel : PageModel
4{
5    public void OnGet()
6    {
7        // Logic for custom route
8    }
9}

Explanation:

  • The @page "/custom" directive defines the custom route for this page.
  • Now, navigating to /custom in the browser will render this page.
  • The CustomModel class in Custom.cshtml.cs uses the PageModel class, handling any server-side logic needed for our custom route.
Case Sensitivity in Routing

It's important to understand that routing in ASP.NET Core, including Razor Pages, is case-sensitive by default. This means that the URLs defined in the @page directive need to match the exact casing when accessed from a browser.

For example:

  • The route @page "/custom" will only match the URL /custom.
  • It will not match URLs like /Custom, /CUSTOM, etc.
  • This strict case sensitivity ensures precision in routing, but it requires attention to detail when defining and accessing routes.
Mapping Custom Routes in Program.cs

Razor Pages not only allows us to define routes directly in the page files but also allows us to map custom routes in the Program.cs file.

Let's add a custom route to the Program.cs:

  • Program.cs 
    C#
    1var builder = WebApplication.CreateBuilder(args);
2builder.Services.AddRazorPages();
3var app = builder.Build();
4app.MapRazorPages();
5app.MapGet("/custom-route", () => "Custom route response");
6app.Run();

Explanation:

  • app.MapGet("/custom-route", () => "Custom route response"); maps a GET request to the /custom-route URL and sets the response to "Custom route response".
  • This allows us to handle this custom route separately from the Razor Pages routing mechanism, showing versatility in handling routes.

If you navigate to /custom-route, you should see the static response "Custom route response".

Linking Between Pages and Routes

To facilitate navigation within our application, we need to create links between the pages and custom routes. We've already added some links in Index.cshtml.

Revisiting Index.cshtml:

  • Pages/Index.cshtml 
    HTML, XML
    1@page
2@model IndexModel
3<!DOCTYPE html>
4<html>
5<head>
6    <title>Home Page</title>
7</head>
8<body>
9    <h1>Welcome to the Home Page</h1>
10    <ul>
11        <li><a href="/custom">Go to Custom Page</a></li>
12        <li><a href="/custom-route">Go to Custom Route</a></li>
13    </ul>
14</body>
15</html>

Explanation:

  • The links are defined using anchor (<a>) tags with href attributes pointing to /custom and /custom-route.
  • Clicking these links will navigate to the respective custom page and route, demonstrating the routing mechanism in action.
Lesson Summary and Next Steps

In this lesson, we covered several key aspects of routing in Razor Pages:

  • You learned about the default routing behavior in Razor Pages.
  • We created custom pages and routes.
  • We mapped custom routes in the Program.cs file.
  • Lastly, we linked between pages and custom routes to make navigation within the application easy.

By the end of this lesson, you should be more comfortable defining routes and setting up custom routes in Razor Pages, allowing you to build more complex and navigable web applications. Be sure to practice what you've learned by creating additional custom routes and pages to solidify your understanding.

Stay tuned for the practice exercises that will help you reinforce these concepts. Keep up the great work!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.