آموزش MVC-مفهوم Layout
برای آموزش ASP.NET MVC، یک برنامه کاربردی اینترنت ایجاد می کنیم.
قسمت سوم: افزودن استایل و نمای ثابت (Layout)
افزودن Layout
فایل 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 W3schools 2012. All Rights Reserved.</p>
</section>
</body>
</html>
HTML Helpers
در کد بالا، HTML Helper ها برای تغییر خروجی HTML استفاده گردیده اند:
()Url.Content@ - محتوای URL، داخل آرگومان این متد قرار می گیرد.
()Html.ActionLink@ - لینک HTML، داخل آرگومان این متد قرار می گیرد.
در رابطه با HTML Helper ها در آموزش های آتی بیشتر خواهید آموخت.
گرامر Razor
در کد بالا، کدهایی که با رنگ قرمز نمایش داده شده است، کدهای #C هستند که با علامت گذاری Razor مشخص گردیده اند.
ViewBag.Title@ - عنوان صفحه در این ویژگی قرار می گیرد.
()RenderBody@ - صفحه محتوا در این قسمت قرار می گیرد.
در رابطه با علامت گذاری Razor در زبان های #C و VB در بیاموز Razor Intro توضیح کاملی آورده شده است.
افزودن استایل
style sheet برنامه Site.css است. این فایل در فولدر Content قرار دارد.
فایل 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
فایل View_Start_ در فولدر Shared (داخل فولدر Views) دارای محتوای زیر است:
این کد به صورت خودکار به تمام View هایی که در برنامه نمایش داده می شوند اضافه می شود.
اگر قصد دارید این فایل را حذف کنید، باید این خط را به تمام view ها اضافه نمایید.
در رابطه با view ها در آموزش های بعدی بیشتر خواهید آموخت.
- نوشته شده توسط مظاهر نصوحی
- بازدید: 17638