Comment puis-je modifier le texte «Impossible de se reconnecter au serveur» dans Blazor?

J'utilise le côté serveur Blazor.

Lorsque l'application Blazor se déconnecte du serveur distant, elle affiche ceci:

Je souhaite modifier le texte («Impossible de se reconnecter au serveur ...», etc.) de l'image ci-dessus.

Je veux le changer dans la langue de notre pays.

J'ai trouvé le fichier du projet mais je n'ai rien trouvé à ce sujet.

Comment puis-je le changer? Je vous remercie.

L'application Blazor vérifiera s'il y a un élément html avec id ={dialogId} dans la page:

1. Si un tel élément n'existe pas, il utilisera le gestionnaire par défaut pour afficher le message.
2. Si cet élément existe, cet élément classsera:
   • défini comme components-reconnect-showlors d'une tentative de reconnexion au serveur,
   • défini comme components-reconnect-failedlorsqu'il n'a pas réussi à se connecter au serveur.
   • défini comme components-reconnect-refusedsi le navigateur atteignait le serveur pendant que le serveur rejetait activement la connexion

Par défaut, le dialogIdest components-reconnect-modal. Vous pouvez donc créer un élément dans la page et utiliser CSS pour contrôler le contenu et les styles comme vous le souhaitez.

Démo:

Par exemple, je crée trois parties de contenu à afficher dans 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>

Et puis ajoutons du CSS pour contrôler le style:

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

Enfin, nous obtiendrons le message suivant lorsque vous tentez de vous connecter ou que vous ne vous connectez pas:

Pour le côté javascript des choses, Blazor expose une toute petite API via l' window.Blazorobjet.

Une partie de cette API est la defaultReconnectionHandlerqui vous permet de personnaliser l'expérience de reconnexion, y compris la définition de différentes options pour le nombre de retrys, etc.

Cependant, il est également possible d'échanger simplement la logique d'affichage du ReconnectionDisplay

Une implémentation simple ressemble à ceci et vous permet de contrôler le processus:

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