Blazor and Razor: Template and Interactivity in a New Light

If you’re a .NET developer, you’ve probably already worked with Razor — a syntax that lets you embed C# directly into HTML. It’s very handy for generating server-rendered pages, but interactivity traditionally relied on form posts and full page refreshes. What if you want to build an interactive UI using C# instead of JavaScript? That’s where Blazor comes in.

Razor: Neatly “shaving” the template

Razor lets you define the structure of your page and conditionally render content based on data. For example, you can display a list of products or show a section only to authenticated users:

@foreach(var item in Model.Products)
{
    <div>@item.Name - @item.Price</div>
}
@if(User.Identity.IsAuthenticated)
{
    <p>Hello, @User.Identity.Name!</p>
}

Razor is useful for server-rendered pages and good for SEO. It’s responsible for structure and content, but not for interactivity on the client — until Blazor comes to the rescue.

Razor in the MVC/MVVM world

Classic Razor is commonly used in ASP.NET MVC or ASP.NET Core MVC:

• The page is split into Model (data), View (Razor template) and Controller (logic).
• Razor (.cshtml) takes data from the model and generates HTML.
• Typically you work with separate files for the model, controller, and view.

Example Razor view in MVC:

@model ProductViewModel

<h2>@Model.Name</h2>
<p>Price: @Model.Price</p>

By itself, Razor doesn’t make the page interactive — that logic usually resides in the controller and needs JavaScript for interactivity.

Blazor: Bringing the template to life

Blazor uses the same Razor syntax, but adds real interactivity, letting your app respond to user events without full page reloads. Blazor components are written in .razor files that combine HTML and C# in one place.

Blazor supports multiple hosting models:

• Blazor Server — UI logic runs on the server and sends UI updates to the browser (via SignalR).
• Blazor WebAssembly — the app runs in the browser using WebAssembly, with no server needed after the initial load.

Here’s a simple counter component:

@page "/counter"
<h3>Counter</h3>
<p>Current count: @currentCount</p>
<button @onclick="IncrementCount">Increment</button>

@code {
    private int currentCount = 0;
    private void IncrementCount() => currentCount++;
}

HTML and C# live together in one file, and the button updates the UI instantly — all without writing JavaScript.

Razor and Blazor together

You could say: Razor neatly “shaves” the template, and Blazor brings it to life with interactivity. Razor Pages are great for static or server-rendered content, whereas Blazor lets you build modern single-page applications (SPAs) using C#.

When to use what

• Razor Pages — simple websites where SEO and server rendering matter.
• Blazor — dynamic, interactive applications where you want to write frontend logic in C# instead of JavaScript.

Conclusion

Razor provides structure and content, and Blazor adds interactivity and behavior. Together they give .NET developers a powerful way to build modern web applications where the full life cycle — from UI to logic — can be written in C#.