web-dev-qa-db-fra.com

Comment désactiver le message «Tentative de reconnexion au serveur» sur le serveur du produit ASP.NET Core

J'ai une application de pages de rasoir ASP.NET Core 3.1 C # qui utilise également certains composants de rasoir Blazor-serverside. Je l'ai publié sur IIS sur Windows 2008 R2 Server. Mais lorsque vous naviguez sur le site dans Chrome sur un téléphone mobile andorid, un message apparaît régulièrement:

Tentative de reconnexion au serveur

Aussi lorsque l'utilisateur reste inactif pendant un certain temps, par ex. éteint l'écran du téléphone portable, un message apparaît

Déconnecté du serveur. Rafraîchir la page ...

Le site n'est pas en anglais et ces messages génériques ne sont pas bons pour l'expérience de l'utilisateur final. Existe-t-il un moyen de désactiver ces messages, ou au moins de les traduire dans une autre langue?

c#asp.net-corerazor-pagesblazor-server-sideasp.net-core-3.1
5
Vojtěch Dohnal

Jusqu'à présent, j'ai seulement trouvé un moyen de désactiver les superpositions Blazor sur des pages qui ne contiennent aucun composant Blazor côté serveur. C'est assez simple, j'ai créé une interface vide IPageWithBlazor et j'ai fait en sorte que tous les modèles de pages rasoir contenant Blazor côté serveur implémentent cette interface vide. Je peux maintenant utiliser la condition suivante dans _Layout.cshtml:

@if (this.Model is IPageWithBlazor)
{
    <script type="text/javascript" src="~/js/blazor.polyfill.min.js"></script>
    <script src="~/_framework/blazor.server.js"></script>
}

À propos de la traduction des messages, il y a ne autre question qui couvre le sujet .

0
Vojtěch Dohnal

Il existe en fait une réponse pour Blazor côté serveur. Selon ceci: modèles d'hébergement ASP.NET Core Blazor , on peut définir un élément div avec l'id components-reconnect-modal Dans le corps de _Host.cshtml Pour manipuler la superposition qui apparaît en cas de perte de connexion.

Cela ressemblerait à quelque chose comme ceci:

<body>
...
<!-- Blazor overlay -->
<div id="components-reconnect-modal"></div>

<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
...
</body>

Blazor applique ces classes personnalisées en fonction de l'état de l'application. Selon la documentation, ces classes sont en vigueur:

  • components-reconnect-show: Une connexion perdue. Le client tente de se reconnecter. Afficher le modal.Ensuite, vous pouvez appliquer votre style personnalisé à la superposition d'écran avec CSS. Si vous souhaitez tous les supprimer, vous pouvez simplement choisir de ne pas les afficher du tout.
  • components-reconnect-hide: Une connexion active est rétablie avec le serveur. Cachez le modal.
  • components-reconnect-failed: La reconnexion a échoué, probablement en raison d'une panne de réseau. Pour tenter une reconnexion, appelez window.Blazor.reconnect().
  • components-reconnect-rejected: Reconnexion rejetée. Le serveur a été atteint mais a refusé la connexion et l'état de l'utilisateur sur le serveur est perdu. Pour recharger l'application, appelez location.reload().

Pour masquer complètement la superposition, vous pouvez par exemple ajouter ce CSS:

.components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected {
     display: none;
}

Si vous voulez un look personnalisé pour la superposition, vous pouvez simplement remplir le div dans _Host.cshtml Avec le contenu à votre goût:

<div id="components-reconnect-modal" class="my-reconnect-modal components-reconnect-hide">
<div class="show">
    <p>
        // Message when attempting to connect to server
    </p>
</div>
<div class="failed">
    <p>
        // Message when failing to connect
    </p>
</div>
<div class="rejected">
    <p>
        // Message when refused
    </p>
</div>

Cependant, je n'ai aucune idée si cela fonctionne côté client, car je ne travaille qu'avec Blazor côté serveur. J'espère que cela fonctionne pour vous.

5
Christiaan Bruin