Build .NET 10 Web Apps with Blazor and Web API

Class Duration

35 hours of live training delivered over 5 days.

Student Prerequisites

• HTML, CSS, and JavaScript programming experience
• C# programming experience

Target Audience

Web developers and teams with C# experience who want to build full-stack web applications that pair Blazor user interfaces with ASP.NET Core Web APIs and SignalR for real-time communication. The course can be taught with EF Core or Dapper for database access. Teams ready to drive that same stack test-first can continue with Test-Driven Development with .NET 10 Blazor and Web API.

Training Materials

Comprehensive courseware is distributed online at the start of class. All students receive a downloadable MP4 recording of the training.

Software Requirements

Students will need a free, personal GitHub account to access the courseware. Students will need permission to install Visual Studio (current release) or Visual Studio Code with the C# Dev Kit on their computers. Also, students will need permission to install NuGet Packages. If students are unable to configure a local environment, a cloud-based environment can be provided.

Getting Started with Blazor

• What is Blazor?
• Comparison to Other Web Frameworks
• Render Modes
• Server-Side & WebAssembly
• What's new for Blazor in .NET 10
  • Persistent State Attribute for Simplified State Management
  • WebAuthn/FIDO2 Passkey Authentication
  • NavigationManager.NotFound() for 404 Handling
  • ReconnectModal Component
  • Blazor.pause()/Blazor.resume() for State Persistence
  • blazor.web.js Size Reduction (significantly smaller - see .NET 10 release notes for current figure)

C# 14 Features

• Extension Members (Properties, Operators, Static Members)
• The field Keyword for Auto-Properties
• Null-Conditional Assignment (e.g., obj?.Prop = x)
• nameof with Unbound Generic Types
• Lambda Parameter Modifiers without Types
• Partial Constructors and Events

Running Blazor Code

• Single Page Applications
• What is WebAssembly?
• Browser Compatibility
• WebAssembly vs. JavaScript
• How does .NET Core / C# run in a web browser?

Blazor Application

• Project Template
• Create a New Application
• Hosting Blazor with a ASP.NET Core MVC Server
• Configuration
• Dependency Injection
• Environments
• Logging
• Handling Errors
• Debugging WebAssembly in the Browser

Razor Components and Data Binding

• What is a Component?
• Creating a Data Model
• Binding the Data Model to the HTML
• Passing Arbitrary Attributes
• Handling Events
• Manually Trigger State Updates and Re-rendering

Rendering

• Render Modes
• Static Server Rendering
• Interactive Server Rendering
• Interactive WebAssembly Rendering
• Interactive Auto Rendering
• AOT vs. JIT Compilation
• Output Caching
• Streaming Rendering
• Render Modes and Consuming Data
• Render Modes and JavaScript

Composing Razor Components

• Decompose a Component into Smaller Components
• One-Way Data Binding
• Two-Way Data Binding
• Pass Data from a Parent Component to a Child Component using Parameters
• Pass Data from a Child Component to a Parent Component using Event Callbacks
• Use Refs to Access DOM Elements
• Razor Component Libraries
• Razor Component Design Patterns
• Parameters are Immutable
• Required Component Parameters
• Lift State Up
• Managing State in General
• Persistent Component State
• Persistent State Attribute
• Section Components
• QuickGrid Component
  • RowClass Parameter for Conditional Row Styling
  • HideColumnOptionsAsync() Method

Razor Component Forms

• What is the purpose of Form?
• Collecting Data using a Form, Input, Select, and TextArea Elements
• Explore Form Element Two-Data Binding
• Build Forms with the Blazor Edit Form Razor Component
• Explore the Concept of the Edit Context
• Specialized Edit Form Controls
• Applying Validation to the Form
• Decorating the View Model with Validation Attributes
• Code Custom Validation Attributes
• Nested Form Validation with AddValidation()
• Validatable Type Attribute
• Antiforgery Tokens

Razor Component Pages

• What is the Page model?
• Differences between Razor Pages and Razor Components
• Using a Razor Component as a Page
• Explore the Router Component
• Configuring Page Routing
• Route to Components from Multiple Assemblies
• Using Route Parameters
• Using the Query String
• Enhanced Navigation for Static Rendered Pages
• NavigationManager.NotFound() Method
• NavLink Query String and Fragment Handling

Authentication, Authorization, and Auditing

• What is Authentication?
• What is Authorization?
• What is Auditing?
• Authentication Models for Blazor
• WebAuthn/FIDO2 Passkey Authentication
• ASP.NET Core Identity Passkey Support
• Component Attribute-based Authorization
• Authorization Components
• Authorization with C# Code
• Roles and Claims
• Blazor Identity UI

Interacting with JavaScript

• What is the JavaScript Interop?
• When is JavaScript needed?
• Synchronous vs. Asynchronous Calls
• JavaScript Initializers
• How to call a JavaScript function from a Component
• How to call C# code from JavaScript
• Calling Static Methods
• Calling Instance Methods
• Organizing JavaScript Code within a Blazor App

Using Server Data

• REST APIs with ASP.NET Core Web API
• Web Sockets with SignalR

ASP.NET Core Web API

• What is a Controller API?
• Differences from Minimal API
• REST Conventions
• OpenAPI 3.1 Support
• Injecting the Http Client
• Exploring the Http Client
• Calling a REST API from a Blazor Component using the HttpClient
• Build a REST API with ASP.NET Core MVC
• Using Dapper/EF Core to access SQL Server Data

SignalR

• Connect a Blazor App to SignalR
• Hubs
• Two-Way Data Transfer
• Connect to SignalR with C#
• Connect to SignalR with JavaScript

Unit Testing Blazor Apps

• What is Unit Testing?
• Testing Frameworks
• Integration with IDE

Principles of Unit Testing

• Defining a Unit
• Setup/Teardown
• Testing in Isolation
• Determining What to Test
• Code Coverage
• Test Frameworks
• Stubs, Mocks and Spies

xUnit Framework

• What is xUnit?
• Testing Framework
• Facts vs. Theory
• Assertions
• Integration with Visual Studio

Testing Razor Components

• What Should be Tested on a Razor Component?
• What is bUnit?
• Using bUnit with xUnit
• Setup and define components under tests in C# or Razor syntax
• Verify outcome using semantic HTML comparer
• Interact with and inspect components
• Trigger event handlers
• Provide cascading values
• Inject services
• Mock IJsRuntime
• Perform snapshot testing

ASP.NET Core Web API

• What Should be Tested on a Web API?
• Testing Controllers
• Testing APIs
• Integration Testing of APIs