在 blazor 中单击按钮时执行异步方法

Question

我创建了一个“Razor 组件”项目。我试图在按下按钮时执行异步方法，但还无法弄清楚语法。

这是我的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);
    }
}

当我点击按钮时，没有任何反应。我尝试了各种 return 类型（例如 Task）和东西，但无法弄清楚如何让它工作。如果我需要提供更多信息，请告诉我。

每个文档/教程仅适用于单击按钮时的非异步无效调用。

提前致谢。

Answer 1

你需要正确调用Delete方法并使之成为returnTask而不是void:

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

@functions {

    // ...

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

Answer 2

@WoIIe, 1. 使用 lambda 表达式作为 onclick 属性的值的目的是让您可以将值传递给 Delete 方法。如果您已经在代码中定义了一个 person 对象，则不必使用 lambda 表达式。只需执行此操作：onclick = "@Delete"，然后从 Delete 方法访问 person.Id。

你是不是第二次点击了按钮？我相信这段代码：await this.PersonRepository.Delete(personId); 确实执行了，但是您在 GUI 上没有看到任何响应，因为不推荐使用 void，它需要您调用 StateHasChanged()；手动重新渲染。请注意，当您的方法 "ended" 时，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);
}
}

注意：如果您还没有解决问题，请展示您的所有代码

在 blazor 中单击按钮时执行异步方法

Execute async method on button click in blazor

c#

razor

blazor

blazor-server-side

razor-components