.NET track

Blazor Tutorial

Interactive web UI with C#. Blazor Web App render modes, components, forms and EF Core.

IntermediateExamples target .NET 9 Blazor Web App.
0/31 complete
Topics
31
Full lessons
31
Est. hours
~5
Interview Qs
25

Overview

Blazor lets you build interactive web UI with C# and Razor components. Since .NET 8, the Blazor Web App template supports static server-side rendering (SSR) and per-component interactive render modes.

Render modes: Static SSR (HTML only, no interactivity), Interactive Server (UI events handled on the server over a SignalR connection), Interactive WebAssembly (runs in the browser on WebAssembly), and Interactive Auto (Server first, then WebAssembly once downloaded).

What you will learn

  • Choose the right render mode for each component
  • Build Razor components with parameters and events
  • Create validated forms with EditForm
  • Load and save data with EF Core and HttpClient

Prerequisites

You will get the most from this track if you already know:

Learning path

The recommended sequence, from beginner to advanced. Each stage builds on the one before.

  1. 1Foundations · 6 topics · Beginner
    Introduction to Blazor · Blazor Architecture · Blazor Web App · Blazor Server-Side Rendering · Interactive Server Rendering · WebAssembly Fundamentals
  2. 2Components · 6 topics · Beginner → Intermediate
    Razor Components · Component Parameters · Event Handling · Data Binding · Forms · Validation
  3. 3App Structure · 5 topics · Intermediate
    Dependency Injection · Routing · Layouts · Component Communication · Services
  4. 4Data · 8 topics · Intermediate → Advanced
    HttpClient · REST API Integration · Authentication · Authorization · Entity Framework Core · SQL Server · CRUD Operations · State Management
  5. 5Production · 6 topics · Advanced
    Error Handling · Logging · Performance · Security · Deployment · Complete Blazor CRUD Project

Complete topic list

31 topics
1

Foundations

6 topics
  1. Introduction to BlazorBeginner5m
  2. Blazor ArchitectureBeginner5m
  3. Blazor Web AppBeginner5m
  4. Blazor Server-Side RenderingBeginner5m
  5. Interactive Server RenderingBeginner5m
  6. WebAssembly FundamentalsBeginner5m
2

Components

6 topics
  1. Razor ComponentsBeginner5m
  2. Component ParametersBeginner5m
  3. Event HandlingIntermediate5m
  4. Data BindingIntermediate5m
  5. FormsIntermediate5m
  6. ValidationIntermediate5m
3

App Structure

5 topics
  1. Dependency InjectionIntermediate5m
  2. RoutingIntermediate5m
  3. LayoutsIntermediate5m
  4. Component CommunicationIntermediate5m
  5. ServicesIntermediate5m
4

Data

8 topics
  1. HttpClientIntermediate5m
  2. REST API IntegrationIntermediate5m
  3. AuthenticationIntermediate5m
  4. AuthorizationIntermediate5m
  5. Entity Framework CoreAdvanced5m
  6. SQL ServerAdvanced5m
  7. CRUD OperationsAdvanced5m
  8. State ManagementAdvanced5m
5

Production

6 topics
  1. Error HandlingAdvanced5m
  2. LoggingAdvanced5m
  3. PerformanceAdvanced5m
  4. SecurityAdvanced5m
  5. DeploymentAdvanced5m
  6. Complete Blazor CRUD ProjectAdvanced5m

Visual guides

1 diagram

Code example

A taste of the track, from Introduction to Blazor.

Razor / MarkupComponents/Pages/Hello.razor Illustrative
@* dotnet new blazor -o ShopUi --interactivity Server && cd ShopUi && dotnet watch *@
@page "/hello"
@rendermode InteractiveServer


<h1>Namaste, @name!</h1>
<input @bind="name" @bind:event="oninput" placeholder="Your name" />
<p>You typed @name.Length characters.</p>


@code {
    private string name = "Techie Babaji";
}
Expected output
At /hello the heading updates on every keystroke: typing “Asha” shows “Namaste, Asha!” and “You typed 4 characters.”

Practice exercises

Show all 31 exercises
Razor Components

Create a Greeting component that shows “Hello, {Name}!” with a Name parameter.

Component Parameters

Read the page number from /products?page=3 into a property.

Event Handling

Show the key the user pressed in an input using @onkeydown.

Data Binding

Bind a DateOnly field to a date input showing yyyy-MM-dd.

Forms

Add a multi-line Description field to the form.

Validation

Write a custom attribute that rejects dates in the past.

Dependency Injection

Inject ILogger into a code-behind partial class.

Routing

Add a route that accepts an optional page number: /products/page/2.

Layouts

Make a single page use a layout called BlankLayout.

Component Communication

Write a CartState service that raises OnChange when an item is added.

Services

Add a Remove(int productId) method to CartState.

HttpClient

Add DeleteAsync(int id) to ProductsClient.

REST API Integration

Add a search parameter q to the API endpoint.

Authentication

Register cascading authentication state in Program.cs.

Authorization

Protect a page with the policy "CanEditProducts".

Entity Framework Core

Update a product’s price with a fresh context.

SQL Server

Write the Azure SQL connection string using Entra ID (no password).

CRUD Operations

Which package provides QuickGrid?

State Management

Store a draft note in ProtectedSessionStorage (Interactive Server).

Error Handling

Wrap a <WeatherWidget /> so failures show “Weather unavailable”.

Logging

Make EF Core SQL logs show only warnings in appsettings.json.

Performance

Use Virtualize with an ItemsProvider that loads pages from a service.

Security

Which middleware call is required for antiforgery in a Blazor Web App?

Deployment

Why does an Interactive Server app need sticky sessions when scaled to two instances?

Complete Blazor CRUD Project

List the render mode you would use for: Home, ProductList (admin), ProductEdit (admin).

Common interview questions

Frequently asked questions

Is Blazor Server still a thing?
The standalone “Blazor Server” template was replaced by the Blazor Web App template in .NET 8. The same capability is now the Interactive Server render mode.