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

问题描述

我正在使用 Blazor 服务器端.

当 Blazor App 断开与远程服务器的连接时，会显示:

我想更改上图的文字(无法重新连接到服务器..."等等).

我想把它改成我们国家的语言.

我找到了该项目的文件，但一无所获.

我怎样才能改变它?谢谢.

解决方案

Blazor App 将检查页面中是否存在 id={dialogId} 的 html 元素:

1. 如果这样的元素不存在，它将使用默认处理程序来显示消息.
2. 如果此元素存在，则此元素的 class 将是:
   • 在尝试重新连接到服务器时设置为 components-reconnect-show.
   • 设置为 components-reconnect-failed 当重新连接失败时，可能是由于网络故障.要尝试重新连接，请调用 window.Blazor.reconnect().
   • 在重新连接被拒绝时设置为 components-reconnect-rejected.到达服务器但拒绝连接，用户在服务器上的状态丢失.要重新加载应用程序，请调用 location.reload().

默认情况下，dialogId 是 components-reconnect-modal.所以你可以在页面中创建一个元素，并使用 CSS 来控制你喜欢的内容和样式.

查看

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 reconnect to the server...' and so on) of the image above.

I want to change it to the language of our country.

I found the file of the project but found nothing about this.

How can I change it? Thank you.

解决方案

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:

<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="rejected">
        <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>

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

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

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

这篇关于如何更改“无法重新连接到服务器"?Blazor 中的文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！