web-dev-qa-db-fra.com

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:

enter image description here

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.

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

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, le class de cet élément sera:
    • définir comme components-reconnect-show lorsque vous essayez de vous reconnecter au serveur,
    • définir comme components-reconnect-failed lorsqu'il n'a pas réussi à se connecter au serveur.
    • définir comme components-reconnect-refused si le navigateur atteint le serveur alors que le serveur rejette activement la connexion

Par défaut, le dialogId est 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 le 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:

enter image description here

12
itminus

Pour le côté javascript des choses, Blazor expose une minuscule API via le window.Blazor objet.

Une partie de cette API est le defaultReconnectionHandler qui 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 pour afficher le 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();
8
Postlagerkarte