ASP.NET MVC وتخطيط الصفحة
من أجل تعلم ASP.NET MVC، فإننا سوف بناء تطبيقات الإنترنت.
الجزء 3: إضافة الأساليب ومظهر موحد (تخطيط).
إضافة تخطيط
يمثل ملف _Layout.cshtml تخطيط تطبيق كل صفحة. وهو موجود في المجلدات المشتركة المشاهدات المجلد.
فتح ملف _Layout.cshtml، إلى استبدال محتويات إلى:
<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 W3CSchool 2012. All Rights Reserved.</p>
</section>
</body>
</html>
مساعد HTML
في رمز أعلاه، يتم استخدام تعليمات HTML لتعديل إخراج HTML:
@ Url.Content () - سيتم إدراج محتوى URL هنا.
@ Html.ActionLink () - سيتم إدراج رابط HTML هنا.
في فصل لاحق من هذا البرنامج التعليمي، وسوف تتعلم المزيد عن HTML المعرفة المساعد.
الحلاقة في بناء الجملة
في رمز أعلاه، يتم وضع علامة التعليمات البرمجية في علامات حمراء باستخدام الشفرة C #.
@ ViewBag.Title - سيتم إدراج عنوان الصفحة هنا.
سيتم تقديم محتوى الصفحة هنا -RenderBody ().
يمكنك في موقعنا الشفرة تعليمي معرفة الشفرة C # و VB (البصرية الأساسية) للعلامة.
مضيفا ستايل
ورقة أسلوب التطبيق هو Site.css، وتقع في مجلد المحتوى.
فتح ملف Site.css، إلى استبدال محتويات إلى:
{
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 يحتوي على ما يلي:
يتم إضافة هذا الرمز تلقائيا إلى جميع وجهات النظر المعروضة من قبل التطبيق.
إذا قمت بحذف هذا الملف، يجب إضافة هذا الخط من التعليمات البرمجية إلى جميع وجهات النظر.
في فصول لاحقة من هذا البرنامج التعليمي، وسوف تتعلم المزيد عن الرأي.