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

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

3 голосов
/ 03 апреля 2019

Я создал проект "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) и прочее, но не могу понять, как заставить это работать. Пожалуйста, дайте мне знать, если мне нужно предоставить больше информации.

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

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

Ответы [ 2 ]

5 голосов
/ 03 апреля 2019

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

  1. Вы нажали кнопку второй раз? Я считаю, что этот код: 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);
}
}

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

3 голосов
/ 03 апреля 2019

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

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

@functions {

    // ...

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