Book Image

Blazor WebAssembly by Example

By : Toi B. Wright
Book Image

Blazor WebAssembly by Example

By: Toi B. Wright

Overview of this book

Blazor WebAssembly makes it possible to run C# code on the browser instead of having to use JavaScript, and does not rely on plugins or add-ons. The only technical requirement for using Blazor WebAssembly is a browser that supports WebAssembly, which, as of today, all modern browsers do. Blazor WebAssembly by Example is a project-based guide for learning how to build single-page web applications using the Blazor WebAssembly framework. This book emphasizes the practical over the theoretical by providing detailed step-by-step instructions for each project. You'll start by building simple standalone web applications and progress to developing more advanced hosted web applications with SQL Server backends. Each project covers a different aspect of the Blazor WebAssembly ecosystem, such as Razor components, JavaScript interop, event handling, application state, and dependency injection. The book is designed in such a way that you can complete the projects in any order. By the end of this book, you will have experience building a wide variety of single-page web applications with .NET, Blazor WebAssembly, and C#.

Related Content you might be interested in

Current Title:

Small book image
Blazor WebAssembly by Example
Toi B. Wright
Jul, 2021 | 266 pages
No titles found
Table of Contents (11 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Code in Action
Download the color images
Conventions used
Get in touch
Reviews
1
Chapter 1: Introduction to Blazor WebAssembly
Chapter 1: Introduction to Blazor WebAssembly
Benefits of using the Blazor framework
Hosting models
What is WebAssembly?
Setting up your PC
Summary
Questions
Further reading
Free Chapter
2
Chapter 2: Building Your First Blazor WebAssembly Application
Chapter 2: Building Your First Blazor WebAssembly Application
Technical requirements
Razor components
Routing in Blazor WebAssembly
Razor syntax
Project overview
Creating the Demo Blazor WebAssembly project
Creating a custom Blazor WebAssembly project template
Summary
Questions
Further reading
3
Chapter 3: Building a Modal Dialog Using Templated Components
Chapter 3: Building a Modal Dialog Using Templated Components
Technical requirements
RenderFragment parameters
EventCallback parameters
CSS isolation
Project overview
Creating the modal dialog project
Summary
Questions
Further reading
4
Chapter 4: Building a Local Storage Service Using JavaScript Interoperability (JS Interop)
Chapter 4: Building a Local Storage Service Using JavaScript Interoperability (JS Interop)
Technical requirements
Why use JavaScript?
Exploring JS interop
Understanding local storage
Project overview
Creating the local storage service
Summary
Questions
Further reading
5
Chapter 5: Building a Weather App as a Progressive Web App (PWA)
Chapter 5: 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
Project overview
Creating a PWA
Summary
Questions
Further reading
6
Chapter 6: Building a Shopping Cart Using Application State
Chapter 6: Building a Shopping Cart Using Application State
Technical requirements
Application state
Understanding DI
Project overview
Creating the shopping cart project
Summary
Questions
Further reading
7
Chapter 7: Building a Kanban Board Using Events
Chapter 7: Building a Kanban Board Using Events
Technical requirements
Event handling
Attribute splatting
Arbitrary parameters
Project overview
Creating the Kanban board project
Summary
Questions
Further reading
8
Chapter 8: Building a Task Manager Using ASP.NET Web API
Chapter 8: Building a Task Manager Using ASP.NET Web API
Technical requirements
Understanding hosted applications
Using the HttpClient service
Using JSON helper methods
Project overview
Creating the TaskManager project
Summary
Questions
Further reading
9
Chapter 9: Building an Expense Tracker Using the EditForm Component
Chapter 9: Building an Expense Tracker Using the EditForm Component
Technical requirements
Overview of the EditForm component
Using the built-in input components
Using the validation components
Project overview
Creating the ExpenseTracker project
Summary
Questions
Further reading
Why subscribe?
10
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you
Leave a review - let other readers know what you think

Understanding DI

DI is a technique in which an object accesses services that have been configured in a central location. The central location is the DI container. When using DI, each consuming class does not need to create its own instance of the injected class that it has a dependency on. It is provided by the framework and is called a service. In a Blazor WebAssembly application, the services are defined in the Program.Main method of the program.cs file.

We have already used DI in this book with the following services:

  • HttpClient
  • IJSRuntime
  • NavigationManager

DI container

When a Blazor WebAssembly application starts, it configures a DI container. The DI container is responsible for building the instances of the service and lives until the user closes the tab in their browser that is running the web app. In the following example, the CartService implementation is registered for IcartService:

 builder.Services.AddSingleton<ICartService, CartService...
Previous Section
End of Section 4
Next Section