web-dev-qa-db-ja.com

ASP.NET Core本番サーバーで「サーバーに再接続しようとしています」メッセージを無効にする方法

ASP.NET Core 3.1 C＃かみそりページアプリケーションがあり、これもいくつかのBlazorサーバー側かみそりコンポーネントを使用しています。私はそれをIISに公開しています。しかし、Chrome 1つのandorid携帯電話でサイトを閲覧すると、定期的にメッセージが表示されます：

サーバーに再接続しようとしています

また、ユーザーがしばらく非アクティブなままの場合も同様です。携帯電話のディスプレイをオフにすると、メッセージが表示されます

サーバーから切断。ページを再読み込み...

このサイトは英語ではなく、これらの一般的なメッセージはエンドユーザーの経験には適していません。それらのメッセージを無効にする方法、または少なくともそれらを別の言語に翻訳する方法はありますか？

c#asp.net-corerazor-pagesblazor-server-sideasp.net-core-3.1
5
Vojtěch Dohnal

これまでのところ、サーバー側のBlazorコンポーネントを含まないページでBlazorオーバーレイを無効にする方法を見つけました。それは非常に簡単です。空のインターフェースIPageWithBlazorを作成し、サーバーサイドのBlazorを含むかみそりページのすべてのモデルにこの空のインターフェースを実装させました。これで、_Layout.cshtmlで次の条件を使用できます。

@if (this.Model is IPageWithBlazor)
{
    <script type="text/javascript" src="~/js/blazor.polyfill.min.js"></script>
    <script src="~/_framework/blazor.server.js"></script>
}

メッセージの翻訳については トピックをカバーする別の質問 があります。

0
Vojtěch Dohnal

実際、サーバー側のBlazorにも答えがあります。これによると： ASP.NET Core Blazorホスティングモデル 、表示されるオーバーレイを操作するために、_components-reconnect-modal_の本文にid __Host.cshtml_のdiv要素を定義できます。接続が失われた場合。

これは次のようになります。

_<body>
...
<!-- Blazor overlay -->
<div id="components-reconnect-modal"></div>

<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
...
</body>
_

Blazorは、アプリの状態に応じてこれらのカスタムクラスを適用します。ドキュメントによると、これらのクラスは有効です：

  • _components-reconnect-show_：接続が失われました。クライアントは再接続を試みています。モーダルを表示します。次に、CSSを使用してスクリーンオーバーレイにカスタムスタイルを適用できます。それらをすべて削除したい場合は、まったく表示しないように選択できます。
  • _components-reconnect-hide_：サーバーへのアクティブな接続が再確立されます。モーダルを非表示にします。
  • _components-reconnect-failed_：おそらくネットワーク障害が原因で、再接続に失敗しました。再接続を試みるには、window.Blazor.reconnect()を呼び出します。
  • _components-reconnect-rejected_：再接続が拒否されました。サーバーに到達しましたが接続を拒否し、サーバー上のユーザーの状態は失われました。アプリをリロードするには、location.reload()を呼び出します。

たとえば、オーバーレイを完全に非表示にするには、次のCSSを追加できます。

_.components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected {
     display: none;
}
_

オーバーレイのカスタム外観が必要な場合は、__Host.cshtml_のdivに好みのコンテンツを入力するだけです。

_<div id="components-reconnect-modal" class="my-reconnect-modal components-reconnect-hide">
<div class="show">
    <p>
        // Message when attempting to connect to server
    </p>
</div>
<div class="failed">
    <p>
        // Message when failing to connect
    </p>
</div>
<div class="rejected">
    <p>
        // Message when refused
    </p>
</div>
_

サーバー側のBlazorでしか機能しないため、これがクライアント側で機能するかどうかはわかりません。これがうまくいくことを願っています。

5
Christiaan Bruin