Blazor での API 呼び出し中の UI ブロックを防ぐにはどうすればよいですか?

Blazor での API 呼び出し中のノンブロッキング UI 更新

Blazor アプリケーションで API 呼び出しを行うときは、アクションが適切であることを示すフィードバックをユーザーに提供することが重要です。進行中。これは、スピナーまたは待機カーソルを表示することで実現できます。

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

この方法には、非同期タスクの実行と await Task.Delay(1) の組み込みが含まれます。その中で。これにより、長時間実行操作が開始される前に、変更をフラッシュして UI を更新できます。

private async Task AsyncLongFunc()
{
    spinning = true;
    await Task.Delay(1); // Flushing changes
    LongFunc(); // Non-async code
    currentCount++;
    spinning = false;
    await Task.Delay(1); // Flushing changes again
}

オプション 2: Task.Run() を使用する (WebAssembly には非対応)

これこのアプローチには、長時間実行される操作をタスク内に囲み、メインスレッドをブロックしないようにすることが含まれます。

async Task AsyncLongOperation()
{
    spinning = true;
    await Task.Run(() => LongOperation()); // Enclose in a task
    currentCount++;
    spinning = false;
}

効果と制限事項

どちらのメソッドも API 呼び出し中にスピナーを効果的に表示します。ただし、Blazor サーバー アプリでサーバー側の事前レンダリングが有効になっている場合、スピナーは表示されない場合があります。これを解決するには、長時間の操作を OnAfterRender イベントで処理する必要があります。

サンプル プロジェクト

Blazor アプリケーションにスピナーを実装するためのその他の例とテクニックについては、オープン ソース プロジェクト BlazorPro.Spinkit を参照してください。

以上がBlazor での API 呼び出し中の UI ブロックを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。