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?

Answer 1

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...

Answer 2

>= 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; }
}

Answer 3

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);
}

}