Blazor Tutorial
Interactive web UI with C#. Blazor Web App render modes, components, forms and EF Core.
- 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.
- 1Foundations · 6 topics · BeginnerIntroduction to Blazor · Blazor Architecture · Blazor Web App · Blazor Server-Side Rendering · Interactive Server Rendering · WebAssembly Fundamentals
- 2Components · 6 topics · Beginner → IntermediateRazor Components · Component Parameters · Event Handling · Data Binding · Forms · Validation
- 3App Structure · 5 topics · IntermediateDependency Injection · Routing · Layouts · Component Communication · Services
- 4Data · 8 topics · Intermediate → AdvancedHttpClient · REST API Integration · Authentication · Authorization · Entity Framework Core · SQL Server · CRUD Operations · State Management
- 5Production · 6 topics · AdvancedError Handling · Logging · Performance · Security · Deployment · Complete Blazor CRUD Project
Complete topic list
31 topicsFoundations
6 topics- Introduction to BlazorBeginner5m
- Blazor ArchitectureBeginner5m
- Blazor Web AppBeginner5m
- Blazor Server-Side RenderingBeginner5m
- Interactive Server RenderingBeginner5m
- WebAssembly FundamentalsBeginner5m
Components
6 topics- Razor ComponentsBeginner5m
- Component ParametersBeginner5m
- Event HandlingIntermediate5m
- Data BindingIntermediate5m
- FormsIntermediate5m
- ValidationIntermediate5m
App Structure
5 topics- Dependency InjectionIntermediate5m
- RoutingIntermediate5m
- LayoutsIntermediate5m
- Component CommunicationIntermediate5m
- ServicesIntermediate5m
Data
8 topics- HttpClientIntermediate5m
- REST API IntegrationIntermediate5m
- AuthenticationIntermediate5m
- AuthorizationIntermediate5m
- Entity Framework CoreAdvanced5m
- SQL ServerAdvanced5m
- CRUD OperationsAdvanced5m
- State ManagementAdvanced5m
Production
6 topics- Error HandlingAdvanced5m
- LoggingAdvanced5m
- PerformanceAdvanced5m
- SecurityAdvanced5m
- DeploymentAdvanced5m
- Complete Blazor CRUD ProjectAdvanced5m
Visual guides
1 diagramCode example
A taste of the track, from Introduction to Blazor.
@* 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";
}
At /hello the heading updates on every keystroke: typing “Asha” shows “Namaste, Asha!” and “You typed 4 characters.”
Practice exercises
Add a button that resets the name to an empty string.
Which lifecycle method should load a product list from an API?
Which render mode suits a public product listing page that must be fast and indexable, with no client-side interaction?
What attribute lets a static page show “Loading…” before the data is ready?
Which two calls enable Interactive Server in Program.cs?
Where must a component live to use InteractiveWebAssembly in a Blazor Web App?
Show all 31 exercises
Create a Greeting component that shows “Hello, {Name}!” with a Name parameter.
Read the page number from /products?page=3 into a property.
Show the key the user pressed in an input using @onkeydown.
Bind a DateOnly field to a date input showing yyyy-MM-dd.
Add a multi-line Description field to the form.
Write a custom attribute that rejects dates in the past.
Inject ILogger into a code-behind partial class.
Add a route that accepts an optional page number: /products/page/2.
Make a single page use a layout called BlankLayout.
Write a CartState service that raises OnChange when an item is added.
Add a Remove(int productId) method to CartState.
Add DeleteAsync(int id) to ProductsClient.
Add a search parameter q to the API endpoint.
Register cascading authentication state in Program.cs.
Protect a page with the policy "CanEditProducts".
Update a product’s price with a fresh context.
Write the Azure SQL connection string using Entra ID (no password).
Which package provides QuickGrid?
Store a draft note in ProtectedSessionStorage (Interactive Server).
Wrap a <WeatherWidget /> so failures show “Weather unavailable”.
Make EF Core SQL logs show only warnings in appsettings.json.
Use Virtualize with an ItemsProvider that loads pages from a service.
Which middleware call is required for antiforgery in a Blazor Web App?
Why does an Interactive Server app need sticky sessions when scaled to two instances?
List the render mode you would use for: Home, ProductList (admin), ProductEdit (admin).
Common interview questions
- What is Blazor?
- How do component parameters work?
- What is a Razor component?
- How do event handlers work in Blazor?
- What is @bind?
- How does routing work in Blazor?
- What are layouts in Blazor?
- Explain the Blazor Web App render modes.
- How do you build validated forms in Blazor?
- How do components share state?
- What is JavaScript interop?
- What is static server-side rendering (static SSR)?
- What are the trade-offs of Interactive Server?
- What are the trade-offs of WebAssembly?
- How do you inject services into components?
- How do you call a REST API from Blazor WebAssembly?
- How do you use EF Core safely in Blazor Server components?
- How do you show content only to signed-in users?
- How do you secure a Blazor Web App?
- How do you improve Blazor performance?
- What is the component lifecycle?
- How do you handle errors in Blazor?
- How do you keep state across prerendering and interactivity?
- How do you deploy a Blazor Web App?
- How do you validate a model with custom rules in Blazor forms?