Blazor Event Handling

Event handling in Blazor allows you to respond to user interactions and browser events. This is a fundamental aspect of creating interactive web applications with Blazor.

Understanding Event Handling

Blazor uses a familiar event handling model similar to JavaScript. You can bind to DOM events using the @on... syntax. When an event occurs on an HTML element, Blazor can invoke a C# method or a lambda expression.

Common DOM Events

Blazor supports a wide range of standard DOM events, including:

@onclick: For click events.
@onchange: For input change events.
@onmouseover: For mouse over events.
@onkeydown: For key press events.
@onfocus: For focus events.
@onblur: For blur events.
And many more...

Example: Handling a Button Click

Let's look at a simple example of handling a button click.

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

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

In this example:

The @onclick="IncrementCount" attribute on the <button> element binds the click event to the IncrementCount C# method.
When the button is clicked, the IncrementCount method is executed, which increments the currentCount variable.
The UI automatically updates to reflect the new value of currentCount.

Event Arguments

Many events provide event arguments that contain details about the event. Blazor automatically passes these arguments to your event handlers.

Example: Handling Input Changes

When handling input changes, you often need the value of the input element. The ChangeEventArgs provide this information.

@page "/input-example"

<h1>Input Example</h1>

<input type="text" @onchange="HandleInputChange" placeholder="Type something..." />
<p>You entered: @inputText</p>

@code {
    private string inputText = "";

    private void HandleInputChange(ChangeEventArgs e)
    {
        inputText = e.Value.ToString();
    }
}

Here, e.Value from ChangeEventArgs retrieves the current value of the input field.

Event Modifiers

Blazor offers modifiers to control event behavior, such as preventing default actions or stopping event propagation.

@onclick:preventDefault: Prevents the default browser action for the event.
@onclick:stopPropagation: Stops the event from bubbling up the DOM tree.
@onkeyup:preventDefault:stopPropagation: You can chain multiple modifiers.

Note: Event handlers can also be lambda expressions, offering more concise inline event handling for simple actions.

Example: Using Lambda Expressions

<button class="btn btn-secondary" @onclick="(e) => { Console.WriteLine("Button clicked via lambda!"); }">
    Click with Lambda
</button>

Keyboard Events

Handling keyboard events is crucial for features like search input or shortcut keys.

Example: Key Press Handling

This example demonstrates handling the keyup event to detect when a user presses the 'Enter' key.

@page "/keyboard"

<h1>Keyboard Event Demo</h1>

<input type="text" @onkeyup="HandleKeyPress" placeholder="Press Enter..." />
<p>Last key pressed: @lastKeyPress</p>

@code {
    private string lastKeyPress = "None";

    private void HandleKeyPress(KeyboardEventArgs e)
    {
        lastKeyPress = e.Key;
        if (e.Key == "Enter")
        {
            Console.WriteLine("Enter key was pressed!");
        }
    }
}

The KeyboardEventArgs provide properties like Key, Code, and CtrlKey.

MSDN Documentation

Navigation