book

Blazor in Action

Name: Blazor in Action
Author: Chris Sainty
ISBN: 9781617298646

by Chris Sainty

June 2022

Intermediate to advanced

344 pages

10h 10m

English

Manning Publications

Audiobook available

Read now

Unlock full access

inside front cover
Blazor in Action
Copyright
dedication
contents
front matter
prefaceacknowledgmentsabout this bookWho should read this bookHow this book is organized: A road mapAbout the codeliveBook discussion forumabout the authorabout the cover illustration
1 Starting your Blazor journey
1.1 Why choose Blazor for new applications?1.2 Components, a better way to build UI1.2.1 What is a component?1.2.2 The benefits of a component-based UI1.2.3 Anatomy of a Blazor component1.3 Blazor, a platform for building modern UIs with C#1.3.1 Understanding hosting models1.3.2 Blazor WebAssembly1.3.3 Blazor Server1.3.4 Other hosting modelsSummary
2 Your first Blazor app
2.1 Setting up the application2.1.1 Blazor WebAssembly template configurations2.1.2 Creating the application2.2 Building and running the application2.3 Key components of a Blazor application2.3.1 Index.html2.3.2 Program.cs2.3.3 App.razor2.3.4 wwwroot folder and _Imports.razor2.4 Writing your first components2.4.1 Organizing files using feature folders2.4.2 Setting up styling2.4.3 Defining the layout2.4.4 The Blazing Trails home pageSummary
3 Working with Blazor’s component model
3.1 Structuring components3.1.1 Single file3.1.2 Partial class3.2 Component life cycle methods3.2.1 The first render3.2.2 The life cycle with async3.2.3 Dispose: The extra life cycle method3.3 Working with parent and child components3.3.1 Passing values from a parent to a child3.3.2 Passing data from a child to a parent3.4 Styling components3.4.1 Global styling3.4.2 Scoped styling3.4.3 Using CSS preprocessorsSummary
4 Routing
4.1 Introducing client-side routing4.1.1 Blazor’s router4.1.2 Defining page components4.2 Navigating between pages programmatically4.3 Passing data between pages using route parameters4.4 Handling multiple routes with a single component4.5 Working with query strings4.5.1 Setting query-string values4.5.2 Retrieving query-string values using SupplyParameterFromQuerySummary

5 Forms and validation—Part 1: Fundamentals
5.1 Super-charging forms with components5.1.1 Creating the model5.1.2 Basic EditForm configuration5.1.3 Collecting data with input components5.1.4 Creating inputs on demand5.2 Validating the model5.2.1 Configuring validation rules with Fluent Validation5.2.2 Configuring Blazor to use Fluent Validation5.3 Submitting data to the server5.3.1 Adding MediatR to the Blazor project5.3.2 Creating a request and handler to post the form data to the API5.3.3 Setting up the endpointSummary
6 Forms and validation—Part 2: Beyond the basics
6.1 Customizing validation CSS classes6.1.1 Creating a FieldCssClassProvider6.1.2 Using custom FieldCssClassProviders with EditForm6.2 Building custom input components with InputBase6.2.1 Inheriting from InputBase<T>6.2.2 Styling the custom component6.2.3 Using the custom input component6.3 Working with files6.3.1 Configuring the InputFile component6.3.2 Uploading files when the form is submitted6.4 Updating the form to allow editing6.4.1 Separating the trail form into a standalone component6.4.2 Refactoring AddTrailPage.razor6.4.3 Adding the edit trail feature6.4.4 Testing the edit functionalitySummary
7 Creating more reusable components
7.1 Defining templates7.2 Enhancing templates with generics7.3 Sharing components with Razor class librariesSummary
8 Integrating with JavaScript libraries
8.1 Creating a JavaScript module and accessing it via a component8.1.1 Testing out the RouteMap component8.1.2 Calling JavaScript functions from C# and returning a response8.2 Calling C# methods from JavaScript8.3 Integrating the RouteMap component with the TrailForm8.4 Displaying the RouteMap on the TrailDetails drawerSummary
9 Securing Blazor applications
9.1 Integrating with an identity provider: Auth09.1.1 Registering applications with Auth09.1.2 Customizing tokens from Auth09.1.3 Configuring Blazor WebAssembly to use Auth09.1.4 Configuring ASP.NET Core WebAPI to use Auth09.2 Displaying different UI fragments based on authentication status9.2.1 Updating the Home feature9.3 Prevent unauthorized users accessing a page9.3.1 Securing API endpoints9.3.2 Calling secure API endpoints from Blazor9.4 Authorizing users by role9.4.1 Adding roles in Auth09.4.2 Consuming Auth0 roles in Blazor WebAssembly9.4.3 Implementing role-based logicSummary
10 Managing state
10.1 Simple state management using an in-memory store10.1.1 Creating and registering a state store10.1.2 Saving data entered on the form to AppState10.2 Improving the AppState design to handle more state10.3 Creating persistent state with browser local storage10.3.1 Defining an additional state store10.3.2 Adding and removing trails from thefavorites list10.3.3 Displaying the current number of favorite trails10.3.4 Reorganizing and refactoring10.3.5 Showing favorited trails on the favorite trails page10.3.6 Initializing AppStateSummary
11 Testing your Blazor application
11.1 Introducing bUnit11.2 Adding a bUnit test project11.3 Testing components with bUnit11.3.1 Testing rendered markup11.3.2 Triggering event handlers11.3.3 Faking authentication and authorization11.3.4 Emulating JavaScript interactions11.3.5 Testing multiple componentsSummary
Appendix A. Adding an ASP.NET Core backend to a Blazor WebAssembly app
A.1 Adding an ASP.NET Core Web APIA.1.1 Removing boilerplate from the new API projectA.1.2 Configuring the APIA.2 Adding a .NET class library to share code between client and APIA.3 Setting up an SQLite database in the APIA.3.1 Configuring the initial entities for the systemA.3.2 Setting up the database contextA.3.3 Connection strings and service configurationA.3.4 Creating the first migration and creating the database
Appendix B. Updating existing areas to use the API
B.1 Creating a new API endpoint that returns all trailsB.2 Updating the Home feature to load trail data from the APIB.2.1 Adding the GetTrailsHandler classB.2.2 Updating HomePage.razor and SearchPage.razor to use GetTrailRequest via MediatRB.2.3 Updating TrailCard.razor and TrailDetails.razor
index

Content preview from Blazor in Action

10 Managing state

This chapter covers

Persisting application state in memory
Coordinating state across multiple components
Organizing application state
Persisting application state using browser local storage

State management is always a hot topic in SPA applications. But what is state? Well, state can be thought of as the sum of all data held by a system at any given point in time. We’ve already seen lots of examples of state in previous chapters. Anywhere we’ve created a field or property on a component to store a value is state. Users of an application alter state all the time by performing actions within the system. They might click a button that increments a counter or enter values in a form that trigger validation.

Sometimes user actions ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781617298646Publisher Support Publisher Website

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Blazor in Action

by Chris Sainty

10 Managing state

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.