スポンサーリンク

Blazor Server の画面で処理中オーバーレイを表示する

.NET CoreBlazor Server 5.0C#

※最新記事はこちら -> Blazor Server で実現する最もシンプルな非同期処理の実装

.Net Core 5.0 で、Blazor Server 画面を実装中、EFCoreを使ったDB処理と、Blazor画面との連携で、DB処理の非同期化が上手くいかず、「処理中オーバーレイ」が表示されずハマった。
・StateHasChanged() 実行箇所を増やしても解消せず。
・O/Rマッパーを、EFCoreではなく、Dapperに変更しても解消せず。
・await Task.Delay(1); を実行し、スレッドを画面に強制的に一旦戻すことで解消。

実装した 「処理中オーバーレイ」 画面。
処理ボタンがクリックされたら、前面に回転するオブジェクトをオーバーレイで表示し、裏面の画面操作を禁止する。

オーバーレイを表示しているRazorページ。

処理中はオーバーレイを表示し、処理が終わったらオーバーレイを非表示にしている、 Razorページのイベントハンドラ。

コメント

タイトルとURLをコピーしました