DynamicComponent در Blazor: راهنمای کامل استفاده از کامپوننت‌های پویا

در دنیای توسعه برنامه‌های وب مدرن با Blazor، یکی از چالش‌برانگیزترین سناریوها، نمایش کامپوننت‌ها به صورت پویا و در زمان اجرا (Runtime) است. آیا تا به حال خواسته‌اید بخش‌های مختلفی از اپلیکیشن شما بر اساس داده‌های دریافتی از سرور یا اقدامات کاربر، کامپوننت‌های مختلفی را نمایش دهند؟ اینجاست که DynamicComponent در Blazor به عنوان یک قهرمان قدرتمند وارد عمل می‌شود.

در این مقاله از دورآموز، به طور کامل با DynamicComponent آشنا شده و یاد می‌گیرید چگونه از آن برای ایجاد اپلیکیشن‌های ماژولار، انعطاف‌پذیر و پویا استفاده کنید.

آموزش آنلاین برنامه نویسی بلیزور از 0 تا 100 به همراه ساخت یک CMS پنل کاربری در مدرسه آنلاین دورآموز

DynamicComponent چیست؟

DynamicComponent یک کامپوننت داخلی در Blazor است (از .NET 6 به بعد) که به شما امکان می‌دهد یک کامپوننت را بر اساس نوع (Type) آن به صورت پویا رندر کنید. این کار دیگر نیازی به استفاده از دستورات شرطی پیچیده (if/else یا switch) برای هر کامپوننت احتمالی ندارد.

مقایسه اجمالی:

روش قدیمی: یک switch statement بزرگ که ده‌ها کامپوننت مختلف را چک می‌کند.

روش مدرن با Blazor: استفاده ساده و تمیز از <DynamicComponent>.

یک مثال عملی از DynamicComponent در Blazor
فرض کنید در حال ساخت یک پنل مدیریت هستید که بسته به نوع ویجت انتخاب شده توسط کاربر (مثلاً نمودار، جدول آمار، لیست آخرین کاربران)، یک کامپوننت متفاوت نمایش داده شود.

// Widgets/ChartWidget.razor
<h3>ویجت نمودار</h3>
<p>این یک نمودار زیبا است.</p>

// Widgets/TableWidget.razor
<h3>ویجت جدول</h3>
<p>این جدولی از داده‌ها است.</p>

// Widgets/UserListWidget.razor
<h3>لیست کاربران</h3>
<ul>
    <li>کاربر ۱</li>
    <li>کاربر ۲</li>
</ul>

کامپوننت والد با قابلیت پویا:

در کامپوننت اصلی (Parent)، از DynamicComponent برای نمایش پویا استفاده می‌کنیم

// DynamicDashboard.razor
@page "/dashboard"

<h2>داشبورد پویا</h2>

<select @onchange="OnWidgetChanged">
    <option value="ChartWidget">نمودار</option>
    <option value="TableWidget">جدول</option>
    <option value="UserListWidget">لیست کاربران</option>
</select>

<div class="mt-3">
    <DynamicComponent Type="SelectedWidgetType" />
</div>

@code {
    private Type? SelectedWidgetType { get; set; }

    // یک دیکشنری برای مپ کردن نام ویجت به تایپ آن
    private readonly Dictionary<string, Type> _widgetTypes = new()
    {
        { "ChartWidget", typeof(ChartWidget) },
        { "TableWidget", typeof(TableWidget) },
        { "UserListWidget", typeof(UserListWidget) }
    };

    private void OnWidgetChanged(ChangeEventArgs e)
    {
        var selectedWidgetName = e.Value?.ToString();
        if (selectedWidgetName != null && _widgetTypes.ContainsKey(selectedWidgetName))
        {
            SelectedWidgetType = _widgetTypes[selectedWidgetName];
        }
        else
        {
            SelectedWidgetType = null;
        }
    }
}

توضیح کد:

• یک Dropdown داریم که کاربر می‌تواند نوع ویجت را انتخاب کند.

• با هر تغییر، متد OnWidgetChanged فراخوانی می‌شود.

• این متد، نام انتخاب‌شده را به Type مربوطه مپ کرده و در پراپرتی SelectedWidgetType قرار می‌دهد.

• کامپوننت <DynamicComponent> با اتصال به این پراپرتی، به طور خودکار کامپوننت مناسب را رندر می‌کند.

دورآموز مرجع تخصصی آموزش آنلاین برنامه نویسی با برگزاری دوره هایی از چندین کشور نظیر آلمان،انگلستان،مالزی،استرالیا،ایتالیا،کاناداو...

ارسال پارامتر به کامپوننت پویا

یکی از قدرتمندترین ویژگی‌های DynamicComponent، قابلیت ارسال پارامترها به کامپوننت مقصد است. این کار را با استفاده از Parameters انجام می‌دهیم

// کامپوننت والد
<DynamicComponent Type="SelectedWidgetType" Parameters="WidgetParameters" />

@code {
    // ...

    // تعریف یک آبجکت برای پارامترها
    private Dictionary<string, object> WidgetParameters { get; set; } = new();

    protected override void OnInitialized()
    {
        // مقداردهی پارامترها
        WidgetParameters = new Dictionary<string, object>
        {
            { "Title", "آمار فروش ماهانه" },
            { "Data", salesDataList }
        };
    }
}

و در کامپوننت مقصد (مثلاً ChartWidget)، باید پارامترها را تعریف کنید:

// ChartWidget.razor
<h3>@Title</h3>
<p>در اینجا نمودار داده‌های @Title نمایش داده می‌شود.</p>

@code {
    [Parameter]
    public string Title { get; set; } = "نمودار پیش‌فرض";

    [Parameter]
    public List<object>? Data { get; set; }
}