如何在 Blazor 中的输入更改时绑定和运行异步方法

Question

所以我正在构建一个 Blazor 组件，我想在其中输入输入并触发 AJAX 请求以从服务器获取过滤的数据。我试过这个

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

但是这会导致错误

属性 'onchange' 用于此元素两次或更多次。属性必须是唯一的（不区分大小写）。'@bind' 指令属性使用了属性 'onchange'。

我想过在 NameFilter 属性设置器中调用该方法，但在这种情况下我不能等待它。实现所需行为的正确方法是什么？

Answer 1

@bind 属性是一个编译器指令属性，指示编译器创建启用两种方式数据绑定的代码，从变量到元素，从元素到变量。在幕后，编译器创建 onchange 事件处理程序，其作用是在触发更改事件时更新变量。因此，您不能两次使用 onchange。相反，您应该执行以下操作：

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

要检索输入的数据，请定义如下属性：

public string NameFilter { get; set; } 

在这种情况下，您可以添加一个带有单击事件处理程序的按钮控件，该处理程序可以访问 NameFilter 的值，并将其用于过滤调用，如下所示：

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

和，

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

或者更好的是，将 NameFilter 变量绑定到 value 属性，并定义一个事件处理程序，如下所示：

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

但在这种情况下，您有责任更新绑定变量，您可以在事件处理程序本身中执行此操作，或者使用 lambda 表达式作为 @onchange 的值

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

这是使用 lambda 表达式更新 NameFilter 属性的方法：

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

注意：change 事件只有在你跳出文本框控件时才会触发，这种行为可能不符合你的过滤要求。另一方面，每次您在键盘上键入时都会发生输入事件。

使用输入事件：

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

或者您可以使用这样的随附方法来完成：

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

和

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

祝你好运...

Answer 2

>= 网络7

引用Blazor 数据绑定 get/set/after 修饰符

在 .NET 7 中，您现在可以使用新的 @bind:after 修饰符在绑定事件完成后轻松运行异步逻辑：

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

@code {
    string searchText;

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

也有用：

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

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