ComponentReconnectModal

ComponentReconnectModal Component

This component is used to customize the messages that are shown in your Blazor Server application when your application looses connection with the server.

This component is meaningful only to Blazor server applications, since it shows notifications to the user in case the connection with the server has been lost.

The component is completely rendered during the initial rendering of your application, so you can simply add the component to the root component App in your Blazor server application, as demonstrated in this sample application.

If you customize the different states using the template parameters, you can use whatever markup in those templates, as long as you don't create any interaction in those templates, since the messages are shown in situations where the server is not available, so your application cannot render any changes.

Inheritance

The ComponentReconnectModal component is derived from the BlazoradeComponentBase base class.

Parameters

Name	Type	Description
BackdropBackgroundColor	string	The background colour for the backgrop, i.e. the element that covers the entire application UI. The value can be anything that can be assigned to the background-color CSS style. The default is rgba(0, 0, 0, .75)
ConnectionStateBackgroundColor	string	The background color of the div that shows the connection state message. Can be any value that can be assigned to the background-color CSS style. The default is rgba(255, 255, 255, .8)
ConnectionStatePadding	string	The padding for the div that shows the connection state message. Can be any value that can be assigned to the padding CSS style. The default is 64px
ReconnectingTemplate	RenderFragment	Allows you to customize the message shown when the server connection has been lost and a reconnect attempt is in progress.
ReconnectFailedTemplate	RenderFragment	Allows you to customize the message shown when a reconnection with the server failed.
ReconnectRejectedTemplate	RenderFragment	Allows you to customize the message shown when a reconnection with the server was rejected.

Examples

The code samples below show you how you can customize the messages shown in the component in case the server connection is lost.

<ComponentReconnectModal>
    <ReconnectingTemplate>
        <p>
            Oops! Seems that the connection with the server
            has been lost. This is normally due to lost or
            poor network connections.
        </p>
        <p>
            Please hang on a while while we try to reconnect...
        </p>
    </ReconnectingTemplate>
    <ReconnectFailedTemplate>
        <p>
            We're sorry, but the reconnection attempts failed.
        </p>
        <p>
            You can now either try to
            <a href="javascript:window.Blazor.reconnect()">reconnect</a>
            or just <a href="javascript:location.reload()">reload</a>
            the page.
        </p>
        <p>
            Be prepared that reloading will not work, since failure to
            reconnect usually is due to a longer network failure or
            the server has been taken down for maintenance.
        </p>
    </ReconnectFailedTemplate>
    <ReconnectRejectedTemplate>
        <p>
            The connection attempts have all been rejected by
            the server. This is often caused by a fault on the server.
        </p>
        <p>
            You can try to 
            <a href="javascript:location.reload()">reload</a>
            the page, but please note that this will likely not
            succeed due to the likely failure on the server.
        </p>
    </ReconnectRejectedTemplate>
</ComponentReconnectModal>