With .NET 9, Blazor Server applications took a major step forward in terms of automatic reconnection, significantly improving fluidity between the server and the user experience. However, the reconnection interface provided by the framework could not be customized or translated. The good news is that .NET 10 changes all that. It is now possible to visually and linguistically adapt the ReconnectModal.razor component to provide a more consistent, localized, and engaging user experience (UX).
In the new Blazor Server template in .NET 10, the /Layout folder contains the new “ReconnectModal.razor” component, along with its style and JS code for reconnection management.
The name of the component is not important in itself, but it is injected into the body of the application. We will therefore find in App.razor: <ReconnectModal />
Contents of the ReconnectModal component
When we take a closer look at the HTML code for ReconnectModal.razor, we find a dialog box and several states depending on the progress of the reconnection attempts.
What is the data-nosnippet attribute?
The HTML data-nosnippet attribute is used to prevent Google from displaying a specific portion of content in search result snippets. When applied to an element, the text inside it will not be included in the preview generated by Google. This allows developers to protect certain sensitive or irrelevant information while leaving the rest of the page indexable. It is a subtle and targeted solution for controlling content visibility without blocking the entire page from being indexed. You can find more details here: https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag
The JS code associated with ReconnectModal.razor
The main mechanism is there. Already in .NET 9, reconnection attempts followed the principle of the exponential backoff algorithm. Basically, at the beginning, numerous attempts are made, and as time goes on, the intervals between attempts become longer and longer. This is still managed by the dotnet framework code, but you can still customize it right after the Blazor.web.js script declaration:
You will have noticed that the associated JS is declared at the top of the ReconnectModal.razor component.
How to test a disconnection
For example, with Visual Studio, simply run your code without debugging (Start Without Debugging CTRL+F5) and then close the output window!
Customizing the reconnection window
I had fun creating a style that’s different from the one offered by the template. I created a repository on GitHub: https://github.com/tossnet/Blazor-Reconnect-demo-i18n. There’s nothing exceptional about this, as all you have to do is change the CSS properties here and there, making sure to keep the class names so as not to disrupt the IDs and classes used by both the JS code and the framework 🙂 And here is the result
Translation of this interface
It is important to understand that if this dialog box appears, the connection between the interface and your server has been broken (well, yes, it’s important to point that out 🤣). So if you were thinking of using resource files and IStringLocalizer, well, no ^^ Here, our code is nowhere else but in the browser. So for translation, I look at the first language available to the user and use that. So I have the few words and phrases I need in my JS file, and all I have to do is use attributes to apply the correct translation: data-i18n=“xxxxx” and a specific key in each place:
And in the ReconnectModal.razor.js code, I applied the code for translation. With the list of words by language and key/words.
