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

Using the Geolocation API

The Geolocation API for JavaScript provides a mechanism for us to obtain the location of a user. Using the Geolocation API, we can obtain the coordinates of a device that the browser is running on.

The Geolocation API is accessed through a navigator.geolocation object. When we make a call to the navigator.geolocation object, the user's browser asks the user for permission to access their location. If they accept, the browser uses the device's positioning hardware, such as the Global Positioning System (GPS) on a smart phone, to determine its location.

Before we attempt to use the navigator.geolocation object, we should verify that it is supported by the browser. The following code tests for the presence of geolocation support on the browser:

if (navigator.geolocation) {
    var position = await getPositionAsync();  
} else {
    throw Error("Geolocation is not supported.");
}...
Previous Section
End of Section 7
Next Section