ASP.NET MVC - لائاوت اور سائز
- پچھلے صفحے ایم وی سی فائل
- آئندہ صفحہ ایم وی سی کنٹرولر
آپ کا آئی اینٹرنٹ ایپلی کیشن تعلیم کے لئے بنائیں گے۔
قسمت 3:لائاوت کا اثر اور سائز کا یکساں پیمانہ شامل کریں (لائاوت)
لائاوت میں شامل کریں
فائل _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("درباره", "درباره", "خانه")</li>
</ul>
<section id="main">
@RenderBody()
<p>کپی رایت و3شول 2012. همه حقوق محفوظ است.</p>
</section>
</body>
</html>
هلههای HTML
در کد بالا، هلههای HTML برای تغییر خروجی HTML استفاده شدهاند:
@Url.Content() - محتوای URL در اینجا قرار داده میشود.
@Html.ActionLink() - لینک HTML در اینجا قرار داده میشود.
ما در فصلهای بعدی این آموزش به HTML هلهها خواهیم پرداخت.
ریزر زبان
در کد بالا، کد قرمز نشاندهنده کدی است که با استفاده از علامتهای Razor نوشته شده است.
@ViewBag.Title - عنوان صفحه در اینجا قرار داده میشود.
@RenderBody() - محتوای صفحه در اینجا نمایش داده میشود.
شما میتوانید در آموزش Razorدر منبع C# و VB (ویژوال بیسک) نوشته شده توسط Razor یاد بگیرید.
استایل اضافه کنید
استایل برنامه Site.css است. آن در پوشه Content قرار دارد.
فایل Site.css را باز کنید و محتوایش را با: جایگزین کنید
بادی
{
فونت: "تروبوتچت ایمس"، وردنادا، سان سیریف;
بگرونگرنگ: #5c87b2;
رنگ: #696969;
}
h1
{
کفش: 3پیکسلو جامد #cc9900;
فونت: جورجیا، سیریف;
رنگ: #996600;
}
#main
{
پیدینگ: 20پیکسلو;
background-color: #ffffff;
برجستگی: 0 4پیکسلو 4پیکسلو 4پیکسلو;
}
a
{
رنگ: #034af3;
}
/* استایل منو ------------------------------*/
ul#menu
{
پیدینگ: 0پیکسلو;
پوزیشن: رلیوتیو;
مارچن: 0;
}
ul#menu li
{
دسپلوی: اینلاین;
}
ul#menu li a
{
بگرونگرنگ: #e8eef4;
پیدینگ: 10پیکسلو 20پیکسلو;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
/* فرم استایل ------------------------------*/
fieldset
{
padding-left: 12px;
}
fieldset label
{
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 فائل
Shared فولدر (Views فولدر میں واقع) میں _ViewStart فائل کا محتوا مندرجہ ذیل ہے:
@{Layout = "~/Views/Shared/_Layout.cshtml";}
یہ کوڈ خودکار طور پر ایپلی کیشن کا اظہار کرنے والی تمام ویو میں شامل ہوتا ہے。
اگر اس فائل کو حذف کیا جائے تو اس کا کوئی بھی ویو کو اس کو شامل کرنا ضروری ہوگا。
آپ اس درس کے بعد کے فصل میں ویو کی زیادہ معلومات سیکھیں گے。
- پچھلے صفحے ایم وی سی فائل
- آئندہ صفحہ ایم وی سی کنٹرولر
