يقدم هذا القسم تخطيط كل صفحة في تطبيق ASP.NET MVC وكيفية تعيين النمط.
لتعلم ASP.NET MVC، سنقوم ببناء تطبيق إنترنت.
الجزء 3: إضافة نمط ومظهر موحد (تخطيط).
يمثل الملف _Layout.cshtml تخطيط كل صفحة في التطبيق. إنه موجود في المجلد المشترك في مجلد طرق العرض.
افتح الملف _Layout.cshtml واستبدل المحتوى بما يلي:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title </title> <link href="@Url.Content("~/Content/Site.css") " rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js") "></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js") "></script> </head> <body> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home") </li> <li>@Html.ActionLink("أفلام"، "فهرس"، "أفلام") </li> <li>@Html.ActionLink("حول"، "حول"، "الصفحة الرئيسية") </li> </ul> <section id="main"> @RenderBody() <p>حقوق الطبع والنشر لـ W3CSchool 2012. جميع الحقوق محفوظة.</p> </section> </body> </html>في الكود أعلاه، يتم استخدام مساعد HTML لتعديل مخرجات HTML:
@Url.Content() - سيتم إدراج محتوى URL هنا.
@Html.ActionLink() - سيتم إدراج رابط HTML هنا.
ستتعلم المزيد عن مساعدات HTML في الفصول اللاحقة من هذا البرنامج التعليمي.
في الكود أعلاه، الكود المميز باللون الأحمر هو C# باستخدام علامات Razor.
@ViewBag.Title - سيتم إدراج عنوان الصفحة هنا.
@RenderBody() - سيتم عرض محتوى الصفحة هنا.
يمكنك التعرف على علامات Razor لـ C# وVB (Visual Basic) في دروس Razor التعليمية.
ورقة أنماط التطبيق هي Site.css، الموجودة في مجلد المحتوى.
افتح الملف Site.css واستبدل المحتوى بما يلي:
body { الخط: "Trebuchet MS"، Verdana، sans-serif؛ لون الخلفية: #5c87b2؛ } h1 { border-bottom: 3px Solid #cc9900; } #main { الحشو: 20 بكسل لون الخلفية: #ffffff؛ نصف قطر الحدود: 0 4px 4px 4px; } أ { اللون: #034af3 } /* أنماط القائمة --------------------------------- -*/ ul #menu { الحشو: 0px; الموضع: الهامش: 0 } ul#menu li { العرض: مضمن } ul#menu li a { لون الخلفية: #e8eef4; زخرفة النص: لا شيء؛ ارتفاع الخط: 2.8em؛ / * خصائص CSS3 * / border-radius: 4px 4px 0 0; } ul#menu li a:hover { لون الخلفية: #ffffff } /* أنماط النماذج - --------------------------------*/ مجموعة الحقول { padding-left: 12px } تسمية مجموعة الحقول { العرض: كتلة؛ الحشو: 4 بكسل } الإدخال[نوع = "نص"]، الإدخال [نوع = كلمة المرور"] { العرض: 300 بكسل؛ ---------------------*/ table.data { لون الخلفية:#ffffff; border:1px Solid #c3c3c3; % } table.data th { لون الخلفية:#e8eef4; الحدود: 1 بكسل الصلبة #c3c3c3؛ الحشو: 3 بكسل } table.data td { الحدود: 1 بكسل الصلبة #c3c3c3؛يحتوي ملف _ViewStart الموجود في المجلد المشترك (الموجود داخل مجلد طرق العرض) على المحتوى التالي:
@{Layout = "~/Views/Shared/_Layout.cshtml";}تتم إضافة هذا الرمز تلقائيًا إلى جميع طرق العرض التي يعرضها التطبيق.
إذا قمت بحذف هذا الملف، فيجب إضافة هذا السطر من التعليمات البرمجية إلى كافة طرق العرض.
ستتعلم المزيد حول طرق العرض في الفصول اللاحقة من هذا البرنامج التعليمي.
توجد طريقة عرض ViewStart بشكل عام ضمن طريقة عرض طرق العرض مباشرةً. بالطبع، يمكن أن يكون هناك أيضًا عرض ViewStart ضمن مجلدات أخرى (شريطة أن يكون هذا المجلد ضمن مجلد العروض).