Search⌘ K
AI Features
Home
Courses
Building Real-Life Applications with Blazor WebAssembly

Event Handling

Explore how to handle events effectively in Blazor WebAssembly to build interactive components like a Kanban board. Learn to use event attributes, process synchronous and asynchronous event handlers, apply lambda expressions, prevent default behaviors, and simplify component parameters with attribute splatting and arbitrary parameters for more dynamic web applications.

We'll cover the following...

Razor components handle events by using an HTML element attribute named @on{EVENT} where EVENT is the name of the event.

The following code calls the OnClickHandler method when the button is clicked:

C++
<button class="btn btn-success" @onclick="OnClickHandler">
  Click Me
</button>
@code {
    private void OnClickHandler()
    {
    // ...
    }
}

Since event handlers automatically trigger a UI render, we do not need to call StateHasChanged when processing them. Event handlers can be used to call both synchronous and asynchronous methods. Also, they can reference any arguments that are associated with the event.

The following code asynchronously calls the OnChangeHandler method when the checkbox is changed:

C++
<input type="checkbox" @onchange="OnChangedHandler" />
@code {
  private async Task OnChangedHandler(ChangeEventArgs e)
  {
    newvalue = e.Value.ToString();
    // await ...
  }
}

In the preceding code, the ChangeEventArgs class is used to supply information about the change event. The event arguments are optional and should only be included if they are used by the method.

All of the EventArgs classes that are supported by the ASP.NET Core framework are supported by the Blazor WebAssembly framework. This is a list of the supported EventArgs classes:

  1. ClipboardEventArgs
  2. DragEventArgs
  3. ErrorEventArgs
  4. EventArgs
  5. FocusEventArgs
...
  1. MouseEventArgs
  2. PointerEventArgs
  3. WheelEventArgs
  4. ProgressEventArgs
  5. TouchEventArgs
...