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

Creating the modal dialog project

The ModalDialog project will be created by using the Empty Blazor WebAssembly App project template. We will add a Dialog component that includes multiple sections, and use CSS isolation to apply styles that make it behave like a modal dialog. We will use EventCallback parameters to communicate from the component back to the parent when a button is clicked. We will use RenderFragment parameters to allow Razor markup to be communicated from the parent to the component. Finally, we will create a Razor class library and move our Dialog component to it so that it can be shared with other projects.

Getting started with the project

We need to create a new Blazor WebAssembly app. We do this as follows:

  1. Open Visual Studio 2019.
  2. Click the Create a new project button.
  3. In the Search for templates (Alt + S) textbox, enter Blazor and hit the Enter key.

    The following screenshot shows the Empty Blazor WebAssembly App project template that we created...

Previous Section
End of Section 7
Next Section