🔹 Blazor - التعامل مع RenderFragment

RenderFragment هو نوع خاص في Blazor يُستخدم لتمرير أجزاء من واجهة المستخدم (UI) كمحتوى ديناميكي إلى مكوّن آخر. يشبه "slot" في Vue.js أو "children" في React.

ببساطة، يمكننا اعتباره طريقة لتمرير "HTML مُخصص" من مكوّن أب إلى مكوّن فرعي.

🧠 ما هو RenderFragment؟

هو delegate يُستخدم في Blazor لتمثيل جزء من واجهة المستخدم يمكن تمريره إلى مكون آخر. الـ RenderFragment يمكن أن يكون ثابتًا أو يحتوي على منطق ديناميكي يتم إنشاؤه في وقت التشغيل.

RenderFragment content = @<p>هذا محتوى ديناميكي</p>;

🛠️ استخدام RenderFragment كمحتوى في مكون

نفترض أنك تريد إنشاء مكون <MyCard> يحتوي على رأس، ومحتوى، وتذييل قابل للتخصيص:

<!-- MyCard.razor -->
<div class="card mb-3">
    <div class="card-header bg-primary text-white">
        @Header
    </div>
    <div class="card-body">
        @ChildContent
    </div>
    <div class="card-footer bg-light">
        @Footer
    </div>
</div>

@code {
    [Parameter] public RenderFragment? Header { get; set; }
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public RenderFragment? Footer { get; set; }
}

🧪 استخدام المكون في صفحة

<MyCard>
    <Header>
        <h5>📌 هذا رأس البطاقة</h5>
    </Header>

    <p>هذا هو المحتوى الداخلي للبطاقة.</p>

    <Footer>
        <small>🕓 تم التحديث منذ دقيقة</small>
    </Footer>
</MyCard>

🔁 تمرير RenderFragment ديناميكي باستخدام منطق C#

يمكنك أيضًا إنشاء RenderFragment باستخدام C# مباشرة في الكود:

RenderFragment dynamicFragment = builder =>
{
    builder.OpenElement(0, "p");
    builder.AddContent(1, "تم إنشاء هذا من كود C#");
    builder.CloseElement();
};

💡 ملاحظات مهمة

• يمكنك استخدام أكثر من RenderFragment داخل نفس المكون لتقسيم الواجهة إلى أجزاء قابلة لإعادة الاستخدام.
• المفتاح الأساسي هو @ChildContent، وهو الاسم الافتراضي لـ RenderFragment الذي يتم تمريره داخل عناصر المكون.
• RenderFragment يمكن تمريره أيضًا كمحتوى مكرر باستخدام حلقات (Loops).

✅ خلاصة الدرس

يساعدك RenderFragment في إنشاء مكونات أكثر مرونة وقابلة لإعادة الاستخدام، خاصة عندما تحتاج إلى تمرير أجزاء واجهة مخصصة من المكون الأب إلى المكون الفرعي.