[Blazor] @bind async

[JvanderStad]

https://docs.microsoft.com/en-us/aspnet/core/blazor/data-binding?view=aspnetcore-3.1

Data-binding takes place with the following syntax:

<input @bind="CurrentValue" />

@code {
    private string CurrentValue { get; set; }
}

this is equivalent of

<input value="@CurrentValue"
    @onchange="@((ChangeEventArgs __e) => CurrentValue = 
        __e.Value.ToString())" />
        
@code {
    private string CurrentValue { get; set; }
}

I can use the setter of the bound property to handle some extra logic

[Parameter]
public EventCallback<string> Callback { get; set; }

private string _value;
private string CurrentValue
{
	get => _value;
	set {
             _value = value;

             // extra logic

             // await Callback.InvokeAsync(value);   
             // above does not work, we are in the 'sync'-world
        }
}

I find myself starting with this pattern and then getting stuck because I need to call something async. I rewrite the thing to handle the events myself, but it feels a bit... not finished. It becomes a real pain if you have made a reusable component and you need to refactor a lot to make it work with the async call.

Can we introduce a convention to allow async calls with two way binding?

[JvanderStad]

Idea similar to the Changed postfix.

<input @bind="CurrentValue" />

@code {
    [Parameter]
    public EventCallback<string> Callback { get; set; }

    private string CurrentValue { get; set; }

    // private Task<string> CurrentValueGetAsync()
    // {
    //     return Task.FromResult(CurrentValue);
    // }

    private async Task CurrentValueSetAsync(string value)
    {
        await Callback.InvokeAsync(value);
        CurrentValue = value;
    }
}

You start out with a normal property and add async getter and setter-methods if required

[javiercn]

@JvanderStad thanks for contacting us.

We'll take a look at this issue and get back to you.

[JvanderStad]

What is the current recommended pattern to use when using two way binding with async calls?

[JvanderStad]

Reference #17099 (comment)

[mkArtakMSFT]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. However, keep in mind that there are many other high priority features with which it will be competing for resources.

[JvanderStad]

@mkArtakMSFT Sure, no problem.
Do you have an answer to my question? I can't find it in the docs.

What is the current recommended pattern to use when using two way binding with async calls?

[mrpmorris]

The current way to do it is to one-way bind the value, and from @onchange call your async method that will set your property value and do other necessary async work.

[chrdlx]

The current way to do it is to one-way bind the value, and from @onchange call your async method that will set your property vague and do other necessary async work.

The problem with that is that you lose all the datatype conversions/culture formatting/etc that @Bind provides....
So now if you use value/onchange, you have to format/convert everything from/to the property manually, which is a pain....

I just stumbled upon this same scenario an hour ago! I decided just to not make async DB calls.... =)