Interactive Counter

Current count

This is a demo page showcasing Blazor's interactive components

📝 How Interactive Components Work

Counter Implementation

<!-- The UI displays the current count -->
<div class="text-6xl font-bold text-indigo-600">@currentCount</div>

<!-- Button with event handler -->
<button @onclick="IncrementCount">
    Increment Counter
</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++; // State change triggers UI update
    }
}

⚡ Interactive Server Mode

• Component runs on the server
• UI updates sent via SignalR
• Real-time bidirectional communication
• Server maintains component state

🔄 Data Binding

• @currentCount displays value
• @onclick handles events
• Automatic UI re-rendering
• No JavaScript required

Enhanced Counter with Step Control

Step Size:

@code {
    private int enhancedCount = 0;
    private int stepSize = 1;

    private void IncrementBy(int amount)
    {
        enhancedCount += amount;
    }
}

🖥️ vs 💻 Server-Side vs Client-Side Blazor

🖥️

Interactive Server

(This counter)

✅ Fast initial load (no download)

✅ Access to server resources

✅ Smaller client footprint

⚠️ Requires constant connection

⚠️ Network latency affects UX

💻

Interactive WebAssembly

(Client-side option)

✅ Works offline

✅ No network latency

✅ Client-side performance

⚠️ Larger download size

⚠️ Limited server access

📝 The Code is Identical!

The amazing thing about Blazor is that the same C# component code works for both server-side and client-side execution:

<!-- This exact same code works in both modes -->
<div>@currentCount</div>
<button @onclick="IncrementCount">Click me</button>

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

💡

Key Insight

You write the component once in C#, then choose where it runs: server-side (Interactive Server) or client-side (Interactive WebAssembly). The rendering mode is configured at the app level or per-component.

🔄 How to Enable Client-Side Execution

1. Add WebAssembly packages to your project:

dotnet add package Microsoft.AspNetCore.Components.WebAssembly

2. Configure render mode in your component:

@page "/counter"
@rendermode InteractiveWebAssembly

<!-- Your component code stays exactly the same! -->

3. Or configure it globally in Program.cs:

builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();

📚 Learn More

→ Interactive Server Components Deep Dive
→ Blazor Render Modes (Microsoft Docs)
→ Blazor Hosting Models (Microsoft Docs)
→ Event Handling in Blazor (Microsoft Docs)