Event handling

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 Click Me button is clicked:

<button type="button" @onclick="OnClickHandler">
    Click Me
</button>
@code {
    private void OnClickHandler()
    {
        // ...
    }
}

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

The following code calls the asynchronous OnChangeHandlerAsync method when the checkbox is changed:

<input type="checkbox" @onchange="OnChangedHandlerAsync" />Is OK?
@code {
    bool isOk;
    private async Task OnChangedHandlerAsync(ChangeEventArgs e)
    {
        isOk ...