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

10

J'utilise le côté serveur Blazor.

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

entrez la description de l'image ici

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.

Melon NG
la source

Réponses:

14

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:

entrez la description de l'image ici

itminus
la source
Ce sont de bonnes informations, mais où tout cela est -il documenté sur Microsoft Docs?
Aaron Hudon
2
@AaronHudon Voir les documents officiels ici
itminus
Merci. Étrange qu'ils l'aient placé sous des modèles d'hébergement
Aaron Hudon
@AaronHudon car cela ne se produit que si nous utilisons le modèle Blazor Server Side :)
itminus
1
Il semble que ces informations soient déplacées ici .
drs9222
9

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();
Postlagerkarte
la source
Eh bien, c'est aussi un moyen de le résoudre. Mais je préfère le moyen de @itminus davantage. Merci tout de même.
Melon NG
Bien sûr, cela dépend de votre cas d'utilisation. Si vous avez besoin de plus de contrôle (par exemple, exécuter du code personnalisé lorsque la connexion échoue), l'utilisation de l'API est la solution. Si vous souhaitez simplement échanger l'interface utilisateur, vous pouvez utiliser la suggestion @itminus.
Postlagerkarte