37 Using Blazor WebAssembly

This chapter covers

Using WebAssembly to create self-contained client-side applications
Creating WebAssembly components
Navigating between components in a WebAssembly application
Creating a forms application using WebAssembly components

In this chapter, I demonstrate the use of Blazor WebAssembly, which is an implementation of Blazor written for WebAssembly.

WebAssembly is a virtual machine running inside the browser. High-level languages are compiled into low-level language-neutral assembler format that can be executed at close to native performance. WebAssembly provides access to the APIs available to JavaScript applications, which means that WebAssembly applications can access the domain object model, use cascading style sheets, and initiate asynchronous HTTP requests.

Blazor WebAssembly breaks the dependency on the server and executes the Blazor application entirely in the browser. The result is a true client-side application, with access to all the same features of Blazor Server but without the need for a persistent HTTP connection.

37.1 Preparing for this chapter

37.1.1 Dropping the database and running the application

37.2 Setting Up Blazor WebAssembly

37.2.1 Creating the shared project

37.2.2 Creating the Blazor WebAssembly project

37.2.3 Preparing the ASP.NET Core project

37.2.4 Adding the solution references

37.2.5 Opening the projects

37.2.6 Completing the Blazor WebAssembly configuration

37.2.7 Testing the placeholder components

37.3 Creating a Blazor WebAssembly component

37.3.1 Importing the data model namespace

37.3.2 Creating a component

37.3.3 Creating a layout

37.3.4 Defining CSS styles

37.4 Completing the Blazor WebAssembly Form application

37.4.1 Creating the details component

37.4.2 Creating the editor component

Summary