How to bind and run an async method on input change in Blazor

Question

So I am building a Blazor component where I want to type into an input and fire an AJAX request to get filtered data from the server. I tried this

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

However this results in an error

The attribute 'onchange' is used two or more times for this element. Attributes must be unique (case-insensitive). The attribute 'onchange' is used by the '@bind' directive attribute.

I thought about calling the method in the NameFilter property setter but in this case I can't await it. What is the proper way to achieve the desired behavior?

@Kyle the problem with that is that you can't await async methods in a property setter — Stilgar, Jan 14 '20 at 18:48

enet · Accepted Answer · 2020-01-14T09:58:07.650

The @bind attribute is a compiler directive attribute instructing the compiler to create code that enables two way data binding, from a variable to the element, and from the element to the variable. Behind the scene, the compiler creates the onchange event handler whose role is to update the variable when the change event is triggered. Thus, you can't use the onchange twice. Instead you should do the following:

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

To retrieve the data entered define a property like this:

public string NameFilter { get; set; }

In that case you can add a button control with a click event handler that can access the value of NameFilter, and use it for your filtering calls, like this:

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

And,

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

Or still better, bind the NameFilter variable to the value attribute, plus defining an event handler, like this:

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

But in that case it is your responsibility to update the bound variable, which you can do in the event handler itself, or using a lambada expression as the value of @onchange

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

This is how you update the NameFilter property with lambada expression:

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

Note: The change event is triggered only when you tab out of the text box control, and this behavior may not suit your filtering requirements. The input event, on the other hand, occurs each time you type on the keyboard.

Using the input event:

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

Or you can do it with an accompanying method like this:

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

and

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

Good luck...

So how do I get the value into the NameFilter property then? Do I have to reference the element with @ref? BTW you are right about onchange firing only when losing focus. For some reason I thought it also fired when enter is pressed... — Stilgar, Jan 14 '20 at 09:19
You can @Bind the value AND bind an event on keyup. Might not be quite what you want, but those two events will work hand in hand. — Tod, Dec 16 '20 at 11:35
Thanks for thoroughly explanation especially regarding the @oninput — Mohammad S., Apr 12 '22 at 10:15

score 8 · Answer 2 · answered Aug 10 '22 at 14:32

8

>= Net7

Quoting Blazor data binding get/set/after modifiers

In .NET 7 you can now easily run async logic after a binding event has completed using the new @bind:after modifier:

<input @bind="searchText" @bind:after="PerformSearch" />

@code {
    string searchText;

    async Task PerformSearch()
    {
        // ... do something asynchronously with 'searchText' ...
    }
}

also useful:

<input @bind:get="Value" @bind:set="ValueChanged" />

@code {
    [Parameter] public TValue Value { get; set; }
    [Parameter] public EventCallback<TValue> ValueChanged { get; set; }
}

answered Aug 10 '22 at 14:32

dani herrera

48,760
8
117
177

when `bind:after` is fired? How to define if I want it `onChange` or `onInput`, or `keyDown`? – Dmitry Mar 24 '23 at 15:37
Thanks! Moving everything to .Net7 ! Been waiting for this for a while - way too difficult in earlier versions to get common things done. – MC9000 Aug 02 '23 at 03:41

score 0 · Answer 3 · answered Mar 03 '22 at 15:13

Since this is the number one answer that did not help me, I'll post the actual solution here, as the first one is named async but defacto is not.

It is important to return a Task from the async method and not void, that is the whole trick.

Code example:

<InputFile accept=".xlsx" OnChange="@LoadFile" single />
...
@code {
private ExcelData? data;
private async Task LoadFile(InputFileChangeEventArgs e)
{
    data = await ExcelReader.ImportExcelFile(e.File);
}

}

How to bind and run an async method on input change in Blazor

3 Answers3

>= Net7