- خارج از موضوع بحث نکنید.
- ساختار ابتدایی پروژه‌های Blazor Server را در مطلب «Blazor 5x - قسمت دوم - بررسی ساختار اولیه‌ی پروژه‌های Blazor» بررسی کردیم که در آن AddServerSideBlazor و غیره بحث شده‌اند که شامل موارد دیگری مانند مشخص سازی روش رندر کامپوننت‌ها و ... سیم‌کشی‌های دیگری هم هست برای اجرای بدون خطا:
<component type="typeof(App)" render-mode="ServerPrerendered" />
‫۳ سال و ۴ ماه قبل، پنجشنبه ۱۶ اردیبهشت ۱۴۰۰، ساعت ۱۸:۴۸
نمی‌توانید. IFormFile که یک اینترفیس است، قابلیت Serialization ندارد. ضمن اینکه نگهداری فایل‌های حجیم در حافظه‌ی سشن، کار اشتباهی است. بهتر است بر اساس نکات مطلب جاری، آن‌ها را ابتدا ذخیره کنید و فقط مسیرهای نهایی را نگهداری کنید.
‫۳ سال و ۴ ماه قبل، پنجشنبه ۱۶ اردیبهشت ۱۴۰۰، ساعت ۱۵:۵۹
یک نکته‌ی تکمیلی: امکان اجرای دوباره  OnInitialized{Async} در برنامه‌های Blazor Server
در برنامه‌های Blazor Server اگر حالت رندر شدن به Server Prerendered تنظیم شده باشد، کامپوننت ابتدا یکبار به صورت استاتیک رندر می‌شود و زمانیکه اتصال SignalR برقرار می‌شود، بار دیگر نیز رندر خواهد شد (هدف این است که پیش از دریافت کامل برنامه‌ی Blazor بتوان محتوایی را نمایش داد). بنابراین در این حالت متد رویدادگردان OnInitialized{Async} حتما دوبار اجرا می‌شود (ماخذ).
اگر می‌خواهید این رفتار را تغییر دهید، به فایل Host.cshtml_ برنامه‌های Blazor Server مراجعه کرده و "render-mode="ServerPrerendered پیش‌فرض را به "render-mode="Server تغییر دهید؛ یا کدهای OnInit را به OnAfterRenderAsync انتقال داده و وضعیت وجود اتصال SignalR را بررسی کنید:
@page "/"
@using Microsoft.JSInterop
@inject IComponentContext ComponentContext
@inject IJSRuntime jsRuntime

<p>Navigate to the counter component.</p>

@code{

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!ComponentContext.IsConnected) return;

         UriHelper.NavigateTo("/counter");
    }
}
‫۳ سال و ۴ ماه قبل، چهارشنبه ۱۵ اردیبهشت ۱۴۰۰، ساعت ۰۰:۵۱
چه زمانی کامپوننت‌ها رندر می‌شوند؟
- زمانیکه برای اولین بار ایجاد شده و نمایش داده می‌شوند.
- زمانیکه رخدادی صورت گرفته و مدیریت می‌شود.
- زمانیکه مقادیر پارامترهای یک کامپوننت تغییر می‌کنند.
- زمانیکه برنامه نویس به صورت دستی متد StateHasChanged را فراخوانی کند.
 
بنابراین در مثال شما، یکبار جهت اولین بار نمایش کامپوننت، کدهای Razor آن رندر می‌شوند؛ یکبار هم پس از پایان یک روال رویدادگردان. همچنین نکته‌ی async انتهای بحث را هم مطالعه کنید.
‫۳ سال و ۴ ماه قبل، چهارشنبه ۸ اردیبهشت ۱۴۰۰، ساعت ۱۸:۴۸
یک نکته‌ی تکمیلی: بررسی ساختار Layout در برنامه‌های Blazor

بعضی از قسمت‌های صفحه مانند هدر، منوی راهبری، فوتر امثال آن، عموما در تمام صفحات سایت، به یک شکل نمایش داده می‌شوند. جهت کاهش اینگونه کدهای تکراری، در برنامه‌ی ASP.NET Web Forms، مفهوم  Master Page و در برنامه‌های MVC، مفهوم layout page ارائه شد که قسمت‌های مشترک UI را در آن قرار می‌دهند تا دیگر نیازی نباشد به ازای هر صفحه، آن‌ها را تکرار کرد. Layout در برنامه‌های Blazor نیز چنین عملکردی را دارد. از لحاظ فنی، Layout نیز یک کامپوننت Blazor محسوب می‌شود. برای مثال فایل پیش‌فرض Shared\MainLayout.razor با یک چنین ساختاری:
@inherits LayoutComponentBase
<div class="sidebar">
    <NavMenu />
</div>
<div class="main">
    <div class="content px-4">
        @Body
    </div>
</div>
- ابتدا از کلاس LayoutComponentBase ارث‌بری می‌کند که به این ترتیب امکان دسترسی به خاصیت Body را در این کامپوننت میسر خواهد کرد.
- سپس با استفاده از Body@، سبب درج محتوای کامپوننت در حال رندر، در صفحه می‌شود.

DefaultLayout تعریف شده، در فایل آغازین App.razor به تمام کامپوننت‌های برنامه اعمال می‌شود. اما اگر نیاز باشد کامپوننت خاصی از layout دیگری استفاده کند، می‌توان از دایرکتیو layout برای بازنویسی آن، استفاده کرد:
@page "/episodes"
@layout DoctorWhoLayout

<h1>Component 2</h1>
نکته 1: این کامپوننت حتما باید به همراه دایرکتیو page@ نیز باشد؛ یعنی حتما باید routable باشد.
نکته 2: اگر برای کامپوننت‌های خود فایل code-behind تهیه می‌کنید، دایرکتیو layout@ به ویژگی Layout قرار گرفته‌ی بر روی کلاس کامپوننت ترجمه می‌شود:
[Layout(typeof(MainLayout))]

حتی می‌توان یک layout خاص را به پوشه‌ای از کامپوننت‌ها اعمال کرد. برای این منظور در ریشه‌ی این پوشه، فایل Imports.razor_ را قرار داده و سپس دایرکتیو layout@ را به آن اضافه کنید. فایل ویژه‌ی Imports.razor_ را می‌توان به هر پوشه‌ای از کامپوننت‌های برنامه اضافه کرد.

تذکر! دایرکتیو layout@ را در بالاترین فایل Imports.razor_ که در ریشه‌ی پروژه قرار دارد، درج نکنید؛ چون سبب بروز یک حلقه‌ی بی‌نهایت خواهد شد. همانطور که عنوان شد، بالاترین سطح تعریف layout پیش‌فرض، در فایل App.razor انجام می‌شود.
‫۳ سال و ۴ ماه قبل، سه‌شنبه ۷ اردیبهشت ۱۴۰۰، ساعت ۱۹:۲۵
یک نکته‌ی تکمیلی: کاربرد base href در فایل index.html چیست؟

فرض کنید برنامه‌ی شما قرار است از داخل زیر پوشه‌ی جدید blazor با آدرس http://example.com/blazor ارائه شود. در این حالت پس از مراجعه به این آدرس، فقط loading را مشاهده خواهید کرد و ... برنامه بارگذاری نمی‌شود. علت اینجا است که در حالت پیش‌فرض، base href تنظیم شده‌ی در فایل index.html، به ریشه‌ی سایت اشاره می‌کند:
<!DOCTYPE html>
<html>
<head>
   <base href="/" />
بنابراین در این حالت برنامه فایل‌های مورد نیاز خود را در ریشه‌ی وب سرور جستجو خواهد کرد و نه از زیر پوشه‌ی blazor. برای رفع این مشکل باید تغییر زیر صورت گیرد:
<base href="/blazor/" />
‫۳ سال و ۴ ماه قبل، سه‌شنبه ۷ اردیبهشت ۱۴۰۰، ساعت ۱۸:۳۷
یک نکته‌ی تکمیلی: چگونه برنامه‌های blazor server را پس از برقراری ارتباط قطع شده، به صورت خودکار راه‌اندازی مجدد کنیم؟
[_Host.cshtml]

<script src="_framework/blazor.server.js"></script>
<script>
window.Blazor.defaultReconnectionHandler.onConnectionDown = function () {
     setTimeout(function () {
             location.reload();
     }, 7000);
}

window.Blazor.defaultReconnectionHandler._reconnectCallback = function (d) {
    document.location.reload();
}
</script>
‫۳ سال و ۴ ماه قبل، سه‌شنبه ۷ اردیبهشت ۱۴۰۰، ساعت ۱۸:۲۰
یک نکته‌ی تکمیلی: چگونه می‌توان بررسی کرد که آیا مرورگر جاری از Web Assembly پشتیبانی می‌کند یا خیر؟
function isWasmSupported() {
    try {
        if (typeof WebAssembly === "object"
            && typeof WebAssembly.instantiate === "function") {
            const module = new WebAssembly.Module(Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
            if (module instanceof WebAssembly.Module)
                return new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
        }
    } catch (e) {
    }
    return false;
}
  
if(!isWasmSupported()) { 
  alert("WebAssembly is not available in your browser. Please try using the latest version of Chrome, Firefox, Edge or Safari.");
}
ماخذ