Come posso modificare il testo "Impossibile riconnettersi al server" in Blazor?

Sto usando il Blazor lato server.

Quando l'app Blazor si disconnette dal server remoto, mostrerà questo:

Voglio cambiare il testo ("Impossibile riconnettersi al server ..." e così via) dell'immagine qui sopra.

Voglio cambiarlo nella lingua del nostro paese.

Ho trovato il file del progetto ma non ho trovato nulla al riguardo.

Come posso cambiarlo? Grazie.

L'app Blazor verificherà se esiste un elemento html con id ={dialogId} nella pagina:

1. Se tale elemento non esiste, utilizzerà il gestore predefinito per visualizzare il messaggio.
2. Se questo elemento esiste, questo classsarà:
   • impostato come components-reconnect-showquando si tenta di riconnettersi al server,
   • impostato come components-reconnect-failedquando non è stato possibile connettersi al server.
   • impostato come components-reconnect-refusedse il browser raggiungesse il server mentre il server rifiuta attivamente la connessione

Per impostazione predefinita, dialogIdè components-reconnect-modal. Quindi puoi creare un elemento nella pagina e usare i CSS per controllare il contenuto e gli stili come preferisci.

demo:

Ad esempio, creo tre parti di contenuto da visualizzare all'interno di 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>

E quindi aggiungiamo alcuni CSS per controllare lo stile:

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

Infine, verrà visualizzato il seguente messaggio quando si tenta di connettersi o non ci si connette:

Per quanto riguarda il lato javascript, Blazor espone una piccola API tramite l' window.Blazoroggetto.

Una parte di questa API è quella defaultReconnectionHandlerche ti consente di personalizzare l'esperienza di riconnessione includendo l'impostazione di diverse opzioni per il numero di retrys ecc.

Tuttavia, è anche possibile scambiare la logica per visualizzare il file ReconnectionDisplay

Una semplice implementazione è simile a questa e ti consente di ottenere il controllo del processo:

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();