What Is Blazor?
Blazor is a free, open-source framework from Microsoft, part of ASP.NET Core, that lets developers build interactive web user interfaces using C# and .NET instead of JavaScript. A Blazor app is composed of components — reusable pieces of UI defined in .razor files that mix HTML markup with C# logic — and the framework handles wiring up event handlers, data binding, and re-rendering the DOM when state changes.
Cricket analogy: Blazor is like an allrounder such as Ravindra Jadeja who both bats and bowls for the same team, so you don't need to recruit a separate specialist just to cover the other skill — one player, two disciplines, one C# language for markup and logic.
Why Blazor Exists
Before Blazor, building rich interactive web UI meant writing JavaScript (or TypeScript) on the client even if the rest of your stack was C#/.NET, forcing teams to maintain two languages, two type systems, and often duplicate validation logic. Blazor lets a .NET team share models, validation rules, and even entire libraries between server and client, and it plugs into the existing ASP.NET Core ecosystem for routing, dependency injection, and authentication.
Cricket analogy: It's like a captain such as MS Dhoni staying behind the stumps for the whole match instead of rotating wicketkeepers between innings — keeping one continuous skillset (C#) avoids the handoff friction of switching to JavaScript mid-project.
Components and the Rendering Model
Every piece of UI in Blazor is a component: a .razor file containing Razor markup (HTML plus embedded C# using the @ symbol) and a code section (either inline @code {} or a separate partial class) that defines state and event handlers. When state changes — for example, a button click updates a field — Blazor computes a new render tree, diffs it against the previous one, and applies only the minimal set of DOM updates, similar in spirit to virtual-DOM frameworks like React but driven entirely by C#.
Cricket analogy: A single over from Jasprit Bumrah combines the run-up, the seam position, and the yorker into one continuous action rather than separate disconnected movements — a Blazor component similarly fuses markup and behavior into one cohesive unit.
Render Modes in .NET 8+
Starting with .NET 8, Blazor unified its hosting models under a single project template with per-component render modes: Static Server (no interactivity, classic request/response), Interactive Server (logic runs on the server over a SignalR circuit), Interactive WebAssembly (logic runs in the browser via a WASM-compiled .NET runtime), and Interactive Auto (starts on the server for a fast first load, then switches to WASM once the client-side runtime has been downloaded and cached).
Cricket analogy: Choosing Interactive Auto is like Virat Kohli starting an innings cautiously in Test match tempo before shifting into T20-style aggression once he's set — a fast, safe start (server) followed by a faster mode once the client (WASM) is ready.
// Counter.razor — a minimal interactive Blazor component
@page "/counter"
@rendermode InteractiveServer
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
In .NET 8 and later, render modes are set per component (or per app) with the @rendermode directive, so a single Blazor Web App project can mix Static Server, Interactive Server, and Interactive WebAssembly components side by side instead of forcing an all-or-nothing hosting choice.
- Blazor lets you build interactive web UI using C# and .NET instead of JavaScript.
- Components are .razor files combining HTML-like markup with embedded C# via the @ symbol.
- Blazor shares models and validation logic between client and server, avoiding duplicate JavaScript rewrites.
- Component state changes trigger a render-tree diff and minimal DOM patch, similar to virtual-DOM frameworks.
- .NET 8 unified hosting under Blazor Web Apps with per-component render modes.
- Render modes include Static Server, Interactive Server, Interactive WebAssembly, and Interactive Auto.
- Interactive Auto starts on the server and switches to WebAssembly once the client runtime is cached.
Practice what you learned
1. What language do developers primarily write Blazor application logic in?
2. What file extension do Blazor components typically use?
3. Which .NET version introduced unified Blazor Web Apps with per-component render modes?
4. What does the Interactive Auto render mode do?
5. What mechanism does Blazor use to update the DOM efficiently when component state changes?
Was this page helpful?
You May Also Like
Blazor Server vs Blazor WebAssembly
A comparison of Blazor's two hosting models — where code runs, how the UI updates, and how to choose between them.
Project Structure and App.razor
How a default Blazor Web App project is organized, and the role of App.razor, layouts, and Program.cs.
Your First Razor Component
A hands-on walkthrough of creating, parameterizing, and wiring events into a basic Blazor component.
Razor Syntax Basics
The fundamentals of Razor markup: the @ transition character, control flow, data binding, and HTML encoding.
Related Reading
Related Study Notes in Microsoft Technologies
Browse all study notesWindows 10 / UWP Development Study Notes
.NET · 30 topics
Microsoft TechnologiesWindows Batch Scripting Study Notes
Batch · 30 topics
Microsoft TechnologiesMFC (Microsoft Foundation Classes) Study Notes
C++ · 30 topics
Microsoft TechnologiesSilverlight Study Notes
.NET · 30 topics
Microsoft TechnologiesXAML Study Notes
.NET · 30 topics
Microsoft TechnologiesWPF (Windows Presentation Foundation) Study Notes
.NET · 30 topics