Learn BLAZOR with Real Code Examples

@page "/counter"
<h3>Counter</h3>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">+</button>
<button class="btn btn-danger" @onclick="DecrementCount">-</button>
<button class="btn btn-secondary" @onclick="ResetCount">Reset</button>
<button class="btn btn-warning" @onclick="ToggleTheme">Switch Theme</button>

@code {
    private int currentCount = 0
    private bool isDark = false

    private void IncrementCount() => currentCount++
    private void DecrementCount() => currentCount--
    private void ResetCount() => currentCount = 0

    private void ToggleTheme() {
        isDark = !isDark
        var body = document.body
        if (isDark) body.classList.add("dark-theme")
        else body.classList.remove("dark-theme")
    }
}

Demonstrates a simple counter component using Blazor WebAssembly with Razor syntax and C# for interactivity.

@page "/todo"
<h3>Todo List</h3>
<input @bind="newTask" placeholder="Add new task" />
<button @onclick="AddTask">Add</button>
<ul>
    @foreach(var task in tasks) {
        <li>@task <button @onclick="() => RemoveTask(task)">Remove</button></li>
    }
</ul>

@code {
    private string newTask = ""
    private List<string> tasks = new List<string>()

    private void AddTask() {
        if(!string.IsNullOrWhiteSpace(newTask)) tasks.Add(newTask)
        newTask = ""
    }
    private void RemoveTask(string task) => tasks.Remove(task)
}

A minimal Blazor component that allows adding and removing tasks from a Todo list.

@page "/toggle"
<h3>Toggle Message</h3>
<button @onclick="Toggle">Toggle</button>
@if(showMessage) <p>Hello Blazor!</p>

@code {
    private bool showMessage = true
    private void Toggle() => showMessage = !showMessage
}

A Blazor component to toggle visibility of a message.

@page "/form"
<h3>Simple Form</h3>
<input @bind="name" placeholder="Enter name" />
<p>Your name: @name</p>

@code {
    private string name = ""
}

A simple form that binds user input to a property and displays it.

@page "/list"
<h3>Fruits</h3>
<ul>
    @foreach(var fruit in fruits) {
        <li>@fruit</li>
    }
</ul>

@code {
    private List<string> fruits = new List<string>{"Apple","Banana","Cherry"}
}

Render a list of items dynamically using a Blazor component.

@page "/counter-step"
<h3>Counter with Step</h3>
<p>Value: @count</p>
<input type="number" @bind="step" />
<button @onclick="() => count += step">+</button>
<button @onclick="() => count -= step">-</button>

@code {
    private int count = 0
    private int step = 1
}

A counter component that allows incrementing and decrementing by a custom step value.

@page "/conditional"
<h3>Conditional Rendering</h3>
<button @onclick="Toggle">Toggle State</button>
@if(isActive) <p>Active State</p>
else <p>Inactive State</p>

@code {
    private bool isActive = false
    private void Toggle() => isActive = !isActive
}

Show different content based on a boolean property.

@page "/twoway"
<h3>Two-Way Binding</h3>
<input @bind="text" />
<p>You typed: @text</p>

@code {
    private string text = ""
}

Demonstrates two-way binding in Blazor for input fields.

@page "/async-counter"
<h3>Async Counter</h3>
<p>Value: @count</p>
<button @onclick="IncrementAsync">Increment Async</button>

@code {
    private int count = 0
    private async Task IncrementAsync() {
        await Task.Delay(500)
        count++
    }
}

A counter component that updates asynchronously after a delay.

// Parent.razor
<h3>Parent</h3>
<Child Message="Hello from Parent" />

// Child.razor
<p>Message from parent: @Message</p>

@code {
    [Parameter] public string Message { get; set; }
}

A parent and child component example passing parameters in Blazor.