Blazor in Action

by Chris Sainty

Overview

An example-driven guide to building reusable UI components and web frontends—all with Blazor, C#, and .NET.

In Blazor in Action, you will learn about:

    Blazor + WebAssembly
    Picking the right hosting model
    Building reusable UI components
    Building forms with validation
    Integrating with JavaScript libraries
    Securing your application
    Testing your applications

Blazor in Action is a practical guide to building stunning UIs and client-side applications using C# and .NET. You’ll use the Blazor frontend framework to create a fun and exciting web application for plotting hiking routes. As you build up your new application, you’ll master the key features of Blazor, such as routing, forms and validation, and dynamic and reusable components. By the time you're done, you'll be ready to develop beautiful sites and apps that seamlessly execute your C# code natively in the browser.

The book is written to the most recent stable build of Blazor and seamlessly integrates fresh features from .NET 6.

About the technology
Create rich web frontends without relying on JavaScript. Microsoft’s Blazor framework uses WebAssembly to extend the ultra-popular ASP.NET platform. In Blazor, you can build interactive web components that run natively in the browser without plug-ins or transpilers. And because it’s C# end-to-end, it’s easy to share code between the server and your web UI.

About the book
Blazor in Action teaches you to create full-stack ASP.NET applications end-to-end in C#. You’ll start by learning to build Blazor web components, working through core topics like routing and forms. As you go, you’ll implement a hiking route web application that includes reusable code, integration with JavaScript libraries, and role-based security. To make sure your app is production ready, this practical book also covers state management, data persistence, and testing.

What's inside

    Dynamic and reusable UI components
    Sharing client and server code
    Role-based security using Auth0
    Persisting state using local browser storage

About the reader
For web developers with C# and .NET experience.

About the author
Chris Sainty has been a part of the Blazor community from the beginning. He’s an active blogger, open source developer, international speaker, and a Microsoft MVP.

Table of Contents

1 Starting your Blazor journey
2 Your first Blazor app
3 Working with Blazor’s component model
4 Routing
5 Forms and validation—Part 1: Fundamentals
6 Forms and validation—Part 2: Beyond the basics
7 Creating more reusable components
8 Integrating with JavaScript libraries
9 Securing Blazor applications
10 Managing state
11 Testing your Blazor application

Product Details

ISBN-13:	9781638356790
Publisher:	Manning
Publication date:	07/12/2022
Sold by:	SIMON & SCHUSTER
Format:	eBook
Pages:	344
File size:	16 MB
Note:	This product may take a few minutes to download.

About the Author

Chris Sainty has been a part of the Blazor community since before its first experimental preview. He was one of the first Blazor bloggers, an active open source developer, and a Microsoft MVP.

Table of Contents

Preface x

Acknowledgments xii

About this book xiv

About the author xvii

About the cover illustration xviii

1 Starting your Blazor journey 1

1.1 Why choose Blazor for new applications? 2

1.2 Components, a better way to build UI 3

What is a component? 3

The benefits of a component-based UI 4

Anatomy of a Blazor component 4

1.3 Blazor, a platform for building modern UIs with C# 5

Understanding hosting models 6

Blazor WebAssembly 7

Blazor Server 11

Other hosting models 16

2 Your first Blazor app 18

2.1 Setting up the application 19

Blazor WebAssembly template configurations 20

Creating the application 21

2.2 Building and running the application 24

2.3 Key components of a Blazor application 25

Index.html 25

Program.cs 27

App.razor 29 wwwroot folder and _Imports.razor 30

2.4 Writing your first components 30

Organizing files using feature folders 31

Setting up styling 34

Defining the layout 36

The Blazing Trails home page 38

3 Working with Blazor's component model 49

3.1 Structuring components 51

Single file 51

Partial class 52

3.2 Component life cycle methods 54

The first render 57

The life cycle with async 58

Dispose: The extra life cycle, method 60

3.3 Working with parent and child components 62

Passing values from a parent to a child 64

Passing data from a child to a parent 68

3.4 Styling components 71

Global styling 72

Scoped styling 73

Using CSS preprocessors 76

4 Routing 84

4.1 Introducing client-side routing 85

Blazor's router 85

Defining page components 88

4.2 Navigating between pages programmatically 89

4.3 Passing data between pages using route parameters 92

4.4 Handling multiple routes with a single component 96

4.5 Working with query strings 101

Setting query-string values 101

Retrieving query-string values using SupplyParameterFromQuery 103

5 Forms and validation-Part 1: Fundamentals 108

5.1 Super-charging forms with components 110

Creating the model 111

Basic EditForm configuration 112

Collecting data with input components 115

Creating inputs on demand 120

5.2 Validating the model 123

Configuring validation rules with Fluent Validation 123

Configuring Blazor to use Fluent Validation 125

5.3 Submitting data to the server 130

Adding MediatR to the Blazor project 132

Creating a request and handler to post the form data to the API 132

Setting up the endpoint 136

6 Forms and validation-Part 2: Beyond the basics 140

6.1 Customizing validation CSS classes 141

Creating a FieldCssClassProvider 141

Using custom FieldCssClassProviders with EditForm 143

6.2 Building custom input components with InputBase 145

Inheriting from InputBase<T> 145

Styling the custom component 148

Using the custom input component 149

6.3 Working with files 151

Configuring the InputFile component 151

Uploading files when the form is submitted 153

6.4 Updating the form to allow editing 159

Separating the trail form into a standalone component 159

Refactoring AddTrailPage.razor 161

Adding the edit trail feature 165

Testing the edit functionality 177

7 Creating more reusable components 180

7.1 Defining templates 181

7.2 Enhancing templates with generics 185

7.3 Sharing components with Razor class libraries 189

8 Integrating with JavaScript libraries 194

8.1 Creating a JavaScript module and accessing it via a component 195

Testing out the RouteMap component 199

Calling JavaScript functions from C# and returning a response 200

8.2 Calling C# methods from JavaScript 203

8.3 Integrating the RouteMap component with the TrailForm 206

8.4 Displaying the RouteMap on the TrailDetails drawer 214

9 Securing Blazor applications 221

9.1 Integrating with an identity provider: AuthO 223

Registering applications with AuthO 224

Customizing tokens from AuthO 224

Configuring Blazor WebAssembly to use AuthO 225

Configuring ASP.NET Core WebAPI to use AuthO 229

9.2 Displaying different UI fragments based on authentication status 230

Updating the Home feature 233

9.3 Prevent unauthorized users accessing a page 238

Securing API endpoints 239

Calling secure API endpoints from Blazor 241

9.4 Authorizing users by role 245

Adding roles in AuthO 245

Consuming AuthO roles in Blazor WebAssembly 247

Implementing role-based logic 249

10 Managing state 253

10.1 Simple state management using an in-memory store 254

Creating and registering a state store 254

Saving data entered on the form to AppState 255

10.2 Improving the AppState design to handle more state 258

10.3 Creating persistent state with browser local storage 260

Defining an additional state store 261

Adding and removing trails from the favorites list 264

Displaying the current number of favorite trails 265

Reorganizing and refactoring 266

Showing favorited trails on the favorite trails page 268

Initializing AppState 270

11 Testing your Blazor application 272

11.1 Introducing bUnit 273

11.2 Adding a bUnit test project 274

11.3 Testing components with bUnit 277

Testing rendered markup 278

Triggering event handlers 281

Faking authentication and authorization 283

Emulating JavaScript interactions 285

Testing multiple components 287

Appendix A Adding an ASP.NET Core backend to a Blazor WebAssembly app 291

Appendix B Updating existing areas to use the API 305

Index 315