web-dev-qa-db-ja.com

Blazorで「サーバーに再接続できませんでした」というテキストを変更するにはどうすればよいですか？

Blazorサーバー側を使用しています。

Blazorアプリがリモートサーバーへの接続を切断すると、次のように表示されます。

enter image description here

上記の画像のテキスト（「サーバーに再接続できませんでした...」など）を変更したいと思います。

私の国の言語に変更したいと思います。

プロジェクトのファイルは見つかりましたが、何も見つかりませんでした。

どうすれば変更できますか？ありがとうございました。

asp.net-core.net-coreblazor
10
Melon NG

Blazorアプリは、ページにid = {dialogId}のhtml要素があるかどうかを確認します。

  1. そのような要素が存在しない場合は、デフォルトのハンドラーを使用してメッセージを表示します。
  2. この要素が存在する場合、この要素のclassは：になります。
    • サーバーへの再接続を試みる場合はcomponents-reconnect-showとして設定されます。
    • サーバーへの接続に失敗した場合はcomponents-reconnect-failedとして設定されます。
    • サーバーが接続をアクティブに拒否しているときにブラウザがサーバーに到達する場合は、components-reconnect-refusedとして設定します

デフォルトでは、dialogIdはcomponents-reconnect-modalです。したがって、ページに要素を作成し、CSSを使用してコンテンツとスタイルを自由に制御できます。

デモ：

たとえば、Pages/_Host.cshtml内に表示するコンテンツの3つの部分を作成します。

<div id="components-reconnect-modal" class="my-reconnect-modal components-reconnect-hide">
    <div class="show">
        <p>
            This is the message when attempting to connect to server
        </p>
    </div>
    <div class="failed">
        <p>
            This is the custom message when failing 
        </p>
    </div>
    <div class="refused">
        <p>
            This is the custom message when refused
        </p>
    </div>
</div>

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

<script src="_framework/blazor.server.js"></script>

次に、スタイルを制御するCSSを追加します。

<style>
    .my-reconnect-modal > div{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        overflow: hidden;
        background-color: #fff;
        opacity: 0.8;
        text-align: center;
        font-weight: bold;
    }
    .components-reconnect-hide > div
    {
        display: none;
    }

    .components-reconnect-show > div
    {
        display: none;
    }
    .components-reconnect-show > .show
    {
        display: block;
    }

    .components-reconnect-failed > div
    {
        display: none;
    }
    .components-reconnect-failed > .failed
    {
        display: block;
    }

    .components-reconnect-refused >div
    {
        display: none;
    }
    .components-reconnect-refused > .refused
    {
        display: block;
    }
</style>

最後に、接続しようとしたとき、または接続に失敗したときに、次のメッセージが表示されます。

enter image description here

12
itminus

物事のJavaScript側では、Blazorはwindow.Blazorオブジェクトを介して小さなAPIを公開します。

このAPIの一部はdefaultReconnectionHandlerで、再試行回数などのさまざまなオプションの設定など、再接続エクスペリエンスをカスタマイズできます。

ただし、ReconnectionDisplayを表示するためのロジックを交換することもできます。

単純な実装は次のようになり、プロセスを制御できるようになります。

function createOwnDisplay() {
    return {
        show: () => { alert("put code that shows a toast , ui, or whaterver here"); },
        hide: () => { console.log('foo'); },
        failed: () => { console.log('foo'); },
        rejected: () => { console.log('foo'); }
    };
}

Blazor.defaultReconnectionHandler._reconnectionDisplay = createOwnDisplay();
8
Postlagerkarte