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
– Stilgar, Commented Jan 14, 2020 at 18:48

enet · Accepted Answer · 2020-01-14 09:58:07Z

41

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

edited Jan 14, 2020 at 9:58

answered Jan 14, 2020 at 8:55

enet

46.4k6 gold badges103 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Stilgar Over a year ago

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

Tod Over a year ago

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.

Ovis Over a year ago

Thanks for thoroughly explanation especially regarding the @oninput

SendETHToThisAddress Over a year ago

Did not work for me. I find that the property is still null upon submitting my form, even though I used @bind.

dani herrera · Accepted Answer · 2022-08-10 14:32:41Z

20

>= 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, 2022 at 14:32

dani herrera

52k11 gold badges133 silver badges188 bronze badges

2 Comments

Dmitry Over a year ago

when bind:after is fired? How to define if I want it onChange or onInput, or keyDown?

MC9000 Over a year ago

Thanks! Moving everything to .Net7 ! Been waiting for this for a while - way too difficult in earlier versions to get common things done.

Axel Samyn · Accepted Answer · 2025-02-18 14:38:40Z

1

As a complement of Enet's answer, you can also declare async onchange handlers like this @onchange=@(async (ChangeEventArgs e) => await { /* Do your thing */ OnItemChanged(args: e); } )

Also to complete Dani's answer, here a list of directives you can use to get a fine grained control over your bindings:

Directive	Usage
`@bind=`	Standard two-way binding
`@bind:get=`	Custom getter
`@bind:set=`	Custom setter
`@bind:event=`	Custom event for binding updates
`@bind:after=`	Runs logic after value updates
`@bind-{attribute}`	Binds to a specific attribute
`@bind-{attribute}:event=`	Custom event for a specific attribute

For example : <input type="text" @bind="Name" @bind:event="oninput" />

The :event directive let's you define another event handler than the default onchange which lets you handle updates as the users types.

edited Feb 18 at 14:38

answered Feb 18 at 11:56

Axel Samyn

4063 silver badges13 bronze badges

2 Comments

Axel Samyn Feb 18 at 11:57

For some reason, my table won't format correctly :/

Henk Holterman Feb 18 at 12:00

Markdown needs a newline every now and then

Christian O. · Accepted Answer · 2022-03-03 15:13:34Z

0

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

}

answered Mar 3, 2022 at 15:13

Christian O.

5721 gold badge5 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

>= Net7

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

>= Net7

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related