Understanding Blazor Routing and Layout

In the previous chapter, we explored the process of designing a login page using Blazor. Although the app layout and navigation hierarchy remain XAML-based, our app utilizes a hybrid UI implementation that combines both Blazor and XAML. Blazor offers an alternative approach to UI design for .NET MAUI apps. In this second part of the book, we will reconstruct the entire UI using Blazor exclusively. Since the initial step of UI design typically involves the implementation of layout and navigation, this chapter will introduce the concepts of layout and routing within Blazor.

We will cover the following topics in this chapter:

• Client-side Blazor routing
• Using Blazor layout components
• Implementing navigation elements

Technical requirements

To test and debug the source code in this chapter, you need to have Visual Studio 2022 installed on your PC or Mac. Please refer to the Development environment setup section in Chapter 1, Getting Started with .NET MAUI, for the details.

The source code for this chapter is available in the following GitHub repository: https://github.com/PacktPublishing/.NET-MAUI-Cross-Platform-Application-Development-Second-edition/tree/main/2nd/chapter09.

To check out the source code of this chapter, we can use this command:

$ git clone -b 2nd/chapter09 https://github.com/PacktPublishing/.NET-MAUI-Cross-Platform-Application-Development-Second-edition.git PassXYZ.Vault2

To find out more about the source code in this book, please refer to the Managing the source code in this book section in Chapter 2, Building Our First .NET MAUI App.

Understanding client-side routing

The routing and layout of Blazor bear similarities to the concepts of Shell and navigation in the XAML realm. In Chapter 5, Navigation Using .NET MAUI Shell and NavigationPage, we introduced navigation and Shell while discussing the routing strategy of Shell. Shell offers a URI-based navigation experience that relies on routes to navigate to designated pages. The routing of Blazor closely resembles this approach.

Blazor routing allows for seamless transitions between Razor pages. Rendering Razor pages in BlazorWebView is akin to web apps operating in a browser.

In traditional web applications, loading an HTML page in a browser fetches the page from the web server. Selecting a different route subsequently retrieves a new page from the server. However, the process varies slightly for single-page applications (SPAs).

Blazor WebAssembly applications fall under the category of SPAs. When launching an app, it is loaded into the browser, and...

Using Blazor layout components

Most web pages typically feature fixed elements such as headers, footers, or menus. By designing a page with a layout combined with its content, we can minimize redundant code. The page itself displays the content intended for users, while the layout assists in constructing visual styles and providing navigational methods.

Blazor layout components are classes derived from LayoutComponentBase. Any functionality applicable to regular Razor components can also be applied to layout components.

In Listing 9.1, we observe that MainLayout serves as the default layout for the pages. Its definition can be found in Listing 9.2, as shown below:

@inherits LayoutComponentBase                             //(1)
<div class="page">
  <div class="sidebar">
    <NavMenu />                                           //(2)
  </div>
  <main>
    @Body                                                 //(3)
  <...

Implementing navigation elements

In Chapter 5, Navigation Using .NET MAUI Shell and NavigationPage, we introduced the concepts of absolute and relative routes within Shell. Absolute routes can be defined in a visual navigation hierarchy, while relative routes are navigable using query parameters.

This navigation approach closely resembles the strategy employed in the Blazor version of our app. As illustrated in Figure 9.4, we implement Blazor UI elements in a manner similar to the XAML version.

Figure 9.4: Navigation elements

The Items page serves as the main page of our app after login. On this page, which displays a list of items, the following UI elements are related to navigation:

• A list view – Users can navigate the list and select an item.
• Context menu – Associated with each item in the list view, enabling users to edit or delete items.
• Back button – Allows users to navigate back.
• Add button – Enables...

Summary

In this chapter, we explored the routing and layout of Blazor, which are essential components for constructing the navigation hierarchy of our application. By the end of this chapter, we are now capable of executing basic navigation, similar to the functionality offered by the XAML version of our app.

Throughout the UI construction process in this chapter, we observed that the UI design technique of Blazor aligns with conventional web UI design practices. This allows for the reuse of code from existing frameworks, such as Bootstrap.

When creating a custom UI, it is often beneficial to design the initial layout in a playground first. Once satisfied with the UI design, the HTML and CSS code can be copied into a Razor file to construct a Razor component. Several playgrounds popular among frontend developers can also be utilized by Blazor developers, including CodePen, JSFiddle, CodeSandbox, and StackBlitz.

In this chapter, we utilized Bootstrap examples to construct...