Full Stack Development with Microsoft Blazor: Building Web, Mobile, and Desktop Applications in . NET 8 and Beyond

About the Author Introduction Full Stack Web Development with C# Is This Book for You? Practical Development Chapter 1: Introduction to 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 Blazor Static Website Blazor WebAssembly Blazor Server Blazor Server vs. Blazor WebAssembly Blazor Auto Rendering Your First Blazor Project Installing Blazor Prerequisites Using the .NET CLR Using Visual Studio Using Visual Studio Code PowerShell Understanding the Blazor Templates for VS/Code Generating Your Project with Visual Studio Generating the Project with dotnet cli Running Blazor with Visual Studio Code Running the Generated Project Examining the Project’s Parts Dependency Injection and Middleware Required JavaScript Project Structure Layout Components Debugging 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 Bootstrap Process Blazor WASM The Blazor Server Bootstrap Process Nullable Reference Types An Apology Using Null in C# Using References The Null Forgiving Operator Required Properties Nullable Reference Types and .NET Libraries Summary Chapter 2: Components and Structure for Blazor Applications A Quick Look at Razor Using @ Control Structures Razor Comments Razor Directives Directive Attributes What Is a Blazor Component? Examining the Generated Code Building a Simple Alert Component with Razor Create a New Component with Visual Studio Create a New Component with Code Implement the Alert Component EditorRequired Components and Namespaces Separating View and View Model Create a DismissibleAlert Component Styling Components CSS Isolation Child Components and CSS Isolation Logging for Components Logging with Blazor Server Logging with Blazor WebAssembly Logging in Program.cs Summary Chapter 3: Data Binding 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 Two-Way Explicit Binding Binding to Other Events: @bind-value:{event} Preventing Default Actions Stopping Event Propagation Formatting Dates Change Detection Updating the UI Using StateHasChanged Understanding Parent–Child Communication One-Way Data Binding Between Components Add a Delay Component Use Two-Way Component to Component Data Binding Add Support for Two-Way Data Binding Fixing the Delay Component Data Binding Side Effects Referring to a Child Component The PizzaPlace Single-Page Application Creating the PizzaPlace Project Adding Shared Classes to Represent the Data Building the UI to Show the Menu The Menu Component Debugging Tip The Shopping Basket Component Summary Chapter 4: Forms and Validation HTML Forms Blazor Forms Blazor Validation Using DataAnnotations Showing Validation Feedback Customizing the Validation Feedback Custom Validation Using Fluent Validation DataAnnotations, Fluent or Custom Validation? Disabling the Submit Button Entering the PizzaPlace Customer Add the Customer Class Implement the CustomerEntry Component Add Fluent Validation Adding Two-Way Data Binding Notifying the Parent Component Summary Chapter 5: Services and Dependency Injection What Is Dependency Inversion? Understanding Dependency Inversion Using the Dependency Inversion Principle Adding Dependency Injection Use 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 Dependency Injection with .NET 8 and 9 .NET 8 Keyed Services .NET 9 Constructor Injection Building Pizza Services Adding the MenuService and IMenuService Abstraction Ordering Pizzas with a Service Summary Chapter 6: Component Life Cycle Hooks Life Cycle Overview Constructor IDisposable SetParametersAsync OnParametersSet and OnParametersSetAsync Example Scenario Explanation Debugging Multiple Calls OnInitialized and OnInitializedAsync ShouldRender OnAfterRender and OnAfterRenderAsync IDisposable A Word on Asynchronous Methods Summary Chapter 7: Advanced Components Communicating with Cascading Parameters Use the CascadingValue Component Resolving Ambiguities with Multiple Values Fixed Cascading Values Root-Level Cascading Values Using Templated Components Create the Grid Templated Component Use the Grid Templated Component Specify the Type Parameter’s Type Explicitly Using Generic Type Constraints Razor Templates Wig-Pig Syntax Using Blazor Error Boundaries Virtualization Display a Large Number of Rows Use the Virtualize Component Add Paging Attribute Splatting Referring to a Component Component Reuse and PizzaPlace Add the PizzaItem Component Create the ItemList Templated Component Summary Chapter 8: Component Libraries Building a Component Library Create the Component Library Project Add Components to the Library Refer to the Library from Your Project Using the Library Components Static Resources in a Component Library Summary Chapter 9: Built-In Components Public Component Libraries Microsoft FluentUI MudBlazor Blazor Bootstrap Blazorise Telerik UI for Blazor Others PageTitle, HeadContent, and HeadOutlet PageTitle HeadContent and HeadOutlet Dynamic Components Uploading Files with InputFile Add the InputFile Component Implement the Server UploadService Implement the WASM UploadService QuickGrid The Starter Project Add a Simple QuickGrid Sort Columns Use Template Columns Add Filtered Columns Fix Layout Add Pagination Use Virtualization Summary Chapter 10: Routing What Is a Single-Page Application? Single-Page Applications Layout Components Using Blazor Layout Components Configure the Default Layout Component Selecting a Layout Component Nesting Layouts The NavMenu Component Blazor Routing Installing the Router FocusOnNavigate Setting the Route Template Route Constraints Catch-All Route Parameters Routing and Component Libraries Redirecting to Other Pages Navigation Interception Understanding the Base Tag Constant-Based Routing Lazy Loading with Routing Lazy Loading Component Libraries Marking an Assembly for Lazy Loading Dynamically Loading an Assembly Lazy Loading and Dependency Injection Adding Another Page to PizzaPlace Summary Chapter 11: Blazor Render Modes Server-Side Rendering Examine a SSR Project Enhanced Navigation Keeping an Element’s Value Disabling Enhanced Navigation for Links Streaming Rendering SSR and Forms Interactive Server Examine a Blazor Server Web App Render Modes Setting the Render Mode Interactive WebAssembly Examine a Blazor WASM Web App Interactive Auto Examine a Blazor Server Auto Web App Using a Component with Difference Render Modes Detecting the Current Render Mode Using RenderModeProvider Detecting RenderMode in .NET 9 Prerendering Disabling Prerendering Supporting Prerendering State Persistence Using PersistentComponentState Summary Chapter 12: JavaScript Interoperability Calling JavaScript from C# Providing a Glue Function Using IJSRuntime to Call the Glue Function Storing Data in the Browser with Interop Use OnAfterRenderAsync 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 Setting Focus to an Input Element 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 13: Testing Components with BUnit 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 Facts and Theories Checking Your Sanity Write 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 NSubstitute to Create Fake Implementations Injecting Dependencies with bUnit Replacing Dependencies with Fake Objects Using Stubs Using Mocks Building Stubs and Mocks with NSubstitute Writing bUnit Tests in Razor The First Razor Test Handling Asynchronous Re-renders Configuring Semantic Compare Why Do We Need Semantic Compare? Customizing Semantic Compare Summary Chapter 14: Communication Examining the Server Project The Server Project Adding a WebAPI Endpoint The Client Project The WeatherForecast Class The Weather Component Retrieving Data from the Server Understanding the HttpClient Class Emulating a Slow Network in Chrome or Edge The HttpClientJsonExtensions Methods GetFromJsonAsync PostAsJsonAsync and PutAsJsonAsync Customizing Serialization with JsonSerializerOptions Using IHttpClientFactory Why Use IHttpClientFactory? Enhancing PizzaPlace Enabling Blazor WebAssembly Update Server Project Update the Shared Project Talking to the Server Retrieving the Menu Placing the Order Disable Prerendering Showing a Loading Screen Summary Chapter 15: 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 16: 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 Comparing REST with gRPC Summary Chapter 17: Deploying Your Blazor Application Deploy 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 Publish the Project Using Visual Studio Using the Command Line Copying to the GitHub Branch Disabling Jekyll Fixing GitHub 404s Production Download Size Alternatives for GitHub Ahead-of-Time Compilation Deploying Hosted Applications Understanding the Deployment Models Deploying to Microsoft Azure Creating the Publishing Profile Selecting Publishing Options Publishing the Application Summary Chapter 18: 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 IdentityServer Understanding User Consent Protecting a Blazor Server Application with Hybrid Flow Adding OpenId Connect to Blazor Server Implementing Authorization in Blazor Server AuthenticationState Explicit Login and Logout Walkthrough Using AuthorizeView Adding and Removing Claims Enabling Role-Based Security Accessing a Secured API Using an Access Token Register 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 19: 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 Understanding the Login Process Accessing a Protected API Fetching Forecasts from WeatherAPI 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 Chapter 20: Securing Blazor Auto The Challenge The Blazor Server Project PersistingAuthenticationStateProvider The Blazor WASM Project Invoking Services with Auto Using an Internal Service Using an External Service Backend for Frontend BFF on the Server BFF on the WASM Side Summary Chapter 21: Blazor State Management Examining Component State What Not to Store Local Storage 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 Implementing the Reducer Redux Effects Adding the First Action Implement the WeatherService Add the Second Action and Effect Summary Index df-Capture.PNG