ما هيLayout.cshtml_

-

اكيد كل تطبيق بكون في تصميم خاص له، والتصميم يطلق عليه اسم UI، وممكن يكون في التطبيق اكثر من تصميم مثلا تصميم ل admin تصميم End User وهكذا، بحيث يتم تطبيق كل تصميم على مجموعة من Views، فبدل من ان يتم تكرار التصميم في جميع ال Views يمكن انشاء التصميم في ملف واحد وبعدها يمكن استخدام هذا التصميم في ملفات View مع إضافة تغيرات خاصة بكل View (تمام كما هي فكرة Master Page في Asp.net).

يحتوي ASP.NET Core على طريقة Layout view  التي يوفرها ملف Layout.cshtml_. بحيث يمكن اضافة أجزاء مشتركة لواجهة المستخدم UI parts، وتطبيقها داخل View بحيث لا تضطر إلى كتابة نفس الكود في كل View.

يجب ان يتم إضافة هذا الملف Layout.cshtml_ داخل مجلد Views ➤ Shared.

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

اكيد بنكمل شغل على المشروع StudentAcademy ، ونتأكد من وجود ملف باسم Layout.cshtml_ في Views- Shared، إذاما كان هذا الملف موجد في التطبيق، انقر بزر الماوس الأيمن فوق Shared folder  وحدد Add New Item. ثم حدد Razor Layout من قائمة العناصر وانقر فوق الزر Add. تحقق من الصورة أدناه التي توضح ذلك:


سيتم إنشاء ملف باسم Layout.cshtml_. بناء على نوع المشروع الذي تم اخياره من البداية وهنا في مشروعنا النوع  MVC وبكون الملف الافتراضي يكون بهذا الشكل: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - StudentsAcademy</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">StudentsAcademy</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2021 - StudentsAcademy - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>
نفهم الكود المكتوب : 
هذا الملف عبارة عن صفحة HTML بها عدد قليل من Razor blocks مثل:
@ViewData["Title"]
 تمام، هذا الكود عبارة عن طريقة لحفظ قيمة بشكل مؤقت، يمكن عرضها في صفحات View ، اسم المتغير في هذه الحالة هو Title استخدمناه لعرض عنوان للصفحه.

@RenderBody()
هذا الكود يستخدم لعرض محتويات View ويطق عليها child view، لاحظ ان في هذه الصفحة اضفنا Header وبعدها ()RenderBody@ وبعدها Footer، تمام وبنستخدم هذا الامر لعرض محتويات  child view غير المغلفة في section. بخصوص " sections" بنحكي عنها بالتفصيل بعد قليل.
تمام نكمل الان موضوعنا وهو كيفية عمل layout.
لاستخدام هذا الملف Layout_ في صفحات View الامر بسيط جدا. فقط المطلوب نضيف الكود التالي في صفحة View :
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
طبعا المسار "~/Views/Shared/_Layout.cshtml" متغير حسب مكان وجود ملفLayout_ وعادتا مثل ما حكينا موجود في مجلد Shared في Views 

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

طيب تمام، في MVC يوجد طريقة لتطبيق هذا Layout_ على جميع الصفحات View من مكان واحد، وهاذ الاشي بصير عن طريق عمل اعدادات للتطبيق configure the application  بحيث يتم تطبيق ملف Layout.cshtml_ افتراضيًا.

الطريقة حكينا عنها سابقا وهي اضافة ملف من نوع Razor View Start. وبنسميه ViewStart.cshtml_ وبتكون الاضافة في Views folder.



وبنضيف الكود التالي في هذا الملف.
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
في هذه الطريقة يتم تطبيق Layout_ المعرف هنا على جميع Views في التطبيق، الا في حال تم تحددي غير ذلك. 

يمكن كمان يكون في التطبيق ملف View Start ولكن لا نريد أن يتم تطبيق التصميم الموجود داخله على بعض Views، ففي هذه الحالة يمكن عملها بطريقتين
اضافة الامر التالي الى Views
 @ {Layout = null؛}
او تحديد تصميم من ملف Layout_ اخر في الصفحه