Blazor will
check for an HTML ID on initializing the HTML element. If such an ID does not
exist on the page, then it will use the default handler to display messages. To
display custom messages on connection
loss, we 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 the case of a connection loss. If this
element exists, this element’s class will be :
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, you can just choose not
to 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().
Refer to this link for more details: https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-model-configuration?view=aspnetcore-3.1#reflect-the-connection-state-in-the-ui
[_Host.cshmtl]
<body>
……
<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>
</div>
……
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
</body>
[site.css]
.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;
}
You can download the reference sample here
Share with