আমি ব্লেজার সার্ভার-সাইড ব্যবহার করছি।
যখন ব্লেজার অ্যাপটি দূরবর্তী সার্ভারের সাথে সংযোগ বিচ্ছিন্ন হয়, এটি এটি দেখায়:
আমি উপরের চিত্রটির পাঠ্য ('সার্ভারের সাথে পুনরায় সংযোগ করতে পারছি না ...' ইত্যাদি) পরিবর্তন করতে চাই।
আমি এটি আমাদের দেশের ভাষায় পরিবর্তন করতে চাই।
আমি প্রকল্পের ফাইল খুঁজে পেয়েছি তবে এ সম্পর্কে কিছুই পাইনি।
আমি কীভাবে এটি পরিবর্তন করতে পারি? ধন্যবাদ.
উত্তর:
ব্লেজার অ্যাপটি পৃষ্ঠায় আইডি = সহ কোনও এইচটিএমএল উপাদান{dialogId} রয়েছে কিনা তা যাচাই করবে :
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>
এবং তারপরে স্টাইলটি নিয়ন্ত্রণ করতে কিছু সিএসএস যুক্ত করা যাক:
<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>
পরিশেষে, সংযোগ দেওয়ার চেষ্টা করার সময় বা সংযোগে ব্যর্থ হওয়ার সময় আমরা নিম্নলিখিত বার্তাটি পেয়ে যাব:
জাভাস্ক্রিপ্টের জিনিসগুলির পক্ষে ব্লেজার window.Blazorবস্তুর মাধ্যমে একটি ছোট্ট API প্রকাশ করে exp
এই defaultReconnectionHandlerএপিআইর একটি অংশ হ'ল যা আপনাকে পুনরায় সংযোগের অভিজ্ঞতাটি পুনরায় চেষ্টা করার জন্য বিভিন্ন বিকল্প নির্ধারণ সহ কাস্টমাইজ করতে দেয় etc.
তবে এটি প্রদর্শন করার জন্য কেবল যুক্তি সরিয়ে নেওয়াও সম্ভব 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();