9. Single-Page Applications and Routing

Single-Page Applications

A SPA is a web application that replaces certain parts of the UI without reloading the complete page. SPAs use JavaScript to implement this manipulation of the browser’s control tree, also known as the Document Object Model (DOM), and most of them consist of a fixed UI and a placeholder element where the contents are overwritten depending on where the user clicks. One of the main advantages of using a SPA is that you can make a SPA stateful. This means that you can keep information loaded by the application in memory, just like when you build a desktop application. You will look at an example of a SPA, built with Blazor, in this chapter.

Using Blazor Layout Components

Layout components are Blazor components. Anything you can do with a regular component you can do with a layout component, like dependency injection, data binding, and nesting other components. The only difference is that they must inherit from the LayoutComponentBase class.

As you can see from Listing 9-1, the LayoutComponentBase class inherits from the ComponentBase class. This is why you can do the same thing as with normal components.

On the first line, the MainLayout component declares that it inherits from LayoutComponentBase. Then you see a sidebar and main <div> element, with the main element data binding to the inherited Body property. Any component that uses this layout component will end up where the @Body property is, so inside the <div class="content px-4">.

In Figure 9-1, you can see the sidebar on the left side (containing links to the different components of this Single-Page Application) and the main area on the right side with the @Body emphasized with a black rectangle (which I added to the figure). Clicking the Home, Counter, or Fetch Data link in the sidebar will replace the Body property with the selected component, updating the UI without reloading the whole page.

You can find the CSS style used by this layout component in the MainLayout.razor.css file.

Configuring the Default Layout Component

Internally, the RouteView component uses the LayoutView component to select the appropriate layout component. LayoutView allows you to change the layout component for any part of your component.

Run the Blazor application and manually change the browser’s URL by appending /x. Because there is nothing associated with this URL, the error layout will be used to display the error, as shown in Figure 9-2.

Selecting a Layout Component

Run the application and watch the layout change as you alternate between Home and Counter.

Any component in this folder (or subfolder) that does not explicitly declare a @layout component will use the MainLayoutRight layout component.

Nesting Layouts

This style uses the paper.jpg background from the images folder.

Run your application; now you have the Index component inside the nested layout which is inside the main layout, as shown in Figure 9-3.

Installing the Router

The Router component is a templated component with two templates. The Found template is used for known routes, and the NotFound is shown when the URI does not match any of the known routes. You can replace the contents of the last to show a nice error page to the user.

The Found template uses a RouteView component which will render the selected component with its layout (or default layout). When the Router component gets instantiated, it will search its AppAssembly property for all components that have the RouteAttribute (the @page razor directive gets compiled into a RouteAttribute) and pick the component that matches the current browser’s URI. For example, the Counter component has the @page "/counter" razor directive, and when the URL in the browser matches /counter, it will display the Counter component in the MainLayout component.

The NavMenu Component

The first part of Listing 9-14 contains the Toggle button which allows you to hide and show the navigation menu. This button is only visible on displays with a narrow width (e.g., mobile displays). If you want to look at it, run your application and make the browser width smaller until you see the hamburger button in the top right corner, as in Figure 9-4. Click the button to show the navigation menu and click it again to hide the menu again.

The remaining markup contains the navigation menu, which consists of NavLink components. Let’s look at the NavLink component.

When the browser’s URI is empty (except for the site’s URL), the NavLink from Listing 9-16 will be active. But here you have a special case. Normally, NavLink components only match the end of the URI. For example, /counter matches the NavLink from Listing 9-15. But with an empty URI, this would match everything! This is why in the special case of an empty URI you need to tell the NavLink to match the whole URI. You do this with the Match property, which by default is set to NavLinkMatch.Prefix . If you want to match the whole URI, use NavLinkMatch.All as in Listing 9-16.

Setting the Route Template

The Routing component from Blazor examines the browser’s URI and searches for a component’s route template to match. But how do you set a component’s route template? Open the Counter component shown in Listing 9-8. At the top of this file is the @page "/counter" razor directive. It defines the route template. A route template is a string matching a URI, and that can contain parameters, which you can then use in your component.

Just like routes in ASP.NET MVC Core, you can use route constraints to limit the type of parameter to match. For example, if you were to use the /counter/Blazor URI, the route template would not match because the parameter does not hold an integer value and the router would not find any component to match.

Constraints are even mandatory if you’re not using string typed parameters; otherwise, the router does not cast the parameter to the proper type. You specify the constraint by appending it using a colon, for example, @page "/counter/{currentCount:int}". You can also make the parameter optional by appending a question mark after the constraint as shown in Listing 9-17.

If you are building your components as pure C# components, apply the RouteAttribute to your class with the route template as an argument. This is what the @page directive gets compiled into.

Redirecting to Other Pages

How do you navigate to another component using routing? You have three choices: use a standard anchor element, use the NavLink component, and use code. Let’s start with the normal anchor tag.

This link has been styled as a button using Bootstrap 4. Run your application and navigate to the Counter component. Click the Home button to navigate to the Index component whose route template matches “/”.

The NavLink component uses an underlying anchor, so its usage is similar. The only difference is that a NavLink component applies the active class when it matches the route. Generally, you only use a NavLink in the NavMenu component, but you are free to use it instead of anchors.

Navigating in code is also possible, but you will need an instance of the NavigationManager class through dependency injection. This instance allows you to examine the page’s URI and has a helpful NavigateTo method. This method takes a string that will become the browser’s new URI.

You tell dependency injection with the @inject razor directive to give you an instance of the NavigationManager and put it in the navigationManager field. The NavigationManager is one of the types that Blazor provides out of the box through dependency injection. Then you add a button that calls the StartFrom50 method when clicked. This method uses the NavigationManager to navigate to another URI by calling the NavigateTo method. Run your application and click the “Start from 50” button. You should navigate to /counter/50.

Understanding the Base Tag

Please don’t use absolute URIs when navigating. Why? Because when you deploy your application on the Internet, the base URI will change. Instead, Blazor uses the <base/> HTML element and all relative URIs will be combined with this <base/> tag. Where is the <base/> tag? With Blazor WebAssembly, open the wwwroot folder of your Blazor project and open index.html, shown in Listing 9-20.

Listing 9-20. index.html

If you are using Blazor Server, the base tag can be found in _Host.cshtml.

When you deploy in production, all you need to do is to update the base tag. For example, you might deploy your application to https://online.u2u.be/selfassessment. In this case, you would update the base element to <base href="/selfassessment" />. So why do you need to do this? If you deploy to https://online.u2u.be/selfassement, the Counter component’s URI becomes https://online.u2u.be/selfassessment/counter. Routing will ignore the base URI so it will match the counter as expected. You only need to specify the base URI once, as shown in Listing 9-20.

You can also access the base URI (with a trailing slash) using the NavigationManager BaseUri property. This can be useful for passing absolute URIs, for example, to certain JavaScript libraries. We will discuss JavaScript interoperability in the next chapter.

Lazy Loading Component Libraries

Lazy loading works by moving your infrequently used components into one or more component libraries, and then download right before you need them. We discussed building component libraries in Chapters 3 and 4. But let us start with a project, move these components and their dependencies into libraries, and then lazy load them. In the book’s download, you should find a solution called lazy loading. Open it. This project should look familiar. You should be able to build and run this application. Now, for the sake of the example, assume that the Counter and FetchData components are components we want to lazy load.

Let us start with the Counter component. Create a Razor Class Library project called LazyLoading.Library. Move the Counter component to this library. Now add a project reference to this library in the client project, and add a @using directive to the _Imports.razor (the one in the client project).

Build and run your solution. Click the Counter link. Hmm. No Counter has been found. Why?

We moved the Counter component to a razor library, but we still load the Counter component when the application is loaded. Time to enable lazy loading for the razor library.

First, we will tell the runtime not to load the assembly automatically, and then we will load it when needed.

Marking an Assembly for Lazy Loading

Dynamically Loading an Assembly

Now we need to load this assembly when needed. When do we load this assembly? When we navigate to a component that needs components from this assembly. How do we know we are navigating? The Router component has an event for this called OnNavigateAsync , and we will use it to detect when we navigate to a component that uses a lazy loaded component. Then we will download the assembly using the LazyAssemblyLoader so it is ready for use.

Build and run the application. It should start, and when we click Counter, the browser will download it and then render it.

Lazy Loading and Dependencies

Let us now try to lazy load the FetchData component. This component uses an IWeatherService instance, implemented by the WeatherService class (the one in the Blazor project). We will move both into the component library.

Start moving the FetchData component and WeatherService class to the component library. Add a project reference to the library project for the shared project since the WeatherService uses the Shared project’s IWeatherService.

Your library project should compile now.

After fixing a couple of namespaces in C#, the project should build. But running will fail. Why? In Program.cs, you are adding the WeatherService class from the lazy loaded library, but that has not been loaded (because you told the runtime not to load it).

Maybe we could postpone registering the WeatherService ? Sorry, that will not work. After initialization, dependency injection becomes immutable so you cannot add dependencies later. Of course, we could keep the WeatherService in the Blazor client project, but let us pretend it is worth our while to lazy load it. Time to introduce a little layer. We will use a factory method to create the dependency, and we will use dependency injection to inject the factory method. This will require a couple of changes.