O Blazor App verificará se há um elemento html com id ={dialogId}
na página:
- Se esse elemento não existir, ele usará o manipulador padrão para exibir a mensagem.
- Se esse elemento existir, o elemento
class
será:
- definido como
components-reconnect-show
ao tentar se reconectar ao servidor,
- definido como
components-reconnect-failed
quando não conseguiu se conectar ao servidor.
- definido como
components-reconnect-refused
se 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: