web-dev-qa-db-fra.com

Exécuter la méthode asynchrone sur le clic du bouton dans le blazor

J'ai créé un projet "Razor Components". J'essaie d'exécuter une méthode asynchrone en appuyant sur un bouton, mais je n'ai pas encore pu comprendre la syntaxe.

Ceci est mon Index.razor:

@page "/"
@inject GenericRepository<Person> PersonRepository 

// ...

@foreach (var person in persons)
{
    <button onclick="@(() => Delete(person.Id))">❌</button>
}

@functions {

    // ...

    async void Delete(Guid personId)
    {
        await this.PersonRepository.Delete(personId);
    }
}

Lorsque je clique sur le bouton, rien ne se passe. J'ai essayé différents types de retour (par exemple Task) et d'autres choses, mais je ne sais pas comment le faire fonctionner. Veuillez me faire savoir si j'ai besoin de fournir plus d'informations.

Chaque documentation/tutoriel ne fonctionne qu'avec des appels non asynchrones sur le clic de bouton.

Merci d'avance.

c#razorblazorblazor-server-siderazor-components
10
WoIIe

Vous devez appeler correctement la méthode Delete et lui faire renvoyer Task au lieu de void:

<button onclick="@(async () => await Delete(person.Id))">❌</button>

@functions {

    // ...

    async Task Delete(Guid personId)
    {
        await this.PersonRepository.Delete(personId);
    }
}
12
DavidG

@WoIIe, 1. Le but de l'utilisation d'une expression lambda comme valeur pour l'attribut onclick est de sorte que vous puissiez transmettre une valeur à la méthode Delete. Si vous avez déjà défini un objet personne dans votre code, vous n'avez pas besoin d'utiliser une expression lambda. Faites simplement ceci: onclick = "@Delete", Et accédez à person.Id à partir de la méthode Delete.

  1. Avez-vous cliqué sur le bouton une deuxième fois? Je crois que ce code: await this.PersonRepository.Delete(personId); s'est exécuté, mais vous n'avez vu aucune réponse sur l'interface graphique car l'utilisation de void, ce qui n'est pas recommandé, vous oblige à appeler StateHasChanged (); manuellement pour effectuer un nouveau rendu. Notez que StateHasChanged () a déjà été automatiquement appelé une fois lorsque votre méthode "s'est terminée", mais puisque vous retournez void et non Task, vous devez appeler StateHasChanged () à nouveau pour voir les changements. Mais ne le fais pas. Voir la réponse de DavidG comment coder correctement.

Voici également comment coder:

<button onclick="@Delete">Delete Me</button>

@functions {

    Person person = new Person();
    //....
    async Task Delete()
    {
        await this.PersonRepository.Delete(person.Id);
    }
}

Plus de code selon la demande ...

 foreach(var person in people)
    {
        <button onclick="@(async () => await Delete(person.Id))">Delete</button>
    }

@functions {
  // Get a list of People.
  List<Person> People ;

protected override async Task OnParametersSetAsync()
{
    People = await this.PersonRepository.getAll();
}

async Task Delete(Guid personId)
{
     await this.PersonRepository.Delete(personId);
}
}

Remarque: Si vous n'avez toujours pas résolu vos problèmes, montrez tout votre code

8
enet