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 Helper

در کد بالا، HTML Helper برای تغییر خروجی HTML استفاده شده است:

@Url.Content() - محتوای URL در اینجا قرار می‌گیرد.

@Html.ActionLink() - لینک HTML در اینجا قرار می‌گیرد.

ما در بخش‌های بعدی این آموزش به HTML Helper‌ها خواهیم پرداخت.

نحوه‌ی نوشتن Razor

در کد بالا، کد قرمز نشان‌دهنده کدی است که با استفاده از تگ‌های Razor نوشته شده است.

@ViewBag.Title - عنوان صفحه در اینجا قرار می‌گیرد.

@RenderBody() - محتوای صفحه در اینجا نمایش داده می‌شود.

می‌توانید در آموزش Razorدر اینجا از تگ‌های Razor که به زبان C# و VB (Visual Basic) نوشته شده‌اند، یاد می‌گیرید.

استایل اضافه کنید

استایل‌های برنامه Site.css است. این فایل در پوشه Content قرار دارد.

فایل 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; 
}
/*样式菜单-----------------------------*/
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 */
border-radius: 4px 4px 0 0;
}
a:hover ul#menu li
{
background-color: #ffffff;
} 
/* استایل فرم ------------------------------*/
fieldset
{
padding-left: 12px;
} 
label fieldset
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* استایل داده ------------------------------*/
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";}

این کد به صورت خودکار به همه دیدارهایی که توسط برنامه نمایش داده می‌شوند، اضافه می‌شود.

اگر این فایل را حذف کنید، باید این کد را به همه دیدارها اضافه کنید.

شما در بخش‌های بعدی این درس بیشتر درباره ویژگی‌های دیدار خواهید آموخت.