Як я можу змінити текст "Не вдалося знову підключитися до сервера" в 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();