لتعلم ASP.NET MVC، نحن بناء تطبيق شبكة الإنترنت.
الجزء الثالث: إضافة أنماط ومظهرا متناسقا (Layout) .
إضافة تخطيط
الملف _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("Movies",
"Index", "Movies") </li>
<li> @Html.ActionLink("About", "About",
"Home") </li>
</ul>
<section id="main">
@RenderBody()
<p>Copyright w3ii 2012. All Rights Reserved.</p>
</section>
</body>
</html>المساعدون HTML
في رمز أعلاه، وتستخدم المساعدين HTML لتعديل الانتاج HTML:
url. Content() سيتم إدراج محتوى URL هنا -.
Html. ActionLink() - سيتم إدراج رابط HTML هنا.
سوف تتعلم المزيد عن المساعدين HTML في فصل لاحق من هذا البرنامج التعليمي.
Razor في بناء الجملة
في رمز أعلاه، وضع علامة رمز الحمراء هي C # باستخدام Razor العلامات.
@ ViewBag.Title - سيتم إدراج عنوان الصفحة هنا.
@ RenderBody() - محتوى الصفحة سيتم تقديم هنا.
يمكنك التعرف على Razor الترميز لكلا C # و VB (Visual Basic) في منطقتنا Razor البرنامج التعليمي .
إضافة أنماط
ويسمى ورقة الأنماط لتطبيق Site.css. وهو موجود في المجلد المحتوى.
فتح ملف Site.css وتبديل المحتوى مع هذا:
body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color:
#5c87b2;
color: #696969;
}
h1
{
border-bottom: 3px solid
#cc9900;
font: Georgia, serif;
color: #996600;
}
#main
{
padding: 20px;
background-color: #ffffff;
border-radius: 0 4px 4px
4px;
}
a
{
color: #034af3;
}
/* Menu Styles
------------------------------*/
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display:
inline;
}
ul#menu li a
{
background-color: #e8eef4;
padding:
10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3
properties*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
/* Forms Styles
------------------------------*/
fieldset
{
padding-left: 12px;
}
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Data Styles
------------------------------*/
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 في المجلد المشترك (inside the Views folder) يحتوي على المحتوى التالي:
@{Layout = "~/Views/Shared/_Layout.cshtml";}يضاف هذا الرمز تلقائيا إلى جميع وجهات النظر المعروضة من قبل التطبيق.
إذا قمت بإزالة هذا الملف، يجب إضافة هذا الخط إلى جميع وجهات النظر.
سوف تتعلم المزيد عن وجهات في فصل لاحق من هذا البرنامج التعليمي.