web-dev-qa-db-ja.com

Blazorで入力変更時に非同期メソッドをバインドして実行する方法

したがって、入力に入力してAJAXリクエストを発行してサーバーからフィルターされたデータを取得する必要がある場所に、Blazorコンポーネントを構築しています。これを試しました

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

ただし、これはエラーになります

属性 'onchange'がこの要素に2回以上使用されています。属性は一意である必要があります（大文字と小文字は区別されません）。属性「onchange」は「@bind」ディレクティブ属性によって使用されます。

NameFilterプロパティセッターでメソッドを呼び出すことを考えましたが、この場合は待ちきれません。望ましい動作を実現するための適切な方法は何ですか？

c#asp.netblazor
3
Stilgar

@bind属性は、変数から要素への、および要素から変数への双方向のデータバインディングを可能にするコードを作成するようにコンパイラーに指示するコンパイラー指示属性です。舞台裏で、コンパイラーは、変更イベントがトリガーされたときに変数を更新する役割を持つonchangeイベントハンドラーを作成します。したがって、onchangeを2回使用することはできません。代わりに、次のことを行う必要があります。

<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" />

ただし、その場合は、バインドされた変数を更新する必要があります。これは、イベントハンドラー自体で行うか、@ onchangeの値としてラムバダ式を使用して行うことができます。

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

これは、Lambada式でNameFilterプロパティを更新する方法です。

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

注：変更イベントは、テキストボックスコントロールからタブで移動したときにのみトリガーされます。この動作は、フィルタリング要件に適さない場合があります。一方、入力イベントは、キーボードで入力するたびに発生します。

入力イベントの使用：

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

幸運を...

7
enet