Microsoft Blazor: Building Web Applications in .NET 6 and Beyond

Table of Contents
About the Author
About the Technical Reviewer
Acknowledgments
Introduction
Chapter 1: Introduction to WebAssembly and Blazor
	A Tale of Two Wars
		The First Browser War
		The Second Browser War
	Introducing WebAssembly
		Which Browsers Support WebAssembly?
		WebAssembly and Mono
	Interacting with the Browser with Blazor
		How Does It Work?
		Blazor Server
		Pros and Cons of the Blazor Server
	Your First Blazor Project
		Installing Blazor Prerequisites
		Using Visual Studio
		Using Visual Studio Code
		Understanding the Blazor Templates for VS/Code
		Generating the Project with Dotnet CLI
		Generating Your Project with Visual Studio
		Running Blazor with Visual Studio Code
	Running the Generated Project
	Examining the Project’s Parts
		The Server Project
		Using a Shared Project
		Understanding the Client Blazor Project
		Layout Components
	Debugging Client-Side Blazor
		Debugging with Visual Studio
		Debugging with Visual Studio Code
	Developing with Hot Reload
		Hot Reload with .NET CLI
		Hot Reload with Visual Studio
	The Blazor WASM Bootstrap Process
	The Blazor Server Bootstrap Process
	Nullable Reference Types
		An Apology
		Using Null in C#
		Using References
		The Null-Forgiving Operator
		Nullable Reference Types and .NET Libraries
	Summary
Chapter 2: Data Binding
	A Quick Look at Razor
	One-Way Data Binding
		One-Way Data Binding Syntax
		Attribute Binding
		Conditional Attributes
	Event Handling and Data Binding
		Event Binding Syntax
		Event Arguments
		Using C# Lambda Functions
	Two-Way Data Binding
		Two-Way Data Binding Syntax
		Binding to Other Events: @bind:{event}
		Preventing Default Actions
		Stopping Event Propagation
		Formatting Dates
	Change Detection
	The PizzaPlace Single-Page Application
		Creating the PizzaPlace Project
		Adding Shared Classes to Represent the Data
		Building the UI to Show the Menu
		Converting Values
		Adding Pizzas to the Shopping Basket
		Displaying the Shopping Basket
		Entering the Customer Information
		Debugging Tip
	Blazor Validation
		Letting Entities Validate Themselves
		Using FormField and InputText to Enable Validation
		Showing Validation Errors
		Customizing the Validation Feedback
	Summary
Chapter 3: Components and Structure for Blazor Applications
	What Is a Blazor Component?
		Examining the SurveyPrompt Component
		Building a Simple Alert Component with Razor
			Creating a New Component with Visual Studio
			Creating a New Component with Code
			Implementing the Alert Component
	Separating View and View Model
		Creating a DismissibleAlert Component
	Understanding Parent-Child Communication
		Adding a Timer Component
		Using Two-Way Data Binding Between Components
		Using EventCallback
	Referring to a Child Component
	Communicating with Cascading Parameters
		Using the CascadingValue Component
		Resolving Ambiguities
	Component Life Cycle Hooks
		Life Cycle Overview
		SetParametersAsync
		OnInitialized and OnInitializedAsync
		OnParametersSet and OnParametersSetAsync
		ShouldRender
		OnAfterRender and OnAfterRenderAsync
		IDisposable
		A Word on Asynchronous Methods
	Refactoring PizzaPlace into Components
		Creating a Component to Display a List of Pizzas
		Showing the ShoppingBasket Component
		Adding the CustomerEntry Component
		Using Cascading Properties
		Disabling the Submit Button
	Summary
Chapter 4: Advanced Components
	Using Templated Components
		Creating the Grid Templated Component
		Using the Grid Templated Component
		Specifying the Type Parameter’s Type Explicitly
		Using Generic Type Constraints
	Razor Templates
		Wig-Pig Syntax
	Using Blazor Error Boundaries
	Building a Component Library
		Creating the Component Library Project
		Adding Components to the Library
		Referring to the Library from Your Project
		Using the Library Components
	Static Resources in a Component Library
	Virtualization
		Displaying a Large Number of Rows
		Using the Virtualize Component
		Adding Paging
	Dynamic Components
	Component Reuse and PizzaPlace
	Summary
Chapter 5: Services and Dependency Injection
	What Is Dependency Inversion?
		Understanding Dependency Inversion
		Using the Dependency Inversion Principle
		Adding Dependency Injection
	Using an Inversion-of-Control Container
		Constructor Dependency Injection
		Property Dependency Injection
	Configuring Dependency Injection
		Singleton Dependencies
		Transient Dependencies
		Scoped Dependencies
	Understanding Blazor Dependency Lifetime
		Blazor WebAssembly Experiment
		Blazor Server Experiment
		Using OwningComponentBase
		The Result of the Experiment
	Building Pizza Services
		Adding the MenuService and IMenuService Abstraction
		Ordering Pizzas with a Service
	Summary
Chapter 6: Data Storage and Microservices
	What Is REST?
		Understanding HTTP
		Universal Resource Identifiers and Methods
		HTTP Status Codes
	Invoking Server Functionality Using REST
		HTTP Headers
		JavaScript Object Notation
		Some Examples of REST Calls
	Building a Simple Microservice Using ASP.NET Core
		Services and Single Responsibility
		The Pizza Service
	What Is Entity Framework Core?
		Using the Code-First Approach
		Preparing Your Project for Code-First Migrations
		Finding Your Database Server’s Connection String
		Creating Your First Code-First Migration
		Generating the Database
	Enhancing the Pizza Microservice
		Testing Your Microservice Using Postman
	Summary
Chapter 7: Communication with Microservices
	Using the HttpClient Class
		Examining the Server Project
		Using a Shared Project. Why?
		Looking at the Client Project
		Emulating a Slow Network in Chrome
	Understanding the HttpClient Class
		The HttpClientJsonExtensions Methods
		Customizing Serialization with JsonSerializerOptions
	Retrieving Data from the Server
		Implementing the MenuService
		Showing a Loading UI
	Storing Changes
		Updating the Database with Orders
		Building the Order Microservice
		Talking to the Order Microservice
	Summary
Chapter 8: Unit Testing
	Where Can We Find Bugs?
		Requirements
		Coding
		Integration
		Beta Testing
		Post-release
	Why Should We Use Unit Tests?
		What Makes a Good Unit Test?
	Unit Testing Blazor Components
		Adding a Unit Test Project
		Adding bUnit to the Test Project
	Write Your First Unit Test
		Writing Good Unit Test Methods
		Running Your Tests
		Making Your Test Pass
		Using Facts and Theories
		Checking Your Sanity
	Write a bUnit Tests with C#
		Understanding bUnit?
		Testing Component Interaction
		Passing Parameters to Our Component
		Testing Two-Way Data Binding and Events
		Testing Components that Use RenderFragment
		Using Cascading Parameters
	Using MOQ to Create Fake Implementations
		Injecting Dependencies with bUnit
		Replacing Dependencies with Fake Objects
		Using Stubs
		Using Mocks
		Implementing Stubs and Mocks with MOQ
	Writing bUnit Tests in Razor
		The First Razor Test
	Handling Asynchronous Re-renders
	Configuring Semantic Comparison
		Why Do We Need Semantic Comparison?
		Customizing Semantic Comparison
	Summary
Chapter 9: Single-Page Applications and Routing
	What Is a Single-Page Application?
		Single-Page Applications
	Layout Components
		Using Blazor Layout Components
		Configuring the Default Layout Component
		Selecting a Layout Component
		Nesting Layouts
	Blazor Routing
		Installing the Router
		The NavMenu Component
		Setting the Route Template
		Redirecting to Other Pages
		Understanding the Base Tag
	Lazy Loading with Routing
		Lazy Loading Component Libraries
		Marking an Assembly for Lazy Loading
		Dynamically Loading an Assembly
		Lazy Loading and Dependencies
	Adding Another Page to PizzaPlace
	Summary
Chapter 10: JavaScript Interoperability
	Calling JavaScript from C#
		Providing a Glue Function
		Using IJSRuntime to Call the Glue Function
		Storing Data in the Browser with Interop
		Passing a Reference to JavaScript
	Calling .NET Methods from JavaScript
		Adding a Glue Function Taking a .NET Instance
	Using Services for Interop
		Building the LocalStorage Service
	Dynamically Loading JavaScript with Modules
		Using JavaScript Modules
		Loading the Module into a Blazor Service
	Adding a Map to PizzaPlace
		Choosing the Map JavaScript Library
		Adding the Leaflet Library
		Building the Leaflet Map Razor Library
		Registering with the Map Provider
		Creating the Map Component
		Consuming the Map Component
		Adding Markers to the Map
	Summary
Chapter 11: Blazor State Management
	Examining Component State
		What Not to Store
		Local Storage
		The Server
		URL
	Using Protected Browser Storage
	The Redux Pattern
		The Big Picture
		The Application Store
		Actions
		Reducers
		Views
	Using Fluxor
		Creating the Store
		Using the Store in Our Blazor Application
		Adding an Action
		Implementing the Reducer
	Redux Effects
		Adding the First Action
		Adding the Second Action and Effect
	Summary
Chapter 12: Building Real-Time Applications with Blazor and SignalR
	What Is SignalR?
		How Does SignalR Work?
	Building a WhiteBoard Application
		Creating the WhiteBoard Solution
		Implementing the Mouse Handling Logic
		Painting the Segments on the Board
	Adding a SignalR Hub on the Server
		Implementing the BoardHub Class
		Configuring the Server
	Implementing the SignalR Client
		Making the SignalR Hub Connection
		Notifying the Hub from the Client
		Cleaning Up the Hub Connection
	Summary
Chapter 13: Efficient Communication with gRPC
	What Is gRPC?
		Pros and Cons of RPC
		Understanding gRPC
		Protocol Buffers
	Describing Your Network Interchange with Proto Files
		Installing the gRPC Tooling
		Adding the Service Contract
	Implementing gRPC on the Server
		Implementing the Service
		Adding gRPC
	Building a gRPC Client in Blazor
		Creating the ForecastGrpcService
		Enabling gRPC on the Client
		Updating the FetchData Component
	Comparing REST with gRPC
	Summary
Chapter 14: Supporting Multiple Languages in Your Blazor Application
	Understanding Internationalization, Globalization, and Localization
	Representing the User’s Locale
		CurrentCulture vs. CurrentUICulture
	Enabling Multiple Languages
		Using Request Localization
	Internationalizing Your App
	Localizing Your App
		Adding Your First Resource File
		Localizing SurveyPrompt
		Understanding Resource Lookup
	Adding a Language Picker in Blazor Server
	Making PizzaPlace International
		Enabling Globalization Data
		Globalizing Your Components
		Adding a Language Picker in Blazor WebAssembly
	Using Global Resources
	Summary
Chapter 15: Deploying Your Blazor Application
	Deploying Standalone Blazor WebAssembly
		Hosting on GitHub
		Creating a Simple Website
		Deploying a Simple Site in GitHub
		Deploying a Blazor WASM Project
		Fix the Base Tag
		Disabling Jekyll
		Fixing GitHub 404s
		Alternatives for GitHub
	Deploying Your Site As WebAssembly
	Deploying Hosted Applications
		Understanding the Deployment Models
		Deploying to Microsoft Azure
		Creating the Publishing Profile
		Selecting Publishing Options
		Publishing the Application
	Summary
Chapter 16: Security with OpenId Connect
	Representing the User
		Using Claims-Based Security
		Understanding Token Serialization
		Representing Claims in .NET
	OpenId Connect
		Understanding OpenId Connect Hybrid Flow
	Identity Providers
		Implementing the Identity Provider with IdentityServer4
		Adding the Login UI to Our Identity Provider
	Understanding User Consent
	Protecting a Blazor Server Application with Hybrid Flow
		Adding OpenId Connect to Blazor Server
		Implementing Authorization in Blazor Server
		Using AuthorizeView
		Adding and Removing Claims
		Enabling Role-Based Security
	Accessing a Secured API
		Using an Access Token
		Registering the API Project with the Identity Provider
		Adding JWT Bearer Token Middleware
		Enabling the Bearer Token in the Client
		Using Policy-Based Access Control
	Summary
Chapter 17: Securing Blazor WebAssembly
	Authorization Code Flow with PKCE
		Understanding PKCE
	Registering the WASM Client Application
		Creating and Examining the Application
		Registering the Client Application
		Implementing Authentication
		Customizing the Login Experience
	Accessing a Protected API
		Fetching Data from the WeatherService API
		Using the AuthorizationMessageHandler
		Adding Client-Side Authorization
	Using Role-Based Security
		Creating the Claims Component
		Enabling RBAC
		Promoting the Role Claim
	Using Policy-Based Access Control
		Updating Scopes
		Adding Policies
	Summary
Index