🔹 Blazor - إنشاء Layout عام للتطبيق

الـ Layout في Blazor يُستخدم لتعريف الهيكل العام لصفحات التطبيق، مثل: الهيدر، القائمة الجانبية، والفوتر. وبدلًا من تكرار نفس العناصر في كل صفحة، نقوم بتعريفها مرة واحدة داخل Layout واستخدامه في باقي الصفحات.

---

🧱 ما هو Layout في Blazor؟

Layout يشبه الـ _Layout.cshtml في ASP.NET MVC وRazor Pages. يُستخدم لتغليف الصفحات بعناصر تصميم ثابتة.

---

🛠️ خطوات إنشاء Layout مخصص

✅ 1. إنشاء ملف Layout

<div class="container-fluid">
    <header class="bg-dark text-white p-3">
        <h2>🔷 عنوان التطبيق</h2>
    </header>

    <div class="row">
        <aside class="col-3 bg-light p-3">
            <NavLink href="/" class="nav-link" Match="NavLinkMatch.All">🏠 الرئيسية</NavLink>
            <NavLink href="/counter" class="nav-link">➕ العداد</NavLink>
        </aside>

        <main class="col-9 p-4">
            @Body
        </main>
    </div>

    <footer class="bg-dark text-white text-center p-2 mt-4">
        © 2025 - My Blazor App
    </footer>
</div>

---

✅ ما هو @Body؟

العنصر @Body هو المكان الذي يتم فيه حقن محتوى الصفحة داخل الـ Layout. أي صفحة تستخدم هذا Layout سيتم عرض محتواها في هذا الموضع.

---

📥 استخدام Layout في صفحة Blazor

@page "/counter"
@layout MainLayout

<h3>📊 عداد الزيارات</h3>

<p>القيمة الحالية: @count</p>
<button class="btn btn-primary" @onclick="Increment">زيادة</button>

@code {
    int count = 0;

    void Increment()
    {
        count++;
    }
}

---

📌 تعيين Layout كافتراضي للتطبيق

إذا أردت أن يكون Layout هو الافتراضي لكل الصفحات، ضعه في ملف App.razor:

    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <h3>❌ الصفحة غير موجودة</h3>
    </NotFound>

---

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

• يمكنك إنشاء أكثر من Layout وتخصيصه لأقسام مختلفة (مثلاً: Layout للإدارة، وآخر للمستخدم العادي).
• يمكن تمرير معلمات من Layout إلى الصفحات عن طريق خدمات مشتركة.
• الـ Layout لا يُعاد تحميله إلا إذا تغيّر بالكامل.

---

✅ خلاصة الدرس

الـ Layout يمنحك طريقة منظمة لتوحيد شكل التطبيق. يسهل إضافة عناصر ثابتة مثل القوائم، الترويسة، والتذييل في كل صفحة دون تكرار.