Blazor: Building Web Apps with C# - Introduction

Blazor: Building Web Apps with C# – A Comprehensive Guide and Comparison

What is Blazor?

Blazor lets you build web apps using C# instead of JavaScript.

Blazor is a web framework in ASP.NET Core that enables developers to build interactive web applications using C# and Razor syntax, running in the browser (via WebAssembly) or on the server.

🧠 Real-World Analogy:

Angular/React is like talking to your friend in English (JavaScript). Blazor is like talking to them in Hindi (C#), but they still understand because of a translator (WebAssembly or SignalR).

How It’s Similar to Angular/React

Feature	Angular / React	Blazor
Component-based UI	✅	✅
Reusable Components	✅	✅ (.razor files)
Routing (URLs)	✅	✅ (NavLink, @page directive)
Forms and Validation	✅	✅ (EditForm, Data Annotations)
Client-side rendering	✅ (React mostly)	✅ (Blazor WebAssembly)
Server-side rendering	✅ (Angular Universal)	✅ (Blazor Server)
JavaScript Interop	Native	✅ (IJSRuntime to call JS)
Dependency Injection	Angular: ✅ React: ❌	✅

🧱 Blazor Component Example (like Angular/React)

Here's a simple Blazor Counter component:

Counter.razor

<!-- Counter.razor -->
<h3>Counter</h3>
<p>Current count: @count</p>
<button @onclick="Increment">Click me</button>

@code {
    int count = 0;
    void Increment() => count++;
}

This is conceptually similar to:

React:

const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>Click me</button>

Angular:

<button (click)="increment()">Click me</button>
<p>Count: {{ count }}</p>

So it works the same conceptually — just in C#.

🔄 Types of Blazor (Think of them as “how Blazor runs”)

1. Blazor Server

Runs C# code on the server, and sends HTML updates over SignalR (like a chat app). Works like Angular Universal (SSR) but keeps the connection live!

[Browser] <----> [Server (Blazor + SignalR)] → Handles all logic

Pros:

• Fast loading
• Full .NET access

Cons:

• Needs internet connection
• More server load

2. Blazor WebAssembly

Downloads C# + .NET DLLs into browser, runs like a JS SPA (like Angular/React).

[Browser]
 → Downloads .NET runtime (.wasm)
 → Runs everything in browser

Pros:

• Offline possible
• Pure SPA

Cons:

• Bigger download
• Slower to load

3. Blazor Hybrid (MAUI)

Combine Blazor UI with native mobile/desktop apps. Like Electron with React, but lighter and in .NET.

🧠 How Blazor Feels vs Angular/React (as a dev)

If you use…	You write in…	Frontend updates happen by…
React	JavaScript/TS	Virtual DOM (JS engine)
Angular	TypeScript	Data binding via Angular engine
Blazor	C#	Razor + .NET runtime

Summary:

• React = JS + Hooks
• Angular = TS + DI + Templates
• Blazor = C# + Razor + Components

🎯 Advanced Features (also similar to Angular/React)

Feature	Available in Blazor?	Example
Routing	✅	@page "/dashboard"
Event Handling	✅	@onclick="MyMethod"
Data Binding	✅	@bind="myVariable"
Lifecycle Methods	✅	OnInitializedAsync() like ngOnInit
Dependency Injection	✅	@inject MyService Service
JS Interop	✅	JS.InvokeAsync("myFunc")
Form Validation	✅	EditForm, ValidationMessage

💡 JavaScript Interop in Blazor

Use Case: You want to use browser features like localStorage, or libraries like Chart.js.

wwwroot/js/myhelper.js

// wwwroot/js/myhelper.js
window.showAlert = (msg) => alert(msg);

Blazor Razor Component

@inject IJSRuntime JS
<button @onclick="ShowAlert">Alert</button>

@code {
    async Task ShowAlert() {
        await JS.InvokeVoidAsync("showAlert", "From Blazor!");
    }
}

This is like Angular’s @Inject(JsLib) or React’s useEffect(() => ..., []).

🧭 Final Visual: Blazor vs Angular vs React

          +-----------+   +-----------+   +-----------+
          |  Blazor   |   |  Angular  |   |  React    |
          +-----------+   +-----------+   +-----------+
          |  C#       |   | TypeScript|   | JavaScript|
          |  Razor    |   | HTML + TS |   | JSX       |
          |  WebAssembly/|   | JS Engine |   | Virtual DOM|
          |  SignalR   |   | RxJS, etc |   | Hooks      |
          +-----------+   +-----------+   +-----------+

✅ When Should You Use Blazor?

• ✅ You're a .NET Developer and want to reuse your C# skills for frontend.
• ✅ You want to build internal apps quickly with rich UI.
• ✅ You want full stack in one language (C#).
• ✅ You're building a MAUI mobile or desktop app and want web UI inside it.