book

Blazor in Action

by Chris Sainty

June 2022

Intermediate to advanced

344 pages

10h 10m

English

Manning Publications

Read now

Unlock full access

prefaceacknowledgmentsabout this bookWho should read this bookHow this book is organized: A road mapAbout the codeliveBook discussion forumabout the authorabout the cover illustration
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.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.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.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.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.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.1 Defining templates7.2 Enhancing templates with generics7.3 Sharing components with Razor class librariesSummary
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.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.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.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
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
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

Content preview from Blazor in Action

Appendix B. Updating existing areas to use the API

In this appendix, I’ll take you through the steps needed to update the Home and Search features of Blazing Trails to load trail data from the new API created in chapter 5.

NOTE We’ll be working on the Blazing Trails application from its state at the end of chapter 6. If you’re building along with the chapters in this book, you’ll need to complete this appendix before moving on to chapter 7.

As part of this, we’ll also add in a link to the home page to allow users to add new trails to the application. Then we’ll update the TrailCard and TrailDetails components to load images from the API. Plus, we’ll add a link on the TrailCard to allow users to update an existing trail.