Jak mogę zmienić tekst „Nie można ponownie połączyć się z serwerem” w Blazor?


10

Korzystam z serwera Blazor.

Gdy aplikacja Blazor rozłączy się ze zdalnym serwerem, wyświetli to:

wprowadź opis zdjęcia tutaj

Chcę zmienić tekst („Nie można ponownie połączyć się z serwerem ...” itd.) Powyższego obrazu.

Chcę to zmienić na język naszego kraju.

Znalazłem plik projektu, ale nic na ten temat nie znalazłem.

Jak mogę to zmienić? Dziękuję Ci.

Odpowiedzi:


14

Blazor App sprawdzi, czy istnieje element html z id ={dialogId} na stronie:

  1. Jeśli taki element nie istnieje, użyje domyślnego modułu obsługi do wyświetlenia komunikatu.
  2. Jeśli ten element istnieje, classbędzie to:
    • ustawione jak components-reconnect-showprzy próbie ponownego połączenia z serwerem,
    • ustawiono tak components-reconnect-failed, jakby nie udało się połączyć z serwerem.
    • ustawione tak, components-reconnect-refusedjakby przeglądarka docierała do serwera, podczas gdy serwer aktywnie odrzuca połączenie

Domyślnie dialogIdjestcomponents-reconnect-modal . Możesz więc utworzyć element na stronie i używać CSS do kontrolowania zawartości i stylów według własnego uznania.

Próbny:

Na przykład tworzę trzy części treści do wyświetlenia w 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>

A następnie dodajmy trochę CSS, aby kontrolować styl:

<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>

Wreszcie, podczas próby połączenia lub niepowodzenia połączenia otrzymamy następujący komunikat:

wprowadź opis zdjęcia tutaj


To dobra informacja, ale gdzie jest każdy to udokumentowane na Microsoft Docs?
Aaron Hudon

2
@AaronHudon Zobacz oficjalne dokumenty tutaj
itminus

Dzięki. Dziwne, że umieścili to pod modelami hostingowymi
Aaron Hudon

@AaronHudon, ponieważ występuje tylko wtedy, gdy używamy modelu Blazor Server Side :)
itminus

1
Wygląda na to, że ta informacja została przeniesiona tutaj .
drs9222

9

Jeśli chodzi o javascript, Blazor udostępnia window.Blazorobiekt poprzez API .

Jedną częścią tego interfejsu API jest defaultReconnectionHandler możliwość dostosowania sposobu ponownego połączenia, w tym ustawienie różnych opcji liczby ponownych połączeń itp.

Możliwe jest jednak także zamiana logiki wyświetlania ReconnectionDisplay

Prosta implementacja wygląda tak i pozwala uzyskać kontrolę nad procesem:

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

Cóż, jest to również sposób na jego rozwiązanie. Ale wolę sposób @itminus bardziej. Dziękuję wszystkim tym samym.
Melon NG,

Jasne, to zależy od twojego przypadku użycia. Jeśli potrzebujesz większej kontroli (np. Wykonaj kod niestandardowy, gdy połączenie się nie powiedzie), skorzystaj z interfejsu API. Jeśli chcesz tylko wymienić interfejs użytkownika, możesz skorzystać z sugestii @itminus.
Postlagerkarte,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.