Blazorアプリケーションでサーバーとの接続が切断された際のオーバーレイメッセージを表示しないようにするコードを紹介します。
概要
こちらの記事では、
Blazorアプリケーションでサーバーとの接続が切断された場合やアプリケーションプールが中断された際に、
"Application attempting to reconnect to the server" メッセージが表示される動作について紹介しました。
メッセージが表示されると、アプリケーションの画面がメッセージで隠され、操作が全くできなくなってしまうため、
オーバーレイのメッセージを表示させたくない場合があります。
この記事では、サーバーとの接続が切断された際のオーバーレイメッセージを非表示にするコードを紹介します。
注意
この記事で紹介する方法はメッセージを非表示にするのみです。サーバーとの接続が切断されセッション情報が復帰できない場合は、
リロードしてページを再読み込みしない限りはアプリケーションは動作しない状態のままとなります。
実装
コード
MapFallbackToPageに与えたフォールバックページ、一般的な名称では _Host.cshtml ファイルに
components-reconnect-modal のidを持つ要素を記述します。
タグ内は空とします。
@page
@namespace SimpleTextBox.Pages
<!DOCTYPE html>
<html lang="ja">
<head>
<base href="~/" />
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
@page
@namespace SimpleTextBox.Pages
<!DOCTYPE html>
<html lang="ja">
<head>
<base href="~/" />
</head>
<body>
<div id="components-reconnect-modal"></div>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
実行結果
プロジェクトを実行しアプリケーションのページにアクセスします。
アプリケーションを動作させます。
サーバーでアプリケーションプールを停止します。
アプリケーションプールを停止すると、デフォルトの動作では "Application attempting to reconnect to the server" の
オーバーレイメッセージが表示されますが、メッセージが表示されない動作になります。
メッセージは表示されず、画面は見えますが、アプリケーションは動作しません。テキストボックスに別の値を入力し、ボタンをクリックしても画面は変化しません。
また、サーバーでアプリケーションプールを再開しても、セッション情報が失われたままのため、
"Could not reconnect to the server. Reload the page to restore functionality." のエラーが出ている状態であり、
ページをリロードしない限りは、アプリケーションは動作しないままです。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2023-03-02
作成日: 2023-03-02
