スポンサーリンク
DC SHOES(ディーシーシューズ)
スポンサーリンク
au PAY マーケット

Blazor Server で実現する最もシンプルな非同期処理の実装

.NET CoreASP.NET CoreBlazor Server 5.0C#Visual Studio 2019ウェブ・技術開発方式

Blazor Server で実現できる最もシンプルな非同期処理のサンプルを作ったので参考にしてほしい。ソースコードはGitHubで公開しました。

※この作りをJavaScriptを書かずに簡単に実装できるのが、Blazor Server の生産性の高さの真髄。

ソースコード構成

Visual Studio プロジェクト の Blazor Server テンプレートに、LoadingOverlay.razor LoadingOverlay.razor.css を追加し、Counter.razor を少し修正したのみ。

ソースコード変更内容を解説

LoadingOverlay.razor

・パーツ化した「処理中…」画面。
・Visibleパラメータ変数で、「処理中…」画面<div>の表示/非表示を、if (Visible) で切り替えてる。

LoadingOverlay.razor.css

・「処理中…」画面パーツ専用のCSS。
・「z-index: 999991」で「処理中…」画面パーツを最前面に表示している。
・画面全体を覆う「処理中…」 を最前面に表示することで、処理実行中にボタンを連打されたり、処理が終わる前に他の処理が開始されるのを防げる。

Counter.razor

・「処理中…」画面パーツを使用しているサンプル画面。
・JsRuntime.InvokeAsync()を使い、一般的な動きとしての確認メッセージ/完了メッセージを、JavaScriptの confirm/alert で実装。
・<LoadingOverlay Visible=”@IsLoadingOverlay”> で「処理中…」画面パーツを組み込み、IsLoadingOverlay変数で「処理中…」画面の表示/非表示を切り替えている。
・IsLoadingOverlay変数の変化は StateHasChanged() を実行することでブラウザへ反映している。
・ボタンクリック時の、IncrementCount() イベントハンドラ内の処理は全て同期で実装していますが、処理が完了するまで「処理中…」画面を前面に表示することで、ユーザーから見た動きは非同期になっています。
・(重要)イベントハンドラ内の処理を全て、サービス化せずに非同期に実装できるということは、ソースコードの実装がとてもシンプルになるということ。
 同期で実装できるということは、ビジネスロジックを全て static class で実装し、パフォーマンスを上げることが可能ということ。データはインスタンスクラスで各staticメソッドに流して行くイメージ。
・ ビジネスロジック() メソッドのように、Blazor Server の変数名、メソッド名には日本語を使える。日本人は日本語を多用してプログラムを書いた方が、色々とスムーズに進むと常々思う。

StateHasChanged() 補足

.Net Core 5.0の初期の頃、StateHasChanged() を実行しても、変数の変化がブラウザに反映されないことがあった。その際は、await Task.Delay(1) を加えスレッドが切り替わるタイミングを作ることで解消した。
.Net Core 5.0 の最新版でも、OnInitializedAsync() イベントハンドラ、<EditForm>のOnValidSubmitイベントハンドラでは、 await Task.Delay(1) を加えないと StateHasChanged() が上手く機能しない。
Blazor Server の画面で処理中オーバーレイを表示する

Blazor Server の仕組みについて

_Host.cshtml

・_Host.cshtml に _framework/blazor.server.js が組み込まれていますが、blazor.server.js が Blazor Server のフロント側の本体です。
・ blazor.server.js がミリ秒単位の頻度でWEBサーバからDOMを取得し、DOMに変化が有ればブラウザ側のHTMLへ反映し、ブラウザ上に表示されている画面をリアルタイムに変化させている。
・ WEBサーバ側のDOMは、StateHasChanged() を実行することで変化する。
・イベントハンドラ実行終了後は StateHasChanged() が自動実行される為、イベントハンドラの実行結果がブラウザに反映される動きに見える。

Visual Studio プロジェクト

今回使った Visual Studio プロジェクト テンプレートは、Blazor Server 5.0 の認証無し、HTTPS無しです。

コメント

スポンサーリンク
スポンサーリンク
生活雑貨
タイトルとURLをコピーしました