Как изменить текст «Не удалось подключиться к серверу» в Blazor?

Я использую серверную часть Blazor.

Когда приложение Blazor отключается от удаленного сервера, оно показывает это:

Я хочу изменить текст («Не удалось повторно подключиться к серверу ...» и т. Д.) Изображения выше.

Я хочу изменить его на язык нашей страны.

Я нашел файл проекта, но ничего не нашел по этому поводу.

Как я могу это изменить? Спасибо.

Приложение Blazor проверит, есть ли на странице HTML-элемент с id ={dialogId} :

1. Если такого элемента не существует, он будет использовать обработчик по умолчанию для отображения сообщения.
2. Если этот элемент существует, этот элемент 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 предоставляет крошечный API через window.Blazorобъект.

Одна часть этого 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();