Wie kann ich den Text "Verbindung zum Server konnte nicht wiederhergestellt werden" in Blazor ändern?

10

Ich verwende die Blazor-Serverseite.

Wenn die Blazor-App die Verbindung zum Remote-Server trennt, wird Folgendes angezeigt:

Geben Sie hier die Bildbeschreibung ein

Ich möchte den Text ('Verbindung zum Server konnte nicht wiederhergestellt werden ...' usw.) des obigen Bildes ändern.

Ich möchte es in die Sprache unseres Landes ändern.

Ich habe die Datei des Projekts gefunden, aber nichts darüber gefunden.

Wie kann ich das ändern? Vielen Dank.

Melone NG
quelle

Antworten:

14

Die Blazor-App prüft, ob die Seite ein HTML-Element mit id = enthält{dialogId} :

  1. Wenn ein solches Element nicht vorhanden ist, wird der Standardhandler zum Anzeigen der Nachricht verwendet.
  2. Wenn dieses Element vorhanden ist, lautet dieses Element class:
    • Stellen Sie ein, wie components-reconnect-showbeim Versuch, die Verbindung zum Server wiederherzustellen.
    • Festlegen, components-reconnect-failedwann keine Verbindung zum Server hergestellt werden konnte.
    • Stellen Sie ein, als components-reconnect-refusedob der Browser den Server erreicht, während der Server die Verbindung aktiv ablehnt

Standardmäßig ist das dialogIdist components-reconnect-modal. Sie können also ein Element auf der Seite erstellen und mithilfe von CSS den Inhalt und die Stile nach Ihren Wünschen steuern.

Demo:

Zum Beispiel erstelle ich drei Teile des Inhalts, die in folgenden Bereichen angezeigt werden sollen Pages/_Host.cshtml:

<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>

Und dann fügen wir etwas CSS hinzu, um den Stil zu steuern:

<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>

Schließlich wird die folgende Meldung angezeigt, wenn versucht wird, eine Verbindung herzustellen, oder wenn keine Verbindung hergestellt werden kann:

Geben Sie hier die Bildbeschreibung ein

itminus
quelle
Das ist eine gute Informationen, aber wo ist jeder dieser dokumentiert auf Microsoft Docs?
Aaron Hudon
2
@AaronHudon Siehe offizielle Dokumente hier
am
Vielen Dank. Seltsam, dass sie es unter Hosting-Modelle setzen
Aaron Hudon
@AaronHudon, weil es nur auftritt, wenn wir Blazor Server Side Modell verwenden :)
itminus
1
Es scheint, dass diese Informationen hierher verschoben wurden .
drs9222
9

Für die Javascript-Seite macht Blazor eine winzige API über das window.BlazorObjekt verfügbar .

Ein Teil dieser API ist die defaultReconnectionHandler, mit der Sie die Wiederverbindungserfahrung anpassen können, einschließlich der Einstellung verschiedener Optionen für die Anzahl der Wiederholungsversuche usw.

Es ist jedoch auch möglich, die Logik für die Anzeige des einfach auszutauschen ReconnectionDisplay

Eine einfache Implementierung sieht folgendermaßen aus und ermöglicht es Ihnen, den Prozess zu steuern:

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();
Postlagerkarte
quelle
Nun, es ist auch ein Weg, es zu lösen. Aber ich bevorzuge @itminus 'Weg mehr. Trotzdem danke.
Melon NG
Sicher, es hängt von Ihrem Anwendungsfall ab. Wenn Sie mehr Kontrolle benötigen (z. B. benutzerdefinierten Code ausführen, wenn die Verbindung fehlschlägt), ist die Verwendung der API der richtige Weg. Wenn Sie nur die Benutzeroberfläche austauschen möchten, können Sie den Vorschlag von @itminus verwenden.
Postlagerkarte