Adding Navigation

So far, you have obtained the .NET SDK, a code editor and used them to build a Razor Pages web application from a template. Then you added a new page to the site. You were able to see the new page simply by navigating to it with your browser. You didn't need to perform any additional steps in order to expose the page to the outside world.

In this section, you will modify the navigation menu in the layout page to include a link to your new page and learn a little more about how navigation and URLs work in Razor Pages.

Main site navigation is located in a layout page, which, as you learned in the previous section, acts as a template for all pages that reference it. To change the navigation, open the _Layout.cshtml file located in the Pages/Shared folder.

Locate the lines of code that look like this:

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>

Add another li element between the existing ones using the following code:

<li class="nav-item">
    <a class="nav-link text-dark" asp-page="/About">About</a>
</li>

If the application is still running from the previous section, you should see the About link appear in the top right corner of the site:

If not, run the application (dotnet watch) and navigate to http://localhost:5105. Then click on the About link to ensure that the navigation works. You should arrive at the page you just created in the previous section.

Tag Helpers

The links are generated by tag helpers. These components are designed to target specific tags in the HTML. The anchor tag helper targets the HTML a element. Instead of providing an href attribute to point to an internal page, you provide an asp-page attribute that takes the path of the page, relative to the root Pages folder. The framework constructs the correct URL for the resulting hyperlink based on the routes that the have been built for the specified page.

The original anchor tag helpers include an asp-area attribute which is assigned an empty string and are therefore non-operational. You are not working with areas in this example, so the attribute has not been included in the new anchor to reduce clutter.

Routing and URLs

Routing within a Razor Pages application provides a mechanism for matching URLs to a request processing handler - an individual Razor page. Using a very simple convention. routes in Razor Pages are based on the physical location of the Razor page files on disk, rooted in the Pages folder. This makes them extremely easy to reason about. Mentally, you just replace the "Pages" folder with the domain, chop off the file extension and you have a URL for a given page so /Pages/About.cshtml becomes domain.com/about.

The same principle applies if you add sub-folders to the Pages folder. Their names become additional segments in the URL. A page at /Pages/Admin/User/Create.cshtml is reachable at the URL domain.com/admin/user/create.

By convention, a single route is created for each page except for pages that are named Index.cshtml. Two routes are constructed for Index pages - one is an empty string, and the other uses the page name: Index. However, when working with tag helpers, you must pass in the name of the file. So the first link in the project template takes "/Index" as the asp-page attribute's value.

At its heart, routing in Razor Pages is deceptively simple, but it is also very powerful and open to configuration. As you work through this tutorial series, you will see how you can customise routes for pages, and how you can use them to pass data around the application. In the meantime, you can read more about routing here.

In the next section, you will start to work with data within the application. You will begin that journey by generating a representation of the application's domain as C# classes, also known as a Model.