مقدمة الى ملف ViewStart_ في تطبيق ASP.NET Core MVC

-

ملف ViewStart في تطبيق ASP.NET Core MVC 

في هذه الدرس ان شاء الله بناقش مجموعة من الاشياء الخاصة ب ViewStart في تطبيقات ASP.NET Core ،المواضيع الي بناقشها:

  • لماذا نحتاج إلى ملف _ViewStart.cshtml في تطبيق ASP.NET Core MVC؟
  • ما هو ملف _ViewStart.cshtml في تطبيق ASP.NET Core MVC؟
  • كيف إنشاء ملف _ViewStart.cshtml في تطبيق ASP.NET Core MVC؟
  • كيفية تعيين Layout في ملف ViewStart.cshtml؟
  • التعرف على التسلسل الهرمي لملف _ViewStart.cshtml.
  • كيفية تحديد Layout مشروط في ملف ViewStart؟
طيب جاهزين يلا :

لماذا نحتاج إلى ملف _ViewStart.cshtml في تطبيق ASP.NET Core ؟

مثل master page في asp.net يوجد نفس الفكره في net Core. باستخدام الامر Layout  الدف من هذا الامر هو ربط view بصفحة بتكون هي master وصفحة master بتتخزن داخل مجلد Shared  وطريقة الربط بتكون كالتالي.
في اول View بنضيف الكود التالي

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

تمام حتى نفهم الهدف من ملف ViewStart لنفترض أن لدينا في التطبيق عدد كبير من View مثلا 100 views، وجميع views الـ 100 تستخدام نفس layout file. يعني نحنا بحاجة الى تطبيق الكود أعلاه في جميع Views. والتالي تخيل حجم تكرار الكود وحجم الجهد المبذول، هذا الامر اذا نعمل بهاي الطريقة ينتهك مبدأ DRY (Don’t Repeat Yourself لا تكرر نفسك) وله العيوب التالية.

  • كتابة المزيد من الكود Redundant Code

  • جهد ووقت إضافي في صيانة التطبيق Maintenance Overhead

مثال آخر :

لسبب ما في قررت تغيير التصميم الخاص بالتطبيق، فا تخيل اذا كنت مستخدم الطريقة السابقة وعامل اضافة code بكل Views في التطبيق كم بكون حجم العمل بالاضافة الى الملل في اعادة تغير الكود، وكمان ممكن يحدث اخطأ لان ممكن تنسى بعض Views.


فا لحل هذه المشكل جاءت فكرة ViewStart  بحيث يتم تحديد ما هي Layout من البداية في مكان واحد وبعدها كل Views في التطبيق بتعمل وراثه لها دون الحاجة الى اضافة اي كود في Views، تخيل كم بتوفر وقت وجهد.

طبعا يستثني من ذلك ال Views في حال تم كتابة Layout لهم مختلف. 

تمام ان شاء الله لحد الان يكون الامر واضح.


ما هو ملف _ViewStart.cshtml في تطبيق ASP.NET Core MVC؟

في تطبيق ASP.NET Core MVC، ملفViewStart.cshtml_ هو ملف خاص شبيه ب Master page، ويتم تنفيذ التعليمات البرمجية الموجودة فيه قبل تنفيذ التعليمات البرمجية في individual view يعني يتم قراءة هذه الملف اولا. تمام هذا يعني ان يمكن تعيين خاصية Layout في هذا الملف (ViewStart.cshtml) كما هو موضح في الصورة أدناه بدلاً من اضافتها في كل individual view بحيث يتم تنفيذها قبل تنفيذ view.


طبعا كتابة الكود في مكان واحد بحيث يطيق على كل Views اكيد اسهل وافضل وبوفر وقت وجهد، واكيد صيانة التطبيق أسهل بكثير. لذلك، في المستقبل، إذا كنت تريد تغيير layout file ، فأنت تحتاج فقط إلى تغيير الكود في مكان واحد فقط ، أي في ملف _ViewStart.cshtml.


كيفية إنشاء ملف _ViewStart.cshtml في تطبيق ASP.NET Core MVC؟

يتم انشاء هذا الملف داخل مجلد Views، لإنشاء ملف "ViewStart.cshtml_”، انقر بزر الماوس الأيمن على مجلد Views ثم حدد خيار " Add – New Item"، سيؤدي هذا إلى فتح نافذة " New Item ". من نافذة " New Item"، ابحث عن "Razor" ثم حدد "Razor View Start" وانقر على زر "Add" كما هو موضح في الصورة أدناه والذي يجب أن ينشئ "ViewStart.cshtml_" داخل مجلد "Views”.



كيفية تعيينLayout Property في ملف ViewStart.cshtml؟

بعد إنشاء ملف ViewStart.cshtml، بنعدل الملف كما هو موضح أدناه لتعيين خاصية Layout.

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
هذا الكود يعني ان صفحة Master في التطبيق ستكون _Layout.cshtml وسيتم تطبيقها على جميع Views بشكل افتراضي ما لم يتم كتابة كود خاص داخل View (الكود الخاص بكون  باضافة خاصية Layout في individual views )
الكود التالي بيستخدم Layout من ملف ViewStart_
 
@{
    ViewData["Title"] = "Home Page";
}
@model string
@Model
<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div> 

في حال كان المطلوب تطبيق صفحة ثانية، يجب تحديها في اول View (الكود في الاسفل )
@{

    ViewData["Title"] = "Thanks";
      Layout = "_MyLayout";
}

<h2>Thanks</h2>
في هذا View يتم تطبيق _MyLayout

فهم التسلسل الهرمي لملف _ViewStart.cshtml:

التسلسل الهرمي هو اولوية تطبيق هذا الملف في حال وجود اكثر من ملف_ViewStart في التطبيق، فعلى سبيل المثال تخيل انه لدينا ملف ViewStart في المجلد الفرعي Home وايضا داخل مجلد Views. (شوف الصورة)


في مثل هذه الحالة يأتي دور الترتيب الهرمي لملف ViewStart. 

طبعا اكيد بكون الاولوية على مستوي Sub Folder  ثم المستوى الأعلى يعني جميع Views الموجوده داهل home folder ستقرا من ViewStart الموجود داخل هذا المجلد.

تمام حتي نوضح ونفهم الموضوه بشكل افضل خلونا نعمل مثال :

تمام نعمل الان على انشاء ملف layout باسم MyLayout.cshtml_  داخل Home folder، وبعدها نضيف هذا الكود

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
    @if (IsSectionDefined("Scripts"))
    {
        @RenderSection("Scripts", false)
    }
</body>
</html>

في ملف ViewStart اي عملناه في مجلد Home نغير الكود الى : 

@{
    Layout = "~/Views/Home/_MyLayout.cshtml";
}

بهذه الطريقة صار عندنا ملفين الاول _MyLayout.cshtml يستخدم مع ViewStart في مجلد Home وبالتالي يطبق بشكل افتراضي على Views الموجوده داخل هذا المجلد Home ، والثاني باسم _ViewStart.cshtml موجود على مجلد Views مباشرة بتستخدم _Layout.cshtml ويطبق على باقي Views الموجوده 
باستخدام هذا Layout ، الآن اصبح عندنا تصميمان (_Layout.cshtml و _MyLayout.cshtml) لتطبيقنا.

ملاحظة: إذا كنت لا تريد استخدام layout file المحدد في ملف ViewStart ، فبدلاً من ذلك تريد استخدام layout file ، فأنت بحاجة إلى استخدام خاصية Layout في individual view لتعيين layout. إذا كنت لا تريد استخدام أي layout أو إذا كنت تريد عرض view بدون layout ، فعليك تعيين خاصية Layout على قيمة null.