web-dev-qa-db-fra.com

Comment lier et exécuter une méthode asynchrone lors d'un changement d'entrée dans Blazor

Je construis donc un composant Blazor dans lequel je veux taper dans une entrée et lancer une requête AJAX pour obtenir des données filtrées du serveur. J'ai essayé ceci

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

Cependant, cela entraîne une erreur

L'attribut "onchange" est utilisé deux ou plusieurs fois pour cet élément. Les attributs doivent être uniques (insensibles à la casse). L'attribut 'onchange' est utilisé par l'attribut de directive '@bind'.

J'ai pensé à appeler la méthode dans le setter de propriété NameFilter mais dans ce cas je ne peux pas l'attendre. Quelle est la bonne manière d'atteindre le comportement souhaité?

c#asp.netblazor
3
Stilgar

L'attribut @bind est un attribut de directive du compilateur demandant au compilateur de créer un code permettant la liaison de données bidirectionnelle, d'une variable à l'élément et de l'élément à la variable. Derrière la scène, le compilateur crée le gestionnaire d'événements onchange dont le rôle est de mettre à jour la variable lorsque l'événement de modification est déclenché. Ainsi, vous ne pouvez pas utiliser onchange deux fois. Au lieu de cela, vous devez faire ce qui suit:

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

Pour récupérer les données saisies, définissez une propriété comme celle-ci:

public string NameFilter { get; set; }

Dans ce cas, vous pouvez ajouter un contrôle de bouton avec un gestionnaire d'événements de clic qui peut accéder à la valeur de NameFilter et l'utiliser pour vos appels de filtrage, comme ceci:

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

Et,

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

Ou mieux encore, liez la variable NameFilter à l'attribut value, en plus de définir un gestionnaire d'événements, comme ceci:

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

Mais dans ce cas, il est de votre responsabilité de mettre à jour la variable liée, ce que vous pouvez faire dans le gestionnaire d'événements lui-même, ou en utilisant une expression lambada comme valeur de @onchange

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

Voici comment mettre à jour la propriété NameFilter avec une expression lambada:

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

Remarque: l'événement de modification est déclenché uniquement lorsque vous quittez le contrôle de zone de texte et ce comportement peut ne pas répondre à vos exigences de filtrage. L'événement d'entrée, en revanche, se produit chaque fois que vous tapez sur le clavier.

Utilisation de l'événement d'entrée:

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

Ou vous pouvez le faire avec une méthode d'accompagnement comme celle-ci:

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

et

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

Bonne chance...

7
enet