Updated June 2026

Build .NET 10 Web Apps with Blazor

Class Duration

21 hours of live training delivered over 3 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 sophisticated, interactive web user interfaces with ASP.NET Core Blazor and .NET 10 using Razor Components rather than a JavaScript framework.

Description

This course offers a detailed journey into the ASP.NET Core Blazor framework, emphasizing the latest enhancements introduced in .NET 10. Participants will gain proficiency in building sophisticated, composable user interfaces using Razor Components, leveraging the power of Razor syntax for effective data binding and event handling. The curriculum includes hands-on experience with the new QuickGrid component, enabling efficient data display and manipulation. Additionally, learners will explore the intricacies of configuring page routing in Blazor applications and the seamless integration of client-side JavaScript, enriching the functionality and interactivity of their web applications. The course culminates with practical guidance on deploying Blazor applications to production, ensuring participants are equipped with the skills necessary for real-world application development.

Learning Outcomes

Understand the ASP.NET Core Blazor platform including new .NET 10 features
Build Composable UIs with Razor Components
Utilize Razor Syntax to Perform Data Binding and Event Handling
Employ the QuickGrid Component with new .NET 10 enhancements
Configure Page Routing with Blazor
Integrate Client-Side JavaScript with Blazor
Implement Authentication with WebAuthn/FIDO2 Passkeys
Deploy a Blazor application to production

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.

Training Topics

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)

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