ما هي Sections في Layout

-

في هذا الدرس بنتعلم عن Sections والي هي عبارة عن أقسام Sections يتم ادراجها في ملف Layout.cshtml_ بغرض إدراج محتوى Views   في مواقع محددة داخلها. ويتم تحديد Sections باستخدام Section razor express@  متبوعًا باسم القسم.

يمعنى آخر يمكن استخدام اكثر من View في نفس الوقت باستخدام Sections.

ومثل ما تعودنا حتي نفهم الموضوع بشكل افضل نبدأ بمثال عملي .

ننتقل الى Home Controller ونضيف action باسم SectionsLayout ونضيف الكود التالي :

  public IActionResult SectionsLayout()
        {
            return View();
        }

تمام الان نعمل View بالنقر يمين فوق هذا action ونضيف الكود التالي :


@section Top {
    This is Top
}
<h2>Sections Layout starts here</h2>
<p>This text is coming from child view</p>
@section Script {
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
}
@section Bottom {
    This is Bottom
}

الآن في ملف Layout الخاص بالتطبيق، ومشان نعرض هذه الأقسام ، استخدم تعبير razor التالي :
@RenderSection
انظر الكود المحدث لملف Layout.cshtml_  الوارد أدناه

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    @RenderSection("Top")
    <div>
        @RenderBody()
    </div>
    @RenderSection("Bottom")
    @RenderSection("Script")
</body>
</html>

نشغل التطبيق ونشوف النتيجة :


ترتيب Section 
ترتيب هذه Section تماما مثل Layout.cshtml_  حيث سترى أجزاء view المضمنة في القسم العلوي تأتي أولاً. ثم تأتي الأجزاء التي لم يتم تضمينها في أي قسم (يتم إدراجها بواسطة علامة المساعد .
بعدها اكيد محتويات Bottom section’s وأخيراً محتوى Script section’s الذي يضيف نص jQuery في النهاية.
يمكنك تحديد العديد من sections حسب حاجتك في التطبيق. لكن تذكر أنه من الضروري تحديد كل الأقسام في View التي يوجد بها  ()RenderBody@ في layout file ، يؤدي عدم القيام بذلك إلى حدوث خطأ في وقت التشغيل.

Sections الاختيارية
يمكن ايضا إضافة Section اختيارية في layout file بحيث عدم تحديدها لن يسبب أي مشاكل في التطبيق.  وحتي نفهم الموضوع نبدأ بالمثال :
ننتقل الى ملفlayout  ونضيف section  باسم Ads  (الكود):

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    @RenderSection("Top")
    <div>
        @RenderBody()
    </div>
     @RenderSection("Bottom")
     @RenderSection("Ads")
    @RenderSection("Script")
</body>
</html>
عند محاولة تشغيل التطبيق بهذه الصورة اكيد بتكون النتيجة خطأ، بسبب عدم تحدد هذا section في SectionsLayout.cshtml view، وبتكون النتيجة:



والسبب في هذا الخطأ هو ان صفحة layout تحتوي على RenderSection@   ل Section المسمى Ads  بينما ال View المسمى SectionsLayout لا يحتوي على هذا section وبالتالي سيقوم MVC بالبحث عن هذا Section في ملف View وحيث انه لم يتم إضافة هذا ال Section فستكون النتيجة خطأ.
لمعالجة هذه الخطأ هناك طريقتين هما: 
  • إضافة القسم التالي في SectionsLayout view:

@section Ads {
}
  • جعل هذا section في layout page عباره عن Optional Section. مع القسم الاختياري، لن يعطيك ASP.NET Core MVC خطأ حتى إذا كان هذا القسم غير موجود في View. ولجعل هذا ال section اختياري يجب إضافة false الى RenderSection("Ads")@  .

لذا انتقل إلى صفحة Layout الخاصة بك وقم بتغيير الكود من

@RenderSection("Ads")

  الى

@RenderSection("Ads", false) 

بهذه الطريقة اصبح هذا section اختياري.

أعد تشغيل التطبيق الخاص بك وسيعمل بشكل سليم دون أخطاء.