Avec .NET 9, les applications Blazor Server ont franchi un cap important en matière de reconnexion automatique, améliorant nettement la fluidité entre le serveur et l’expérience utilisateur. Toutefois, l’interface de reconnexion fournie par le framework, était impossible à personnaliser ou à traduire. Bonne nouvelle : .NET 10 change la donne. Il est désormais possible d’adapter visuellement et linguistiquement le composant ReconnectModal.razor, pour offrir une UX (expérience utilisateur) plus cohérente, localisée et engageante.
Dans le nouveau template Blazor Server de .NET 10 on retrouve dans le dossier /Layout le nouveau composant « ReconnectModal.razor » ainsi que son style et le son code JS pour la gestion de reconnexion.
Le nom du composant n’a pas d’importance en soit, mais il est injecter dans le corps de l’application. Nous retrouverons donc dans l’App.razor : <ReconnectModal />
Contenu du composant ReconnectModal
Lorsqu’on regarde de plus près le code html de ReconnectModal.razor, on y retrouve une boîte de dialogue et plusieurs états selon le déroulement des phases de tentatives de reconnexion.
Qu’est ce que l’attribut data-nosnippet ?
L’attribut HTML data-nosnippet sert à empêcher Google d’afficher une portion spécifique de contenu dans les extraits (snippets) des résultats de recherche. Lorsqu’il est appliqué à un élément, le texte à l’intérieur ne sera pas repris dans l’aperçu généré par Google. Cela permet aux développeurs de protéger certaines informations sensibles ou non pertinentes tout en laissant le reste de la page indexable. C’est une solution fine et ciblée pour contrôler la visibilité du contenu sans bloquer l’indexation complète de la page. Vous retrouverez plus de détail ici : https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag
Le code JS associé à ReconnectModal.razor
Le mécanisme principal y est. Déjà en .NET 9, les tentatives de reconnexion suivaient le principe de l’algorithme Exponential backoff en gros au début on fait de nombreuses tentatives et au fur et à mesure les délais entre les tentatives sont de plus en plus espacé. C’est toujours le code du framework dotnet qui gère cela cependant vous pouvait toujours vous personnaliser cela juste après la déclaration du script Blazor.web.js :
Vous aurez remarqué que le JS associé est déclaré en haut du composant ReconnectModal.razor.
Comment tester une déconnexion
Par exemple avec Visual Studio, il suffit d’éxécuter votre code sans débug (Start Without Debugging CTRL+F5) puis de fermer la fenêtre de sortie !
Personnalisation du style du dialogue de reconnexion
Je me suis amusé à créer un style différent de celui proposé par le template. J’ai créer un dépôt sur GitHub : https://github.com/tossnet/Blazor-Reconnect-demo-i18n . Rien d’exceptionnel à cela car il suffit de changer ici et là les propriétés CSS en veillant à conserver les noms des class afin de pas perturber les id et class utilisés à la fois par le code JS et le framework 🙂 Et voici le résultat
Traduction de cette interface
Il faut comprendre que si ce dialogue apparait, la liaison entre l’interface et votre server est rompu (ben oui c’est important quand même à préciser 🤣 ) Donc si on pensait utiliser des fichiers ressources et IStringLocalizer, et bien non ^^ Ici notre code est nulle part ailleurs que dans le navigateur. Donc pour la traduction, je regarde la première langue disponible par l’utilisateur et je l’utilise. J’ai donc dans mon fichier JS les quelques mots et phrases nécessaire et il suffit d’utiliser des attributs pour appliquer la bonne traduction : data-i18n=« xxxxx » et à chaque endroit une clé particulière :
Et dans le code ReconnectModal.razor.js j’ai appliqué le code pour traduire. Avec la la liste des mots par langues et key/words
