Question

问题在于，要在Blazor中实现以下方案似乎非常困难：具有过滤器，该过滤器在更改后会调用异步函数来更新某些数据。

由于属性FilterX无法调用异步方法，因此典型绑定无效：

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

如果更改为以下内容，则可以调用异步方法，但是会丢失双向绑定。例如，如果在输入中输入了无效值，则该值将无法通过代码还原。

<input type="text" value="@FilterX" @onchange="@FilterXChangedAsync"/>

有什么优雅的方法可以解决这个问题吗？

Answer 1

您应该使用@bind-Value="FilterX"

然后将其添加到代码中

public virtual string Value
{
    get { return value; }
    set
    {
        if (this.value == value)
        {
           return;
        }
        this.value = value;
        if (ValueChanged.HasDelegate)
        {
            ValueChanged.InvokeAsync(value);
        }
    }
}

public virtual EventCallback<string> ValueChanged { get; set; }

如果要更改绑定值以更新输入，可以执行以下操作：

<input type="text" @bind-Value="FilterX" @bind:event="oninput" />

Answer 2

您可以在html部分使用@()。编译器会将其插入需要运行的C＃代码中。我在这里创建的是一个异步lambda表达式，您可以在其中使用await。

<input type="text" value="@FilterX" @onchange="@(async e => await FilterXChangedAsync(e))"/>

async Task FilterXChangedAsync(EventArgs args)
{
   var eventValueAsString = e.Value.ToString();
}

双向数据绑定与更改时的异步调用

2 个答案: