🔹 Blazor - استخدام Layout داخل Layout آخر (Nested Layouts)

في Blazor يمكنك استخدام أكثر من Layout متداخل، حيث يعتمد أحد الـ Layouts على آخر أكبر منه. هذا مفيد عندما تريد تقسيم الهيكل إلى أجزاء: مثل Layout عام يحتوي على Layout فرعي للأقسام الإدارية أو أجزاء الموقع.

---

🧠 ما هو Nested Layout؟

هو عندما يقوم Layout فرعي باستخدام Layout رئيسي. يعني: بدل ما تكون الصفحة فقط هي من تُستخدم داخل Layout، يمكن أن يكون Layout نفسه داخل Layout آخر!

---

🛠️ خطوات إنشاء Layout داخل Layout

✅ 1. أنشئ Layout عام (خارجي):

<div class="p-4 border">
    <h2>🌐 إطار خارجي (OuterLayout)</h2>
    @Body
</div>

✅ 2. أنشئ Layout فرعي (داخلي) يستخدم الخارجي:

@layout OuterLayout


<div class="p-3 bg-light">
    <h4>📁 إطار داخلي (InnerLayout)</h4>
    @Body
</div>

✅ 3. صفحة تستخدم الـ InnerLayout فقط:

@page "/nested-layout"
@layout InnerLayout

<p>✅ هذه الصفحة داخل Layout داخلي، والذي بدوره داخل Layout خارجي.</p>

---

🔁 كيف يتم العرض بالتسلسل؟

Blazor يعرض Layout خارجي أولًا، ثم يحقن بداخله Layout داخلي، ثم يحقن الصفحة نفسها.

1. 🟥 OuterLayout
2. 🟨 InnerLayout (داخل @Body الخارجي)
3. 🟩 محتوى الصفحة (داخل @Body الداخلي)

---

🧩 استخدام عملي لنظام Layout متداخل

• 💼 OuterLayout: يحتوي على الشعار والرأس والتذييل.
• 📂 InnerLayout: يحتوي على القائمة الجانبية الإدارية فقط.
• 📄 Page: تعرض تفاصيل البيانات أو النموذج.

---

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

• كل Layout يجب أن يحتوي على @Body.
• Layout يمكن أن يرث من Layout آخر عن طريق @layout.
• استخدم هذا الأسلوب لتنظيم واجهات إدارة أو أقسام متعددة.

---

✅ خلاصة الدرس

نظام Layout المتداخل في Blazor يسمح ببناء واجهات منظمة وقابلة لإعادة الاستخدام. باستخدام Outer + Inner Layouts، تستطيع بناء تطبيق منظم ومتعدد الطبقات في التصميم.

✅ انتهى قسم Layouts

تعلمت الآن:

1. كيفية إنشاء Layout عام
2. ربط صفحات مختلفة بـ Layouts متعددة
3. استخدام Layout داخل Layout (Nested)

هل نبدأ القسم التالي؟ 10.1 Blazor - إنشاء صفحة خطأ 404 مخصصة؟ اكتب التالي وسأكمل لك مباشرة 🔁