如何更改Blazor中的“无法重新连接到服务器”文本?


10

我正在使用Blazor服务器端。

当Blazor应用程序断开与远程服务器的连接时,它将显示以下内容:

在此处输入图片说明

我想更改上面图像的文本(“无法重新连接到服务器...”等等)。

我想将其更改为我们国家的语言。

我找到了该项目的文件,但对此一无所获。

我该如何更改?谢谢。

Answers:


14

Blazor应用程序将检查页面中是否存在id ==的html元素{dialogId}

  1. 如果此类元素不存在,它将使用默认处理程序显示消息。
  2. 如果存在此元素,则该元素class为:
    • 设置为components-reconnect-show尝试重新连接到服务器时,
    • 设置为components-reconnect-failed连接服务器失败的时间。
    • 设置为components-reconnect-refused浏览器到达服务器时服务器主动拒绝连接

默认情况下dialogIdcomponents-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>

最后,当尝试连接或连接失败时,我们将收到以下消息:

在此处输入图片说明


这是很好的信息,但如果是任何的这种记录在微软文档?
亚伦·休顿

2
@AaronHudon 在这里
itminus

谢谢。奇怪的是,他们将其置于托管模式下
亚伦·休顿

@AaronHudon,因为它仅在我们使用Blazor服务器端模型时才会发生:)
凌晨

1
看来此信息已移至此处
drs9222

9

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

好吧,这也是解决它的一种方法。但是我更喜欢@itminus的方式。谢谢你们
Melon NG

当然,这取决于您的用例。如果您需要更多控制(例如,连接失败时执行自定义代码),则可以使用API​​。如果只想换出UI,可以使用@itminus建议。
Postlagerkarte
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.