Menu
I have an ASP.NET Core 3.1 C# razor pages application that also uses some Blazor-serverside razor components. I have published it to IIS on Windows 2008 R2 Server. But when browsing the site in Chrome on one andorid mobile phone a message appears periodically:
Attemting to reconnect to the server
Also when user stays inactive for a while, e.g. turns off the mobile phone display, a message appears
Disconnected from server. Reload page ...
The site is not in english and those generic messages are not good for end user exprience. Is there any way how to disable those messages, or at least translate them to another language?
935
There is actually an answer for server-side Blazor as well. According to this: ASP.NET Core Blazor hosting models, one can define a div-element with the id components-reconnect-modal in the body of _Host.cshtml to manipulate the overlay that shows up in case of a connection loss.
That would look something like this:
<body>
...
<!-- Blazor overlay -->
<div id="components-reconnect-modal"></div>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
...
</body>
Blazor applies these custom classes depending on the state of the app. According to the documentation these classes are in effect:
components-reconnect-show: A lost connection. The client is attempting to reconnect. Show the modal.Then you can apply your custom styling to the screen overlay with CSS. If you want to remove them all to you can just choose to not display them at all.components-reconnect-hide: An active connection is re-established to the server. Hide the modal.components-reconnect-failed: Reconnection failed, probably due to a network failure. To attempt reconnection, call window.Blazor.reconnect().components-reconnect-rejected: Reconnection rejected. The server was reached but refused the connection, and the user's state on the server is lost. To reload the app, call location.reload().To hide the overlay completely, for instance you can add this CSS:
.components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected {
display: none;
}
If you want a custom look for the overlay, you can just fill the div in _Host.cshtml with content to your liking:
<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>
I have no idea if this works client-side however, as I only work with server-side Blazor. I hope this works for you.
75
So far I have only found a way how to disable Blazor overlays on pages that do not contain any serverside Blazor components. It is quite simple, I have created an empty Interface IPageWithBlazor and made all models of razor pages that contain serverside Blazor implement this empty interface. Now I can use the following condition in _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>
}
About translating messages there is another question that covers the topic.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With