Blazor'daki "Sunucuya yeniden bağlanılamadı" metnini nasıl değiştirebilirim?

Blazor sunucu tarafını kullanıyorum.

Blazor Uygulaması uzak sunucuyla bağlantıyı kestiğinde şunu gösterir:

Yukarıdaki görüntünün metnini ('Sunucuya yeniden bağlanılamadı ...') değiştirmek istiyorum.

Ülkemizin diline değiştirmek istiyorum.

Projenin dosyasını buldum ama bununla ilgili hiçbir şey bulamadım.

Nasıl değiştirebilirim? Teşekkür ederim.

Blazor Uygulaması , sayfada id ={dialogId} olan bir html öğesi olup olmadığını kontrol eder:

1. Böyle bir öğe yoksa, mesajı görüntülemek için varsayılan işleyiciyi kullanır.
2. Bu öğe varsa, bu öğenin class:
   • olarak belirlenen components-reconnect-showsunucuya yeniden çalışırken,
   • components-reconnect-failedsunucuya bağlanamadığında ayarlayın .
   • components-reconnect-refusedsunucu bağlantıyı aktif olarak reddederken tarayıcı sunucuya ulaşmış gibi ayarla

Varsayılan dialogIdolarak components-reconnect-modal,. Böylece sayfada bir öğe oluşturabilir ve içeriği ve stilleri istediğiniz gibi kontrol etmek için CSS kullanabilirsiniz.

Demo:

Örneğin, içeriğin içinde görüntülenecek üç bölüm oluşturuyorum 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>

Ve sonra stili kontrol etmek için biraz CSS ekleyelim:

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

Son olarak, bağlanmaya çalışırken veya bağlanamadığımızda aşağıdaki mesajı alırız:

Şeylerin javascript tarafı için Blazor window.Blazornesne aracılığıyla küçük bir API ortaya koyar .

Bu API'nın bir bölümü defaultReconnectionHandler, yeniden deneme sayısı vb. İçin farklı seçenekler ayarlamak da dahil olmak üzere yeniden bağlanma deneyimini özelleştirmenize olanak tanır.

Ancak, sadece mantığı görüntülemek için mantığı değiştirmek de mümkündür. ReconnectionDisplay

Basit bir uygulama şöyle görünür ve süreç üzerinde kontrol sahibi olmanızı sağlar:

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