Client Frameworks: Blazor

In this chapter, you will learn how to implement presentation layers based on client technologies. Applications based on server technologies, like ASP.NET Core MVC, run all application layers on the server, thus also creating on the server the HTML that encodes the whole UI. Applications based on client technologies, instead, run the whole presentation layer on the client machine (mobile device, desktop computer, laptop, etc.) thus interacting with a server just to exchange data with the web API.

In other words, in an application based on client technology, the whole UI is created by code that runs on the user device, which also controls the whole user-application interaction. Both the business layer and the domain layer, instead, run on server machines to prevent users from violating business rules and authorization policies by hacking the code that runs on their devices.

In turn, applications based on client technologies can be classified as single...

Technical requirements

This chapter requires the free Visual Studio 2022 Community edition or better with all the database tools installed.

All concepts are clarified with simple example applications based on the WWTravelClub book use case you can find in the Using client technologies section of Chapter 21, Case Study.

The code for this chapter is available at https://github.com/PacktPublishing/Software-Architecture-with-C-Sharp-12-and-.NET-8-4E.

Comparison of the various types of client technologies

This section discusses the various types of client technologies:

• Single-page applications, which run in the browser with all browser restrictions
• Progressive applications, which run in the browser but can be installed like usual applications and can overcome some browser restrictions (after user permission is granted)
• Native applications, which are tied to a specific device/operating system but can take full advantage of all device/operating system features
• Cross-platform technologies, which, like native applications, can take full advantage of all device features but are compatible with several devices/operating systems

Single-page applications

There are many reasons why web development has increased in recent decades, but the most basic one is the ability to deploy any new version of the application to many users at the same time. Moreover, the security policies that are automatically...

Blazor WebAssembly architecture

Blazor WebAssembly uses the new WebAssembly browser feature to execute the .NET runtime in the browser. This way, it enables all developers to use the whole .NET code base and ecosystem in the implementation of applications capable of running in any WebAssembly-compliant browser. WebAssembly was conceived as a high-performance alternative to JavaScript. It is an assembly capable of running in a browser and obeying the same limitations as JavaScript code. This means that WebAssembly code, like JavaScript code, runs in an isolated execution environment that has very limited access to all machine resources.

WebAssembly differs from similar options from the past, like Flash and Silverlight, since it is an official W3C standard. More specifically, it became an official standard on December 5, 2019, so it is expected to have a long life. As a matter of fact, all mainstream browsers already support it.

However, WebAssembly doesn’t bring just...

Blazor pages and components

In this section, you will learn the fundamentals of Blazor components, including how to construct a component, the structure of components, how to attach events to HTML tags, how to specify the components’ characteristics, and how to use other components within your components. We have divided the content into several subsections:

• Component structure
• Templates and cascading parameters
• Error handling
• Events
• Bindings
• How Blazor updates HTML
• Component lifecycle

Component structure

Components are the core of all main client frameworks. They are the key ingredient to building modular UI, whose parts are easily modifiable and reusable. In a few words, they are the graphical counterpart of classes. In fact, just like classes, they allow encapsulation and code organization. Moreover, the component architecture allows the formal definition of efficacious UI update algorithms, as we will see in the...

Blazor forms and validation

Similar to all major SPA frameworks, Blazor offers specific tools for processing user input while providing valid feedback to the user with error messages and immediate visual clues.

In classic HTML websites, HTML forms are used to collect input, validate it, and send it to the server. In client frameworks, data is not sent to the server by submitting forms, but forms retain their validation purpose. More specifically, they act as validation units, that is, as a container for inputs that must be validated together because they belong to a unique task. Accordingly, when a submit button is clicked, an overall validation is performed, and the system notifies of the result via events. This way, the developer can define what to do in case of errors and what actions to take when the user has successfully completed their input.

It is worth pointing out that validation performed on the client side doesn’t ensure data integrity because a malicious...

Blazor advanced features

This section provides short descriptions of various Blazor advanced features organized into subsections:

• References to components and HTML elements
• JavaScript interoperability
• Globalization and localization
• Authentication and authorization
• Communication with the server
• AOT compilation

Because of a lack of space, we can’t give all the details of each feature, but the details are covered by links in the Further reading section. We start with how to reference components and HTML elements defined in Razor markup.

References to components and HTML elements

Sometimes, we might need a reference to a component in order to call some of its methods. This is the case, for instance, for a component that implements a modal window:

<Modal @ref="myModal">
...
</Modal>
...
<button type="button" class="btn btn-primary"
   @onclick="() => myModal.Show()...

Third-party tools for Blazor WebAssembly

Notwithstanding Blazor being a young product, its third-party tool and product ecosystem is already quite rich. Among the open source, free products, it is worth mentioning the Blazorise project (https://github.com/stsrki/Blazorise), which contains various free basic Blazor components (inputs, tabs, modals, and so on) that can be styled with various CSS frameworks, such as Bootstrap and Material. It also contains a simple editable grid and a simple tree view.

Also worth mentioning is BlazorStrap (https://github.com/chanan/BlazorStrap), which contains pure Blazor implementations of all Bootstrap 4 components and widgets.

Among all the commercial products, it is worth mentioning Blazor Controls Toolkit (https://blazorct.azurewebsites.net/), which is a complete toolset for implementing commercial applications. It contains all input types with their fallbacks in case they are not supported by the browser; all Bootstrap components; other...

.NET MAUI Blazor

.NET MAUI is Microsoft’s advised choice to implement cross-platform applications. In fact, .NET MAUI applications can be just-in-time compiled for all Windows, Android, iOS, and other Linux-based devices. .NET MAUI contains a common abstraction of all target devices, and at the same time takes advantage of each device’s peculiarities by offering platform-specific libraries each containing platform-specific features of a target platform.

We will not describe .NET MAUI in detail, but after a short introduction to .NET MAUI, we will focus just on .NET MAUI Blazor. This way, by learning just Blazor, you will be able to develop single-page applications, progressive applications, and cross-platform applications.

What is .NET MAUI?

.NET MAUI extends Xamarin.Forms’ cross-platform capabilities from Android and iOS to also include Windows and macOS. Thus, .NET MAUI is a cross-platform framework for creating both native mobile and desktop apps...

Summary

In this chapter, you learned about client-side technologies. In particular, you learned what an SPA is and how to build one based on the Blazor WebAssembly framework. The chapter first described the Blazor WebAssembly architecture, and then explained how to exchange input/output with Blazor components and the concept of binding.

After having explained Blazor’s general principles, the chapter focused on how to get user input while providing the user with adequate feedback and visual clues in the event of errors. Then, the chapter provided a short description of advanced features, such as JavaScript interoperability, globalization, authentication with authorization, and client-server communication.

Finally, the last section explained how to use Blazor to implement cross-platform applications based on Microsoft MAUI and how to transform a Blazor WebAssembly project into a .NET MAUI Blazor project.

Complete examples of Blazor applications based on the WWTravelClub...

Questions

1. What is WebAssembly?
2. What is an SPA?
3. What is the purpose of the Blazor router component?
4. What is a Blazor page?
5. What is the purpose of the @namespace directive?
6. What is an EditContext?
7. What is the right place to initialize a component?
8. What is the right place to process the user input?
9. What is the IJSRuntime interface?
10. What is the purpose of @ref?

Further reading

• The Blazor official documentation is available at https://docs.microsoft.com/en-us/aspnet/core/blazor.
• Lazy loading assemblies is described at https://docs.microsoft.com/en-US/aspnet/core/blazor/webassembly-lazy-load-assemblies.
• All HTML events supported by Blazor together with their event arguments are listed at https://docs.microsoft.com/en-us/aspnet/core/blazor/components/event-handling#event-arguments-1.
• Blazor supports the same validation attributes as ASP.NET MVC, with the exception of RemoteAttribute: https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation#built-in-attributes.
• A description of the InputFile component, and how to use it, can be found here: https://docs.microsoft.com/en-US/aspnet/core/blazor/file-uploads.
• More details on Blazor localization and globalization are available here: https://docs.microsoft.com/en-US/aspnet/core/blazor/globalization-localization.
• More details on Blazor authentication...