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

时间:2019-04-03 14:03:30

标签: c# razor blazor blazor-server-side 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)和其他东西,但无法弄清楚如何使其工作。如果需要提供更多信息,请告诉我。

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

谢谢。

2 个答案:

答案 0 :(得分:3)

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

  1. 您是否第二次单击该按钮?我相信这段代码:await this.PersonRepository.Delete(personId);确实执行了,但是您在GUI上没有看到任何响应,因为不建议使用void,这要求您调用StateHasChanged();。手动重新渲染。请注意,在方法“结束”时,StateHasChanged()已被自动调用一次,但是由于您使用了void而非任务,因此应再次调用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);
}
}

注意:如果您仍未解决问题,请显示所有代码

答案 1 :(得分:2)

您需要正确地调用""方法,并使其返回Delete而不是Task

void