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

Uploading files

The InputFile component is a built-in Blazor component that is used to upload files into a Blazor app. It renders an HTML input element of type file and supplies a stream for the contents of the file. It is in the Microsoft.AspNetCore.Components.Forms namespace.

The OnChange event of the InputFile component is used to set the callback that gets invoked when a file is selected. This is an example of an InputFile component that invokes the OnChangeHandler method when a file is selected:

<InputFile OnChange="OnChangeHandler" 
           accept="image/png, image/jpeg" />

This is the resulting HTML markup from the preceding example:

<input accept="image/png, image/jpeg" type="file" _bl_2="">

In the preceding HTML markup, the _bl_2 attribute is used for Blazor’s internal processing, but everything else is a typical input element. The accept attribute is used to filter the types of...