Bagaimana saya bisa mengubah teks "Tidak bisa terhubung kembali ke server" di Blazor?

10

Saya menggunakan sisi server Blazor.

Ketika Aplikasi Blazor terputus ke server jauh, itu akan menunjukkan ini:

masukkan deskripsi gambar di sini

Saya ingin mengubah teks ('Tidak dapat menyambung kembali ke server ...' dan seterusnya) dari gambar di atas.

Saya ingin mengubahnya ke bahasa negara kita.

Saya menemukan file proyek tetapi tidak menemukan apa pun tentang ini.

Bagaimana saya bisa mengubahnya? Terima kasih.

Melon NG
sumber

Jawaban:

14

Aplikasi Blazor akan memeriksa apakah ada elemen html dengan id ={dialogId} di halaman:

  1. Jika elemen seperti itu tidak ada, itu akan menggunakan penangan default untuk menampilkan pesan.
  2. Jika elemen ini ada, elemen ini classadalah:
    • atur seperti components-reconnect-showketika mencoba menyambung kembali ke server,
    • atur components-reconnect-failedketika gagal terhubung ke server.
    • atur seolah- components-reconnect-refusedolah browser mencapai server sementara server menolak koneksi secara aktif

Secara default, dialogIdis components-reconnect-modal. Jadi, Anda dapat membuat elemen di halaman dan menggunakan CSS untuk mengontrol konten dan gaya yang Anda inginkan.

Demo:

Misalnya, saya membuat tiga bagian konten untuk ditampilkan dalam 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>

Dan kemudian mari kita tambahkan beberapa CSS untuk mengontrol gaya:

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

Akhirnya, kami akan menerima pesan berikut ketika mencoba menghubungkan atau gagal menghubungkan:

masukkan deskripsi gambar di sini

itminus
sumber
Ini adalah informasi yang baik, tetapi di mana semua ini didokumentasikan di Microsoft Documents?
Aaron Hudon
2
@AaronHudon Lihat dokumen resmi di sini
itminus
Terima kasih. Aneh bahwa mereka meletakkannya di bawah model hosting
Aaron Hudon
@AaronHudon karena itu hanya terjadi jika kita menggunakan model Blazor Server Side :)
itminus
1
Tampaknya informasi ini telah dipindahkan ke sini .
drs9222
9

Untuk sisi javascript hal Blazor memperlihatkan API kecil melalui window.Blazorobjek.

Salah satu bagian dari API ini adalah defaultReconnectionHandleryang memungkinkan Anda untuk menyesuaikan pengalaman koneksi ulang termasuk pengaturan opsi yang berbeda untuk jumlah retrys dll.

Namun, juga memungkinkan untuk hanya menukar logika untuk menampilkan ReconnectionDisplay

Penerapan sederhana terlihat seperti ini dan memungkinkan Anda untuk mendapatkan kontrol atas proses:

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
sumber
Yah, itu adalah cara untuk menyelesaikannya juga. Tapi saya lebih suka cara @itminus. Terima kasih semua.
Melon NG
Tentu, itu tergantung pada kasus penggunaan Anda. Jika Anda memerlukan lebih banyak kontrol (mis. Jalankan kode khusus ketika koneksi gagal) menggunakan API adalah cara yang harus dilakukan. Jika Anda hanya ingin menukar UI Anda dapat pergi dengan saran @minmin.
Postlagerkarte