Book Image

Blazor WebAssembly by Example, 2e - Second Edition

By : Toi B. Wright

5 (1)

Book Image

Blazor WebAssembly by Example, 2e - Second Edition

5 (1)

By: Toi B. Wright

Overview of this book

Blazor WebAssembly helps developers build web applications without the need for JavaScript, plugins, or add-ons. With its continued growth in popularity, getting started with Blazor now can open doors to new career paths and exciting projects – and Blazor WebAssembly by Example will make your first steps easier. This is a project-based guide that will teach you how to build single-page web applications with Blazor, focusing heavily on the practical over the theoretical by providing detailed step-by-step instructions for each project. The author also includes a video for each project showing her following the step-by-step instructions, so readers can use them if they're unsure about any particular step. In this updated edition, you'll start by building simple standalone web applications and gradually progress to developing more advanced hosted web applications with SQL Server backends. Each project will cover a different aspect of the Blazor WebAssembly ecosystem, such as Razor components, JavaScript interop, security, event handling, debugging on the client, application state, and dependency injection. The book’s projects get more challenging as you progress, but you don’t have to complete them in order, which makes this book a valuable resource for beginners as well as those who just want to dip into specific topics. By the end of this book, you will have experience and lots of know-how on how to build a wide variety of single-page web applications with .NET, Blazor WebAssembly, and C#.

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

Introduction to Blazor WebAssembly

Introduction to Blazor WebAssembly

Benefits of using the Blazor framework

What is WebAssembly?

Setting up your PC

Further reading

Building Your First Blazor WebAssembly Application

Building Your First Blazor WebAssembly Application

Creating the Demo Blazor WebAssembly Project Technical Requirements

Razor components

Creating the Demo Blazor WebAssembly project

Further reading

Debugging and Deploying a Blazor WebAssembly App

Debugging and Deploying a Blazor WebAssembly App

Technical requirements

Debugging a Blazor WebAssembly.app

Debugging in Visual Studio

Understanding logging

Handling exceptions

Using ahead-of-time (AOT) compilation

Deploying a Blazor WebAssembly app to Microsoft Azure

Creating the “guess the number” project

Further reading

Building a Modal Dialog Using Templated Components

Building a Modal Dialog Using Templated Components

Technical requirements

Using RenderFragment parameters

Using EventCallback parameters

Understanding CSS isolation

Creating the modal dialog project

Further reading

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

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

Technical requirements

Why use JavaScript?

Exploring JS interop

Using local storage

Creating the local storage service

Further reading

Building a Weather App as a Progressive Web App (PWA)

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

Further reading

Building a Shopping Cart Using Application State

Building a Shopping Cart Using Application State

Technical requirements

Introducing the application state

Understanding DI

Creating the shopping cart project

Further reading

Building a Kanban Board Using Events

Building a Kanban Board Using Events

Technical requirements

Attribute splatting

Arbitrary parameters

Creating the Kanban board project

Further reading

Uploading and Reading an Excel File

Uploading and Reading an Excel File

Technical requirements

Uploading files

Using virtualization

Reading Excel files

Creating the Excel reader project

Further reading

Using Azure Active Directory to Secure a Blazor WebAssembly Application

Using Azure Active Directory to Secure a Blazor WebAssembly Application

Technical requirements

Understanding the difference between authentication and authorization

Working with authentication

Controlling the user interface using authorization

Creating the claims viewer project

Further reading

Building a Task Manager Using ASP.NET Web API

Building a Task Manager Using ASP.NET Web API

Technical requirements

Understanding hosted applications

Using the HttpClient service

Using JSON helper methods

Creating the TaskManager project

Further reading

Building an Expense Tracker Using the EditForm Component

Building an Expense Tracker Using the EditForm Component

Technical requirements

Creating a data entry form

Using the built-in input components

Using the validation components

Locking navigation

Creating the expense tracker project

Further reading

Other Books You May Enjoy

Other Books You May Enjoy

Index

Customer Reviews

5 (1)

5 star

100%

4 star

0

3 star

0

2 star

0

1 star

0

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.");
};

For the project in this chapter, we will be using the getCurrentPosition...