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

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

The Blazor WebAssembly framework makes it possible for us to run C# code on the browser. However, there are some scenarios that it cannot handle, and in those cases, we need to use JavaScript functions to fill in the gaps.

In this chapter, we will learn how to use JavaScript with Blazor WebAssembly. We will learn how to invoke a JavaScript function from Blazor with and without a return value. Conversely, we will learn how to invoke .NET methods from JavaScript. We will accomplish both of these scenarios by using JavaScript interop (JS interop). Finally, we will learn how to store data on the browser by using localStorage.

The project that we will create in this chapter will be a local storage service that will read and write to the browser's localStorage. In order to access the browser's localStorage, we will need to use JavaScript. JS interop is used to invoke JavaScript from...

Previous Section
End of Section 1
Next Section