What Is Blazor?

Blazor is a framework for building interactive web interfaces where the components are written in C#. The browser still shows HTML and applies CSS. What changes is where the interaction logic lives: in C# compiled alongside the rest of your solution, rather than in JavaScript maintained separately from it.

Interactive has a specific meaning here. The page responds to what someone does without reloading. A button expands a row. Typing in a search box narrows a list. Saving a form puts a message beside the field that is wrong. Without a framework, each of those needs either a full round trip and a page reload, or a piece of JavaScript. Blazor offers a third option: you write a C# method and the framework arranges for it to run when the event happens.

For a team that already writes C# on the server, the appeal is one language and one set of models across the whole application. The class that describes an employee on the server can be the class that drives the edit screen. That is worth something. It is not free, and most of this lesson is about what it costs.

Those two models used to be a whole-project decision. You created either a Blazor Server project or a Blazor WebAssembly project, and every screen in it worked the same way.

Current .NET versions changed that. A Blazor Web App renders components on the server by default, with no interactivity, and lets you mark individual components as interactive — choosing the render mode per component. The employee list, which only reads and displays, can be plain server-rendered HTML. The edit screen, which has to respond to typing, can be interactive.

So the useful question is no longer which kind of Blazor application this is. It is which render mode this component needs, and the honest answer for a good number of components is none.

@page "/headcount"
@rendermode InteractiveServer

<h1>Headcount</h1>

<p role="status">Employees on record: @count</p>

<button type="button" @onclick="AddOne">Add one</button>

@code {
    private int count = 214;

    private void AddOne()
    {
        count++;
    }
}

• @page gives the component a route. Request /headcount and this is the component the router renders.
• @rendermode InteractiveServer asks for interactivity, with the C# running on the server over a SignalR connection. Without a render mode the markup still renders, but the button does nothing at all.
• @count writes the value of the field into the markup at that point. Any C# expression can follow the @.
• @onclick names the method to call. It is a C# method in the same file, with access to the same fields — there is no serialisation step for you to write and no JavaScript in between.
• After AddOne returns, Blazor renders the component again, compares the result with what it produced last time, and updates the one piece of text that changed. You never write the update.
• role="status" asks assistive technology to announce the new figure when it changes. A number that updates silently is a common accessibility gap in interactive interfaces, and it costs one attribute to avoid.