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:

    

        

            This is the message when attempting to connect to server
        
    
    

        

            This is the custom message when failing 
        
    
    

        

            This is the custom message when refused
        
    



    @(await Html.RenderComponentAsync(RenderMode.ServerPrerendered))

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

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