Answers:
Blazor应用程序将检查页面中是否存在id ==的html元素{dialogId}
:
class
为:
components-reconnect-show
尝试重新连接到服务器时,components-reconnect-failed
连接服务器失败的时间。components-reconnect-refused
浏览器到达服务器时服务器主动拒绝连接默认情况下dialogId
为components-reconnect-modal
。因此,您可以在页面中创建一个元素,然后使用CSS根据需要控制内容和样式。
例如,我创建了内容的三个部分以显示在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>
然后添加一些CSS来控制样式:
<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>
最后,当尝试连接或连接失败时,我们将收到以下消息:
对于JavaScript方面,Blazor通过window.Blazor
对象公开了一个很小的API 。
该API的一部分是,defaultReconnectionHandler
它允许您自定义重新连接体验,包括为重试次数设置不同的选项等。
但是,也可以换掉显示 ReconnectionDisplay
一个简单的实现看起来像这样,使您能够控制该过程:
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();