ASP.NET MVC - النمط والتصميم

لدراسة ASP.NET MVC، سنقوم ببناء تطبيق إنترنت.

جزء 3:إضافة النمط واللغة المتناسقة (التصميم).

إضافة تصميم

ملف _Layout.cshtml يمثل تصميم كل صفحة في التطبيق. يقع في مجلد Shared في مجلد Views.

فتح هذا الملف، واستبدل محتوياته بما يلي:

<!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(\"Movies\", \"Index\", \"Movies\")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul> 
<section id="main">
@RenderBody()
<p>حقوق النشر W3school 2012. جميع الحقوق محفوظة.</p>
</section>
</body>
</html>

مساعدات_HTML

في الكود أعلاه، يتم استخدام مساعدات HTML لتحرير مخرجات HTML:

@Url.Content() - يتم إدراج محتوى URL هنا.

@Html.ActionLink() - يتم إدراج رابط HTML هنا.

سنشرح في فصل لاحق من هذا الدليل كيفية استخدام مساعدات HTML.

نحو Razor

في الكود أعلاه، الكود المميز باللون الأحمر هو مكتوب باستخدام علامات Razor.

@ViewBag.Title - هنا يتم إدراج عنوان الصفحة.

@RenderBody() - هنا يتم عرض محتوى الصفحة.

يمكنك العثور على دليل_Razorفي هذا الموقع يمكنك تعلم C# و VB (Visual Basic) مكتوبة باستخدام علامات Razor.

إضافة_النمط

نمط_البرنامج هو Site.css. يقع في مجلد Content.

افتح ملف Site.css، وقم بتبديل محتواه إلى:

body
{
نمط: "Trebuchet MS", Verdana, sans-serif;
لون_الخلفية: #5c87b2;
لون: #696969;
}
h1
{
حجم_الخط: 3px_مستقيم #cc9900;
نمط: Georgia, serif;
لون: #996600;
}
#main
{
حجم_التمديد: 20px;
background-color: #ffffff;
حجم_الجولة: 0 4px 4px 4px;
}
a
{
لون: #034af3; 
}
/* نمط_القائمة ------------------------------*/
ul#menu
{
حجم_التمديد: 0px;
وضع: نسبي;
حجم_التمديد: 0;
}
ul#menu li
{
عرض: داخل;
}
ul#menu li a 
{
لون_الخلفية: #e8eef4;
حجم_التمديد: 10px_20px;
text-decoration: none;
line-height: 2.8em;
/*خصائص CSS3*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
} 
/* استyles النموذج ------------------------------*/
fieldset
{
padding-left: 12px;
} 
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* استyles البيانات ------------------------------*/
table.data
{
background-color:#ffffff;
border:1px solid #c3c3c3;
border-collapse:collapse;
width:100%;
}
table.data th
{
background-color:#e8eef4;
border:1px solid #c3c3c3;
padding:3px;
}
table.data td 
{
border:1px solid #c3c3c3;
padding:3px;
}

_ViewStart ملف

يحتوي ملف _ViewStart الموجود في مجلد Shared (الموجود داخل مجلد Views) على ما يلي:

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

يتم إضافة هذا الكود تلقائيًا إلى جميع الرؤى التي تُعرضها التطبيق.

إذا تم حذف هذا الملف، يجب إضافة هذا الكود إلى جميع الرؤى.

ستتعلم المزيد عن الرؤى في الفصول التالية من هذا الدرس.