blazor

Blazor

Blazor enables full-stack web UI development using C# and .NET, offering flexible rendering architectures including Blazor Server, Blazor WebAssembly, and hybrid static server streaming.

When to Use

• Interactive Full-Stack Web Apps in C#: Building rich browser UIs without writing separate JavaScript codebases.
• Blazor Web App Unified Model (.NET 8/9): Mixing Server, WebAssembly, and Static Server-Side Rendering per component.
• Enterprise Internal Dashboards: Utilizing high-productivity component libraries (MudBlazor, Fluent UI Blazor).
• Offline Progressive Web Apps: Compiling C# directly into WebAssembly for client-side offline execution.

Quick Start

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<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++;
    }
}

Core Concepts

Render Modes & Reactive Parameters

Declaring component interactivity per page or component:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<div class="card p-4">
    <h3>Current count: @currentCount</h3>
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</div>

@code {
    private int currentCount = 0;

    [Parameter]
    public int IncrementStep { get; set; } = 1;

    private void IncrementCount()
    {
        currentCount += IncrementStep;
    }
}

Two-Way Binding & EventCallback

Passing events and state between parent and child components:

<!-- ChildComponent.razor -->
<div class="search-box">
    <input value="@SearchTerm" @oninput="OnInputChanged" placeholder="Search..." />
</div>

@code {
    [Parameter]
    public string SearchTerm { get; set; } = string.Empty;

    [Parameter]
    public EventCallback<string> SearchTermChanged { get; set; }

    private async Task OnInputChanged(ChangeEventArgs e)
    {
        var newValue = e.Value?.ToString() ?? string.Empty;
        await SearchTermChanged.InvokeAsync(newValue);
    }
}