Blazor - Custom Connection Details Display
Blazor Server has a standard UX that display the reconnection status of the application, in this article I will show you one way to customize this UX.
Why Customize the Connection Status Display
Most of the time it is just fine to use the supplied UX for this page, but in my usage I wanted a little more control on where and how the content is displayed. In my application, a Bot built in blazor, has webpages overlays that it supplies my OBS. I wanted these pages to display an out of the way message, in not completely covering my whole overlay but still getting notified when the Client looses its connection to the Bot. So I include something similar to the HTML/CSS below to customize the messaging and how the UI is displayed at the loss of the connection to the bot.
Customized "components-reconnect-modal" used by my Bot. The "Reconnecting to server..." is the area these customizations were made.
Where to Start
To start we need to include some HTML in the _Host.cshtml page, this is only supported on the Blazor Server hosting model, since the WASM host does not have a connection to a Server in most cases. Also with the HTML you will want to include CSS to hide it by default, the framework will take care of adding CSS that can display the content when a connection state change is picked up. These two pieces allow for a customized UI to control the where/what message is shown.
This UX does not come from the default template so will need to be supplied completely by the developer when customizing. The areas to note is the id, it has to be components-reconnect-modal, this needs to be supplied so the frameworks knows that customization is provided and should not include its own.
When the different reconnection states are triggered the framework will change the css class on the components-reconnect-modal element to one of the following; components-reconnect-show, components-reconnect-hide, components-reconnect-failed, or components-reconnect-rejected, checkout Microsoft - Blazor Server for more details on each one.
As with the Error UI, because we are using the Blazor Server you have access to the <environment /> tag gaining access to create some very unique content based on a Production or Development application deployment.
_Host.cshtml
@page "/"
@namespace EventHorizon.Blazor.Chat.Website.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blazor Website</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<environment include="Staging,Production">
<div id="components-reconnect-modal" class="my-reconnect-modal components-reconnect-hide">
<div class="show failed rejected">
<p>
Reconnecting to server...
</p>
</div>
</div>
</environment>
<environment include="Development">
<div id="components-reconnect-modal" class="my-reconnect-modal components-reconnect-hide">
<div class="show">
<p>
This is the message when attempting to connect to server
</p>
</div>
<div class="failed">
<p>
This is the custom message when failing
</p>
</div>
<div class="rejected">
<p>
This is the custom message when rejected
</p>
</div>
</div>
</environment>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
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-rejected > div {
display: none;
}
.components-reconnect-rejected > .rejected {
display: block;
}
