If you’ve been working with Blazor Server applications, you might have come across the message shown below.
A Blazor Server application shows this message whe it looses it’s connection with the server. Remember that Blazor Server uses socket connections handled by SignalR to communicate with the server. If these connections are broken, the application cannot work properly, so it shows the message above.
There are a few other alternatives to the message, which an application shows in different situations, like the one below.
Regardless of the alternatives, it is quite clear that you might want to customize these messages. Luckily there is a way, which is described here. However, it might be a bit tricky, so I decided to create a component for it, and include it in Blazorade.Core as the
This article is about how to use that component in your own Blazor Server application.
The first thing you need to do is to add the reference to the package. It is available on Nuget, so the simplest way is to just run the following command in your package manager console.
Install-Package -Id Blazorade.Core
You can naturally also install it using Visual Studio’s UI. When you have the reference, add the following
using statement to your
_Imports.razor file. This is so that you don’t have to reference the component using its full namespace.
You can of course place the component wherever you like in your application. Keep in mind though that the component, or a customized version of the component, must always be rendered. The component shows a UI only when there is a problem with the connection. In normal operations the component will not show a UI. You never know what UI your users have rendered when connection problems hit. So keep the component rendered at all times.
I tend to put the component at the end of the
App.razor file, which is the root UI component of your Blazor server application. So, your
App.razor file would then look like this.
<Router AppAssembly="@typeof(Program).Assembly"> <!-- Omitted markup --> </Router> <ComponentReconnectModal> </ComponentReconnectModal>
Customizing the UI
The sample code above would render the default UI provided by the
ComponentReconnectModal component. That’s probably not what you want, since you are reading an article about customizing the UI. The way you customize the
ComponentReconnectModal component is by specifying templates that provide the UI you want to show for the various states, like the code sample below shows.
The templates that are available in the
ComponentReconnectModal component are:
ReconnectingTemplate– Contains the UI that you want to show when your client initially looses the connection. The client application is attempting to reconnect with the server at this point.
ReconnectFailedTemplate– All attempts to reconnect with the server have failed. Your client application will not automatically attempt to reconnect with the server. At this point, you can either try to reconnect, or simply reload the page and hope that your client application will be able to connect with the server.
ReconnectRejectedTemplate– You client application was able to connect with the server, but for some reason, the server refused the connection. Your only option is to reload the page.
With the help of Blazorade Bootstrap for instance, you could customize your UI to look something like this.
ComponentReconnectModal component does not only expose the template parameters described above. It also exposes the following parameters that enable easier customization.
BackdropBackgroundColor– The colour for the backdrop. The backdrop covers your entire application.
ConnectionStateBackgroundColor– The background colour of the area showing the different connection state UIs.
ConnectionStatePadding– The padding for the connection state UI area.
For details on how to use these parameters, please head to the Wiki page for the
Hope you find this component useful. Also have a look at the Blazorade Bootstrap library, in case you are planning on writing Blazor applications with Bootstrap.