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 3: Building a Modal Dialog Using Templated Components

A modal dialog is a dialog that appears on top of all other content in a window and requires user interaction to close it. Templated components are components that accept one or more UI templates as parameters. The UI templates can contain any Razor markup.

In this chapter, we will learn about RenderFragment parameters, EventCallback parameters, and CSS isolation. RenderFragment parameters are used when a parent component needs to share information with a child component, and conversely, EventCallback parameters are used when a child component needs to share information with its parent component. We will also learn how to apply styles to only a single component by using CSS isolation.

In this chapter, we will create a modal dialog component. The component will be a templated component that can render different HTML based on the contents of its parameters. It will use event callbacks to return events back to the calling...

Previous Section
End of Section 1
Next Section