Как связать и запустить метод asyn c при изменении ввода в Blazor

Question

Итак, я создаю компонент Blazor, в который я хочу ввести данные и запустить запрос AJAX для получения отфильтрованных данных с сервера. Я пробовал это

<input type="text" @bind="NameFilter" @onchange="FilterChangedAsync" />

Однако это приводит к ошибке

Атрибут 'onchange' используется два или более раз для этого элемента. Атрибуты должны быть уникальными (без учета регистра). Атрибут «onchange» используется атрибутом директивы «@bind».

Я думал о вызове метода в установщике свойств NameFilter, но в этом случае я не могу его ждать. Как правильно добиться желаемого поведения?

Answer 1

Атрибут @bind является атрибутом директивы компилятора, который указывает компилятору создавать код, который обеспечивает двустороннюю привязку данных, от переменной к элементу и от элемента к переменной. За сценой компилятор создает обработчик события onchange, роль которого заключается в обновлении переменной при запуске события change. Таким образом, вы не можете использовать onchange дважды. Вместо этого вы должны сделать следующее:

<input type="text" @bind="NameFilter" />

Чтобы извлечь введенные данные, определите свойство следующим образом:

public string NameFilter { get; set; } 

В этом случае вы можете добавить элемент управления кнопки с обработчиком события щелчка который может получить доступ к значению NameFilter и использовать его для фильтрации вызовов, например:

<button class="btn btn-primary" @onclick="@FilterMe">Filter Me</button>

И,

private void FilterMe()
    {
        var filter = NameFilter;
    }

Или, что еще лучше, привяжите переменную NameFilter к значению атрибут, плюс определение обработчика события, например:

<input type="text" value="@NameFilter" @onchange="FilterChangedAsync" />

Но в этом случае вы обязаны обновить связанную переменную, что вы можете сделать в самом обработчике события, или использовать выражение lambada как значение @ onchange

 private void FilterChangedAsync(ChangeEventArgs args)
    {
        NameFilter = args.Value.ToString();
    }

Таким образом, вы обновляете свойство NameFilter с помощью выражения lambada:

<input type="text" value="@NameFilter" @onchange="@(( args ) => NameFilter = args.Value.ToString())" />

Примечание. Событие изменения запускается только при нажатии на текст контроль коробки, и это поведение может не соответствовать вашим требованиям к фильтрации. Событие ввода, с другой стороны, происходит каждый раз, когда вы печатаете на клавиатуре.

Использование события ввода:

<input type="text" @bind-value="@NameFilter" @bind-value:event="oninput" />

Или вы можете сделать это с помощью сопровождающего метода, такого как:

<input type="text" value="@NameFilter" @oninput="@FilterChangedAsync" />

и

 private void FilterChangedAsync(ChangeEventArgs args)
    {
        NameFilter = args.Value.ToString();
    }

Удачи ...