How can I change the “Could not reconnect to the server” text in Blazor?

Question

I am using the Blazor server-side.

When the Blazor App disconnect to the remote server, it will shows this:

I want to change the text (\'Could not

Answer 1

The Blazor App will check whether there's a html element with id={dialogId} in the page:

1. If such an element doesn't exists, it will use the default handler to display message.
2. If this element exists, this element's class will be :
   • set as components-reconnect-show when attempting to reconnect to the server.
   • set as components-reconnect-failed when reconnection failed, probably due to a network failure. To attempt reconnection, call window.Blazor.reconnect().
   • set as components-reconnect-rejected when 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().

By default, the dialogId is components-reconnect-modal. So you can create an element in the page and use CSS to control the content and styles as you like.

Check out the Microsoft Docs for the latest info.

Demo:

For example, I create three parts of content to display within the Pages/_Host.cshtml:

<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 refused
        </p>
    </div>
</div>

<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>

<script src="_framework/blazor.server.js"></script>

And then let's add some CSS to control the style:

<style>
    .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;
    }
</style>

Finally, we'll get the following message when attempting to connect or failing to connect:

Answer 2

In your css:

#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    opacity: 0.8;
    text-align: center;
    font-weight: bold;
}
#components-reconnect-modal.components-reconnect-show{
    display: block;
}
#components-reconnect-modal.components-reconnect-show div.reconnecting {
    display: block;
}
div.reconnecting {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed {
    display: block;
}
#components-reconnect-modal.components-reconnect-failed div.failedToConnect {
    display: block;
}
div.failedToConnect {
    display: none;
}

#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}
#components-reconnect-modal.components-reconnect-rejected div.connectionRejected {
    display: block;
}
div.connectionRejected {
    display: none;
}

#components-reconnect-modal.components-reconnect-hide {
    display: none;
}

In _Host body:

<div id="components-reconnect-modal">
    <div class="reconnecting">
        Подключение к серверу...
    </div>
    <div class="failedToConnect">
        Не удалось подключиться к серверу <input type="button" value="переподключиться" onclick="ReconnectToServer()" />
        <script>
            function ReconnectToServer() {
                window.Blazor.reconnect();
            }
        </script>
    </div>
    <div class="connectionRejected">
        Подключение к серверу прервано <input type="button" value="обновить страницу" onclick="ReloadPage()" />
        <script>
            function ReloadPage() {
                location.reload();
            }
        </script>
    </div>
</div>

Answer 3

For the javascript side of things Blazor exposes a tiny API via the window.Blazor object.

One part of this API is the defaultReconnectionHandler which allows you to customize the reconnection experience including setting different options for the number of retrys etc.

However, it is also possible to just swap out the logic for displaying the ReconnectionDisplay

A simple implemenation looks like this and enables you to to get controll over the process:

function createOwnDisplay() {
    return {
        show: () => { alert("put code that shows a toast , ui, or whaterver here"); },
        hide: () => { console.log('foo'); },
        failed: () => { console.log('foo'); },
        rejected: () => { console.log('foo'); }
    };
}

Blazor.defaultReconnectionHandler._reconnectionDisplay = createOwnDisplay();