Como posso alterar o texto "Não foi possível reconectar ao servidor" no Blazor?


10

Estou usando o lado do servidor Blazor.

Quando o aplicativo Blazor se desconecta do servidor remoto, ele mostra o seguinte:

insira a descrição da imagem aqui

Quero alterar o texto ('Não foi possível reconectar ao servidor ...' e assim por diante) da imagem acima.

Eu quero mudar para o idioma do nosso país.

Encontrei o arquivo do projeto, mas não encontrei nada sobre isso.

Como posso mudá-lo? Obrigado.

Respostas:


14

O Blazor App verificará se há um elemento html com id ={dialogId} na página:

  1. Se esse elemento não existir, ele usará o manipulador padrão para exibir a mensagem.
  2. Se esse elemento existir, o elemento classserá:
    • definido como components-reconnect-showao tentar se reconectar ao servidor,
    • definido como components-reconnect-failedquando não conseguiu se conectar ao servidor.
    • definido como components-reconnect-refusedse o navegador chegasse ao servidor enquanto o servidor rejeitasse a conexão ativamente

Por padrão, o dialogIdé components-reconnect-modal. Assim, você pode criar um elemento na página e usar CSS para controlar o conteúdo e os estilos que desejar.

Demo:

Por exemplo, eu crio três partes do conteúdo para exibir dentro do 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="refused">
        <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>

E então vamos adicionar um pouco de CSS para controlar o estilo:

<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-refused >div
    {
        display: none;
    }
    .components-reconnect-refused > .refused
    {
        display: block;
    }
</style>

Por fim, receberemos a seguinte mensagem ao tentar conectar-se ou ao não conectar:

insira a descrição da imagem aqui


Esta é uma boa informação, mas onde é qualquer deste documentado no Microsoft Docs?
Aaron Hudon


Obrigado. Estranho que eles colocaram em modelos de hospedagem
Aaron Hudon 14/01

@AaronHudon porque isso só ocorre se usarmos o modelo Blazor Server Side :)
itminus 14/01

11
Parece que esta informação foi movida para aqui .
drs9222 13/04

9

Para o lado do javascript, o Blazor expõe uma pequena API por meio do window.Blazorobjeto.

Uma parte dessa API é a defaultReconnectionHandlerque permite personalizar a experiência de reconexão, incluindo a definição de opções diferentes para o número de repetições, etc.

No entanto, também é possível trocar a lógica para exibir as informações ReconnectionDisplay

Uma implementação simples se parece com isso e permite que você controle o processo:

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();

Bem, é uma maneira de resolvê-lo também. Mas eu prefiro o @itminus muito mais. Obrigado a todos.
Melon NG

Claro, depende do seu caso de uso. Se você precisar de mais controle (por exemplo, execute o código personalizado quando a conexão falhar), use a API. Se você quiser apenas trocar a interface do usuário, siga a sugestão @itminus.
Postlagerkarte 19/10/19
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.