Blazor で長時間実行される API 呼び出し中にユーザー フィードバックを動的に表示するにはどうすればよいですか?

Blazor での API 呼び出し中にユーザー フィードバックを動的に表示する

Blazor では、長時間実行される API 呼び出しを処理するには、次のようなフィードバックをユーザーに提供する必要があります。待機カーソルまたは「スピナー」イメージを表示します。この記事では、これを実現するための 2 つのアプローチを紹介します。

オプション 1: Task.Delay(1) を使用する

• 非同期メソッドを作成します。
• await Task.Delay(1) を使用します。または Task.Yield(); を待ちます。

private async Task AsyncLongFunc()    // this is an async task
{
    spinning=true;
    await Task.Delay(1);      // flushing changes. The trick!!
    LongFunc();               // non-async code
    currentCount++;
    spinning=false;
    await Task.Delay(1);      // changes are flushed again    
}

オプション 2: Task.Run() を使用する (WebAssembly ではない)

長い操作を囲むタスクを作成する:

async Task AsyncLongOperation()    // this is an async task
{
    spinning=true;
    await Task.Run(()=> LongOperation());  //<--here!
    currentCount++;
    spinning=false;
}

への影響プリレンダリング

Blazor サーバー アプリでは、プリレンダリングによりスピナーが表示されない場合があります。これを解決するには、OnInitializedAsync ではなく OnAfterRender で長い操作を実行します。

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {            
        await Task.Run(()=> LongOperation());//<--or Task.Delay(0) without Task.Run
        StateHasChanged();
    }
}

効果的なスピナーの実装についてさらに詳しく知りたい場合は、オープンソース プロジェクト BlazorPro.Spinkit を調べてください。

以上がBlazor で長時間実行される API 呼び出し中にユーザー フィードバックを動的に表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。