Book Image

Blazor WebAssembly by Example, 2e - Second Edition

By : Toi B. Wright

5 (1)

Book Image

Blazor WebAssembly by Example, 2e - Second Edition

5 (1)

By: Toi B. Wright

Overview of this book

Blazor WebAssembly helps developers build web applications without the need for JavaScript, plugins, or add-ons. With its continued growth in popularity, getting started with Blazor now can open doors to new career paths and exciting projects – and Blazor WebAssembly by Example will make your first steps easier. This is a project-based guide that will teach you how to build single-page web applications with Blazor, focusing heavily on the practical over the theoretical by providing detailed step-by-step instructions for each project. The author also includes a video for each project showing her following the step-by-step instructions, so readers can use them if they're unsure about any particular step. In this updated edition, you'll start by building simple standalone web applications and gradually progress to developing more advanced hosted web applications with SQL Server backends. Each project will cover a different aspect of the Blazor WebAssembly ecosystem, such as Razor components, JavaScript interop, security, event handling, debugging on the client, application state, and dependency injection. The book’s projects get more challenging as you progress, but you don’t have to complete them in order, which makes this book a valuable resource for beginners as well as those who just want to dip into specific topics. By the end of this book, you will have experience and lots of know-how on how to build a wide variety of single-page web applications with .NET, Blazor WebAssembly, and C#.

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

Introduction to Blazor WebAssembly

Introduction to Blazor WebAssembly

Benefits of using the Blazor framework

What is WebAssembly?

Setting up your PC

Further reading

Building Your First Blazor WebAssembly Application

Building Your First Blazor WebAssembly Application

Creating the Demo Blazor WebAssembly Project Technical Requirements

Razor components

Creating the Demo Blazor WebAssembly project

Further reading

Debugging and Deploying a Blazor WebAssembly App

Debugging and Deploying a Blazor WebAssembly App

Technical requirements

Debugging a Blazor WebAssembly.app

Debugging in Visual Studio

Understanding logging

Handling exceptions

Using ahead-of-time (AOT) compilation

Deploying a Blazor WebAssembly app to Microsoft Azure

Creating the “guess the number” project

Further reading

Building a Modal Dialog Using Templated Components

Building a Modal Dialog Using Templated Components

Technical requirements

Using RenderFragment parameters

Using EventCallback parameters

Understanding CSS isolation

Creating the modal dialog project

Further reading

Building a Local Storage Service Using JavaScript Interoperability (JS Interop)

Building a Local Storage Service Using JavaScript Interoperability (JS Interop)

Technical requirements

Why use JavaScript?

Exploring JS interop

Using local storage

Creating the local storage service

Further reading

Building a Weather App as a Progressive Web App (PWA)

Building a Weather App as a Progressive Web App (PWA)

Technical requirements

Understanding PWAs

Working with manifest files

Working with service workers

Using the CacheStorage API

Using the Geolocation API

Using the OpenWeather One Call API

Further reading

Building a Shopping Cart Using Application State

Building a Shopping Cart Using Application State

Technical requirements

Introducing the application state

Understanding DI

Creating the shopping cart project

Further reading

Building a Kanban Board Using Events

Building a Kanban Board Using Events

Technical requirements

Attribute splatting

Arbitrary parameters

Creating the Kanban board project

Further reading

Uploading and Reading an Excel File

Uploading and Reading an Excel File

Technical requirements

Uploading files

Using virtualization

Reading Excel files

Creating the Excel reader project

Further reading

Using Azure Active Directory to Secure a Blazor WebAssembly Application

Using Azure Active Directory to Secure a Blazor WebAssembly Application

Technical requirements

Understanding the difference between authentication and authorization

Working with authentication

Controlling the user interface using authorization

Creating the claims viewer project

Further reading

Building a Task Manager Using ASP.NET Web API

Building a Task Manager Using ASP.NET Web API

Technical requirements

Understanding hosted applications

Using the HttpClient service

Using JSON helper methods

Creating the TaskManager project

Further reading

Building an Expense Tracker Using the EditForm Component

Building an Expense Tracker Using the EditForm Component

Technical requirements

Creating a data entry form

Using the built-in input components

Using the validation components

Locking navigation

Creating the expense tracker project

Further reading

Other Books You May Enjoy

Other Books You May Enjoy

Index

Customer Reviews

5 (1)

5 star

100%

4 star

0

3 star

0

2 star

0

1 star

0

Setting up your PC

For the projects in this book, we use Microsoft Visual Studio Community 2022, .NET 7, Microsoft SQL Server 2022 Express Edition, and Microsoft Azure.

All the projects are built using Microsoft Visual Studio Community 2022 (64-bit) – Current Version 17.4.2 with the ASP.NET and Web Development workload. If you need to install Microsoft Visual Studio Community 2022, follow the directions in the Installing Microsoft Visual Studio Community Edition section later in this chapter.

TIP

Although we are using Microsoft Visual Studio Community 2022, any edition of Microsoft Visual Studio 2022 can be used to complete the projects in this book. Microsoft Visual Studio Code can also be used. However, all the screenshots are from Microsoft Visual Studio Community 2022.

Blazor WebAssembly in .NET 7 requires .NET 7.0. To determine the version of .NET that is running on your computer, open Command Prompt and enter the following command:

dotnet –-version

If your computer is not running .NET 7.0 or higher, follow the directions in the Installing .NET 7.0 section later in this chapter.

Chapters 3 and 10 use Microsoft Azure. Chapter 3 uses Microsoft Azure to publish a Blazor WebAssembly application and Chapter 10 uses Microsoft Azure Active Directory to secure a Blazor WebAssembly application.

The final two projects in this book use Microsoft SQL Server 2022 Express Edition as the backend database. If you need to install Microsoft SQL Server Express Edition, follow the directions in the Installing Microsoft SQL Server Express section later in this chapter.

TIP

Although we are using Microsoft SQL Server 2022 Express Edition, any year or edition of SQL Server can be used to complete the projects in this book.

Installing Microsoft Visual Studio Community Edition

Microsoft Visual Studio Community Edition is the free edition of Microsoft Visual Studio. To install Microsoft Visual Studio Community Edition, perform the following steps:

Download the Visual Studio installer from https://visualstudio.microsoft.com.

Text

Description automatically generated

Figure 1.4: Download Visual Studio selector

Once the download is complete, run the installer to complete the installation.
During the first step in the installation process, the Visual Studio installer will check the system for existing versions of Visual Studio. Once the installer has finished checking for installed versions, it will open the following installation dialog:

Graphical user interface, application

Description automatically generated

Figure 1.5: The Visual Studio installer

Select the ASP.NET and web development workload and click the Install button to complete the installation.

Installing .NET 7.0

To install .NET 7.0, perform the following steps:

Download the .NET 7.0 installer from https://dotnet.microsoft.com/download/dotnet/7.0. We are using the Windows x64 SDK Installer.
Once the download completes, run the installer to complete the installation of .NET 7.0 on your computer.
Open Command Prompt and enter the following command to verify that your computer is now running .NET 7.0:
```
dotnet –-version
```
The following screenshot is from a computer that is running .NET 7.0:

Figure 1.6: .NET version

Installing Microsoft SQL Server Express

Microsoft SQL Server Express is the free edition of Microsoft SQL Server. To install Microsoft SQL Server Express, do the following:

Download the Microsoft SQL Server installer for SQL Server Express from https://www.microsoft.com/en-us/sql-server/sql-server-downloads.
After the download completes, run the SQL Server installer.
Select the Basic installation type:

Graphical user interface

Description automatically generated

Figure 1.7: The SQL Server installer

Click the Accept button to accept the Microsoft SQL Server License Terms.
Click the Install button to complete the installation.
The following screenshot shows the dialog that appears after SQL Server Express has been successfully installed:

Figure 1.8: SQL Server Express Edition

Create a Microsoft Azure account

Microsoft Azure is Microsoft’s cloud platform and it offers over 200 products and cloud services. You can use it to run and manage applications with the tools and frameworks of your choice.

If you do not already have a Microsoft Azure account, you can create a free account. Each free account comes with a generous $200 credit to get you started and over 55+ free services.

Graphical user interface, application

Description automatically generated

Figure 1.9: Microsoft Azure

To create a free Microsoft Azure account, do the following:

Navigate to the Microsoft Azure page, https://azure.microsoft.com/.
Click the Free account button.
Click the Start free button.
Complete the agreement and click the Sign up button.

To complete all the projects in this book, you will need a code editor, such as Microsoft Visual Studio Community 2022, .NET 7.0, Microsoft Azure, and Microsoft SQL Server. In this chapter, we showed you how to install Visual Studio 2022 Community Edition, .NET 7.0, and SQL Server 2022 Express Edition. We also showed you how to open a free Microsoft Azure account.