Blazor WASM Event Handling And Event Arguments

What you'll learn

In this article, lets learn about Event Handling and Event Arguments in blazor wasm apps.

Note: If you have not done so already, I recommend you read the article on Blazor WASM Data Binding.

Why it matters

Event Handling in blazor components helps us to bring interactivity in our blazor applications. What should happen when a user clicks on a button or when the user hovers on element inside a component? we can run a form submit event on click of button or show an alert on click of button or animate a element inside component when the users hovers on the element, etc. We can do all these with the help of event handlers in blazor components.

The razor syntax for that is @on{DOM EVENT}="{DELEGATE}"

• The {DOM EVENT} placeholder is a Document Object Model (DOM) event (for example, click).
• The {DELEGATE} placeholder is the C# delegate event handler.

<h1>@currentHeading</h1>

<p>
    <label>
        New title
        <input @bind="newHeading" />
    </label>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
    <button @onclick="UpdateHeadingAsync">
        Asynchronous Update heading
    </button>
</p>

<p>
    <label>
        <input type="checkbox" @onchange="CheckChanged" />
        @checkedMessage
    </label>
</p>

@code {
    private string currentHeading = "I ❤️ .NET";
    private string? newHeading;
    private string checkedMessage = "Not changed yet";

    private void UpdateHeading()
    {
        currentHeading = $"{newHeading}!!!";
    }

    private async Task UpdateHeadingAsync()
    {
        await Task.Delay(300);

        currentHeading = $"{newHeading}!!!";
    }

    private void CheckChanged()
    {
        checkedMessage = $"Last changed at {DateTime.Now}";
    }
}
        

Implementation

Event arguments

For events that support an event argument type, specifying an event parameter in the event method definition is only necessary if the event type is used in the method. In the following example, MouseEventArgs is used in the ReportPointerLocation method to set message text that reports the mouse coordinates when the user selects a button in the UI.

@for (var i = 0; i < 4; i++)
{
    <p>
        <button @onclick="ReportPointerLocation">
            Where's my mouse pointer for this button?
        </button>
    </p>
}

<p>@mousePointerMessage</p>

@code {
    private string? mousePointerMessage;

    private void ReportPointerLocation(MouseEventArgs e)
    {
        mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
    }
}
        

Here are the list of supported event arguments:

Summary

In this article, we learned about what is event handling in blazor components and experienced a live demo. In our next article let's learn about what is event callback and how to communicate between components.