Learn BLAZOR-WASM with Real Code Examples

# blazor/demo/Hello.razor
<h3>Hello, Blazor!</h3>

@code {
    private string message = "Hello, Blazor!";
}

A basic Blazor WebAssembly component displaying 'Hello, Blazor!' in the browser.

# blazor/demo/ButtonClick.razor
<h3>@message</h3>
<button @onclick="UpdateMessage">Click Me</button>

@code {
    private string message = "Click the button!";
    private void UpdateMessage() {
        message = "Button clicked!";
    }
}

A component that updates a message when a button is clicked.

# blazor/demo/TwoWayBinding.razor
<input @bind="name" placeholder="Enter your name" />
<p>Hello, @name!</p>

@code {
    private string name = "";
}

A component using two-way binding with an input field.

# blazor/demo/Conditional.razor
@if (isLoggedIn) {
    <p>Welcome back!</p>
} else {
    <p>Please log in.</p>
}

@code {
    private bool isLoggedIn = false;
}

A component that shows different content based on a condition.

# blazor/demo/Loop.razor
<ul>
@foreach (var item in items) {
    <li>@item</li>
}
</ul>

@code {
    private List<string> items = new List<string> { "Item 1", "Item 2", "Item 3" };
}

A component displaying a list of items using a loop.

# blazor/demo/EventCallback.razor
<ChildComponent OnNotify="HandleNotification" />
<p>@message</p>

@code {
    private string message = "Waiting for notification...";
    private void HandleNotification(string msg) {
        message = msg;
    }
}

// ChildComponent.razor
<button @onclick="NotifyParent">Notify Parent</button>

@code {
    [Parameter] public EventCallback<string> OnNotify { get; set; }
    private async Task NotifyParent() {
        await OnNotify.InvokeAsync("Notification received!");
    }
}

A parent and child component demonstrating event callbacks.

# blazor/demo/Cascading.razor
<CascadingValue Value="username">
    <ChildComponent />
</CascadingValue>

@code {
    private string username = "BlazorUser";
}

// ChildComponent.razor
<p>Welcome, @Username!</p>

@code {
    [CascadingParameter] public string Username { get; set; }
}

A component using cascading parameters for shared state.

# blazor/demo/Timer.razor
<p>Current Time: @currentTime</p>

@code {
    private string currentTime;
    protected override void OnInitialized() {
        var timer = new System.Timers.Timer(1000);
        timer.Elapsed += (s, e) => {
        currentTime = DateTime.Now.ToString("HH:mm:ss");
        InvokeAsync(StateHasChanged);
        };
        timer.Start();
    }
}

A component updating the time every second.

# blazor/demo/FormValidation.razor
<EditForm Model="user" OnValidSubmit="HandleValidSubmit">
    <InputText @bind-Value="user.Name" />
    <button type="submit">Submit</button>
</EditForm>
<p>@message</p>

@code {
    private User user = new User();
    private string message;
    private void HandleValidSubmit() {
        message = $"Hello, {user.Name}!";
    }
    class User { public string Name { get; set; } }
}

A component demonstrating simple form validation.

# blazor/demo/Nested.razor
@foreach (var i in Enumerable.Range(1, 3)) {
    <ChildComponent Number="i" />
}

// ChildComponent.razor
<p>Child component number: @Number</p>

@code {
    [Parameter] public int Number { get; set; }
}

A parent component rendering multiple child components dynamically.