web-dev-qa-db-ja.com

ブレザーのボタンクリックで非同期メソッドを実行する

「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呼び出しでのみ機能します。

前もって感謝します。

c#razorblazorblazor-server-siderazor-components
10
WoIIe

Deleteメソッドを適切に呼び出して、Taskではなくvoidを返すようにする必要があります。

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

@functions {

    // ...

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

@WoIIe、1. onclick属性の値としてラムダ式を使用する目的は、Deleteメソッドに値を渡すことができるようにすることです。コードでpersonオブジェクトを既に定義している場合は、ラムダ式を使用する必要はありません。これを行うだけです：_onclick = "@Delete"_、およびDeleteメソッドからperson.Idにアクセスします。

  1. もう一度ボタンをクリックしましたか？このコードはawait this.PersonRepository.Delete(personId);は実行されたと思いますが、推奨されていないvoidを使用するとStateHasChanged（）;を呼び出す必要があるため、GUIには応答がありません。手動で再レンダリングします。メソッドが「終了」したときにStateHasChanged（）がすでに自動的に1回呼び出されていることに注意してください。ただし、Taskではなく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);
}
}
_

注：それでも問題が解決しない場合は、すべてのコードを表示してください

8
enet