ฉันจะเปลี่ยนข้อความ“ ไม่สามารถเชื่อมต่อกับเซิร์ฟเวอร์อีกครั้ง” ใน 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ที่ให้คุณปรับแต่งประสบการณ์การเชื่อมต่อใหม่รวมถึงการตั้งค่าตัวเลือกต่าง ๆ สำหรับจำนวนของ retrys เป็นต้น

อย่างไรก็ตามมันเป็นไปได้ที่จะสลับตรรกะในการแสดง 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();