ASP.NET MVC - शैली और लाइआउट
- पिछला पृष्ठ एमवीसी फ़ोल्डर
- अगला पृष्ठ एमवीसी कंट्रोलर
ASP.NET MVC सीखने के लिए, हम एक इंटरनेट एप्लीकेशन का निर्माण करेंगे。
अंश 3:शैली और एकरूपता (लाइआउट) जोड़ें
लाइआउट जोड़ें
फ़ाइल _Layout.cshtml यह हमारे एप्लीकेशन के प्रत्येक पेज के लाइआउट का प्रतिनिधित्व करता है। यह Views कोश में Shared कोश में स्थित है。
इस फ़ाइल को खोलें और इसके सामग्री को इसके स्थान पर बदलें:
<!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 हेल्पर
उपरी कोड में, HTML हेल्पर का उपयोग HTML आउटपुट को संशोधित करने के लिए किया गया है:
@Url.Content() - URL सामग्री यहाँ जोड़ें。
@Html.ActionLink() - HTML लिंक यहाँ जोड़ें。
हम इस ट्यूटोरियल के बाद के अध्याय में HTML हेल्पर के बारे में बताएंगे。
रेज़र ग्रामर
उपरी कोड में, लाल रंग से चिह्नित किए गए कोड Razor टैग का है C#。
@ViewBag.Title - यहाँ पृष्ठ शीर्षक जोड़ें。
@RenderBody() - यहाँ पृष्ठ सामग्री प्रस्तुत करें。
हमारे Razor ट्यूटोरियलC# और VB (विजुअल बेसिक) से लिखे Razor टैग इसमें सीखें。
स्टाइल जोड़ें
अनुप्रयोग का स्टाइल शीट है Site.css. यह Content फ़ोल्डर में है。
फ़ाइल Site.css खोलें और उसके सामग्री को बदलें:
body
{
फ़ॉन्ट: "Trebuchet MS", Verdana, sans-serif;
बैकग्राउंड-कलर: #5c87b2;
कलर: #696969;
}
h1
{
बॉर्डर-बॉटम: 3पिक्सल सॉलिड #cc9900;
फ़ॉन्ट: Georgia, serif;
कलर: #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";}
यह कोड स्वचालित रूप से अनुप्रयोग द्वारा दिखाए जाने वाले सभी दृश्यों में जोड़ा जाता है。
यदि आप इस फ़ाइल को मिटाएंगे, तो आपको सभी दृश्यों में इस कोड को जोड़ना होगा。
आप इस पाठ्यक्रम के बाद की अनुच्छेदों में दृश्य के बारे में अधिक जानेंगे。
- पिछला पृष्ठ एमवीसी फ़ोल्डर
- अगला पृष्ठ एमवीसी कंट्रोलर
