Обработка событий в HTML-элементах

Наши компоненты Razor так или иначе базируются на стандартных HTML-элементах — кнопках, полях ввода, переключателях и т.д. И нам необходимо уметь обрабатывать события этих элементов в наших компонентах.

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

Самый первый пример обработчика события мы видим в компоненте Counter шаблонного приложения Blazor Hybrid

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

Здесь для кнопки добавлен обработчик события click с использованием атрибута директивы @onclick. Различные HTML-элементы могут предоставлять нам различные события, поэтому, как мы уже знаем, в Razor для обработки событий используется один синтаксис атрибутов директив:

@on[EVENT]=[Delegate]

где EVENT — название события, а Delegate — делегат, соответствующий событию.

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

Обработчики событий могут принимать различные аргументы. Например, обработчик @onclick может принимать аргумент, представленный классом MouseEventArgs. Этот класс предоставляет нам следующие свойства:

Например, создадим новое приложение Blazor Hybrid и перепишем компонент Counter следующим образом:

@page "/counter"

<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.CtrlKey == false) 
        {
            currentCount++;
        }
        else
        {
            currentCount--;
        }
    }
}

здесь мы использовали аргумент события в обработчике и проверили была ли зажата клавиша Ctrl при клике и в зависимости от этого либо наращиваем счётчик на 1, либо наоборот — уменьшаем. При этом, в разметке компонента ничего не изменилось:

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

Можно запустить приложение и убедиться, что при зажатой клавише Ctrl значение счётчика уменьшается на 1:

Blazor предоставляет нам различные встроенные аргументы событий, которые содержатся в пространстве имен Microsoft.AspNetCore.Components.Web.

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

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

@page "/counter"

<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 async Task IncrementCount(MouseEventArgs args)
    {
        await Task.Delay(1000);
        if (args.CtrlKey == false) 
        {
            currentCount++;
        }
        else
        {
            currentCount--;
        }
    }
}

Здесь метод IncrementCount() асинхронный. Можно запустить приложение и убедиться, что счётчик изменяет свое значение через секунду после клика по кнопке.

Использование лямбда-выражений

Для обработки событий необязательно создавать отдельный метод — мы можем также использовать лямбда-выражения. Например так:

@page "/counter"

<h1>Counter</h1>

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

<button class="btn btn-primary" @onclick="@((args)=>
{ 
    if (args.CtrlKey) 
       currentCount--; 
    else
      currentCount++; 
})">Click me</button>

@code {
    private int currentCount = 0;
}

здесь args — это объект класса MouseEventArgs. Можно запустить приложение и убедиться, что оно работает точно также, как и раньше.

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

@page "/counter"

<h1>Counter</h1>

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

<button class="btn btn-primary" @onclick="(e=>Click(e, 10))">Click me</button>

@code {
    private int currentCount = 0;

    private void Click(MouseEventArgs args, int data)
    {
        if (args.CtrlKey)
            currentCount -= data;
        else
            currentCount += data;

    }
}

Запустите приложение и убедитесь, что теперь счётчик наращивается сразу на 10:

Итого

Обработка событий в html-элементах осуществляется с использованием директив атрибутов @on[Event]. В обработчиках событий могут использоваться аргументы событий. Blazor содержит ряд предопределенных аргументов событий. Также, для определения обработчика события не обязательно использовать отдельные методы — мы можем использовать для этих целей лямбда-выражения.