Выполнить асинхронный метод по нажатию кнопки в Blazor

Question

Я создал проект "Razor Components". Я пытаюсь выполнить асинхронный метод при нажатии кнопки, но пока не могу понять синтаксис.

Это мой 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);
    }
}

Когда я нажимаю кнопку, ничего не происходит. Я пробовал различные типы возврата (например, Task) и прочее, но не могу понять, как заставить это работать. Пожалуйста, дайте мне знать, если мне нужно предоставить больше информации.

Каждая документация / учебник работает только с не асинхронными пустыми вызовами по нажатию кнопки.

Заранее спасибо.

Answer 1

Вам нужно позвонить Delete метод правильно и заставить его вернуться Task вместо void:

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

@functions {

    // ...

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

Answer 2

@WoIIe, 1. Цель использования выражения lambada в качестве значения для атрибута onclick состоит в том, чтобы вы могли передать значение в метод Delete. Если вы уже определили объект person в своем коде, вам не нужно использовать выражение lambada. Просто сделай это: onclick = "@Delete"и доступ к person.Id из метода Delete.

2. Вы нажали кнопку второй раз? Я считаю, что этот код: await this.PersonRepository.Delete(personId); выполнил, но вы не видели ответа на GUI, потому что использование void, которое не рекомендуется, требует от вас вызова StateHasChanged(); вручную перерисовать. Обратите внимание, что StateHasChanged () уже автоматически вызывался один раз, когда ваш метод "закончился", но, поскольку вы использовали void, а не task, вы должны вызвать StateHasChanged () еще раз, чтобы увидеть изменения. Но не делай этого. Смотрите ответ DavidG, как правильно кодировать.

Это также, как вы можете кодировать:

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

@functions {

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

Больше кода согласно запросу...

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

Примечание. Если проблемы все еще не решены, покажите весь код