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

10

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

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

введите описание изображения здесь

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

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

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

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

Дыня нг
источник

Ответы:

14

Приложение 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>

Наконец, мы получим следующее сообщение при попытке подключиться или не подключиться:

введите описание изображения здесь

itminus
источник
Это хорошая информация, но где - либо это документировано на Microsoft Docs?
Аарон Худон
2
@AaronHudon Смотрите официальные документы здесь
itminus
Спасибо. Странно, что они помещают это под хостинг моделей
Аарон Худон
@AaronHudon, потому что это происходит только при использовании модели Blazor Server Side :)
минус
1
Похоже, эта информация переехала сюда .
drs9222
9

Что касается 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();
Postlagerkarte
источник
Ну, это способ решить это тоже. Но я предпочитаю способ @itminus больше. Все же разрешите поблагодарить вас.
Дыня NG
Конечно, это зависит от вашего варианта использования. Если вам нужно больше контроля (например, выполнить пользовательский код при сбое подключения), используйте API. Если вы просто хотите поменять интерфейс, вы можете воспользоваться предложением @itminus.
Postlagerkarte