Обработка событий в Blazor

В Blazor для обработки каких-либо событий элементов (например, клик по элементу, потеря фокуса и т.д.) используется следующий синтаксис: @on[EVENT]="[DELEGATE]", где EVENT — это какое-либо событие DOM, а DELEGATE — обработчик события делегата в компоненте Blazor.

Пример обработчика события в Blazor

Самый первый пример обработчика события в Blazor можно увидеть в компоненте Counter, который входит в шаблон приложения Blazor Server:

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Здесь у кнопки определен обработчик события click. Поддержка привязки событий в Blazor содержится в пространстве имен Microsoft.AspNetCore.Components.Web. Так, в этом пространстве имен определен класс EventHandlers, который содержит атрибуты для настройки сопоставлений между именами событий и типами аргументов событий. Так, например, в EventHandlers содержится следующий атрибут:

[Microsoft.AspNetCore.Components.EventHandler("onclick", typeof(Microsoft.AspNetCore.Components.Web.MouseEventArgs), true, true)]

что говорит нам о том, что обработчик события click может принимать аргумент типа MouseEventArgs. Рассмотрим как мы можем использовать аргументы событий.

Аргументы события

Перепишем код компонента Counter следующим образом:

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

    private void IncrementCount(MouseEventArgs args)
    {

        if (args.AltKey)
            currentCount *= 10;
        else
            currentCount++;
    }
}

Здесь, в обработчике IncrementCount() мы принимаем агрумент MouseEventArgs и, в зависимости то того, была ли зажата кнопка Alt на клавиатуре либо наращиваем счётчик на единицу, либо умножаем значение счётчика на 10. У класса MouseEventArgs определены следующие свойства:

Соответственно, у других классов, являющихся аргументами событий, будет другой набор свойств.

Как передать в обработчик события произвольный агрумент

Иногда бывает необходимым передать в обработчик события в Blazor какой-либо свой аргумент, например, по клику на кнопке мыши передать в обработчик события текст, который был введен пользователем в поле input. Следующий код приведет к ошибке:

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

@code {
    private int currentCount = 0;

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

В этом случае, нам необходимо использовать лямбда-выражение. Например, так:

<button class="btn btn-primary" @onclick="(() => IncrementCount(тут_параметры_метода))">Click me</button>

Асинхронная обработка событий

Blazor поддерживает асинхронную обработку событий. Асинхронная обработка событий может быть полезна, например, в случае, если в обработчике события идёт обращение к сетевым ресурсам, работа с базой данных и так далее. Например, перепишем код обработки события в компоненте Counter, добавив асинхронную обработку:

private async Task IncrementCount(MouseEventArgs args)
{
    @*Имитация бурной деятельности*@
    await Task.Delay(1000);
    currentCount++;
}

Теперь клик по кнопке будет обновлять счётчик не сразу, а по прошествии одной секунды.

Перечень поддерживаемых в Blazor событий

Ниже представлен перечень всех поддерживаемых в Blazor событий DOM:

Итого

В Blazor для обработки каких-либо событий элементов используется синтаксис: @on[EVENT]="[DELEGATE]". В обработчик события можно передавать свои параметры, используя лямбда-выражения.