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>Copyright W3school 2012. All Rights Reserved.</p>
</section>
</body>
</html>
HTML ਹੈਲਪਰ
ਉੱਪਰ ਦੇ ਕੋਡ ਵਿੱਚ HTML ਹੈਲਪਰ ਵਰਤਿਆ ਗਿਆ ਹੈ ਕਿ HTML ਆਉਟਪੁੱਟ ਨੂੰ ਸੋਧਣ ਲਈ:
@Url.Content() - URL ਸਮੱਗਰੀ ਇੱਥੇ ਚੁੱਂਕੋ。
@Html.ActionLink() - HTML ਲਿੰਕ ਇੱਥੇ ਚੁੱਂਕੋ。
ਅਸੀਂ ਇਸ ਟੂਰੀਜ਼ ਦੇ ਬਾਅਦ ਦੇ ਚੈਪਟਰਾਂ ਵਿੱਚ HTML ਹੈਲਪਰ ਬਾਰੇ ਦੱਸਾਂਗੇ。
ریزر گرامر
ਉੱਪਰ ਦੇ ਕੋਡ ਵਿੱਚ ਲਾਲ ਰੰਗ ਦੇ ਕੋਡ ਹਨ Razor ਟੈਗ ਦੇ C# ਦੇ ਵਰਤੋਂ ਵਾਲੇ ਹਨ。
@ViewBag.Title - ਇੱਥੇ ਪੇਜ ਦੇ ਸਿਰਲੇਖ ਨੂੰ ਚੁੱਂਕੋ。
@RenderBody() - ਇੱਥੇ ਪੇਜ ਦੇ ਸਮੱਗਰੀ ਨੂੰ ਪੇਸ਼ ਕਰੋ。
ਸਾਡੇ 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;
بگارڈ کولر: #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;
ٹیکسٹ-ڈی کوریشن: نہیں;
لائن ہائی لائن: 2.8ایم;
/*CSS3 نمائش گاہیں*/
بوردر رائڈیئس: 4پایکس 4پایکس 0 0;
}
ال#منو لئی a:hover
{
بگارڈ کولر: #ffffff;
}
/* فرم نمائش ------------------------------*/
فیلڈسیٹ
{
پیدھنگ-لیفٹ: 12پایکس;
}
فیلڈسیٹ لبل
{
ڈسپلے: بلوک;
پیدھنگ: 4پایکس;
}
آئنپُٹ[type="ٹیکسٹ"], آئنپُٹ[type="پاسورڈ"]
{
وائڈت: 300پایکس;
}
آئنپُٹ[type="submit"]
{
پیدھنگ: 4پایکس;
}
/* اعداد نمائش ------------------------------*/
تبلے.data
{
بگارڈ کولر:#ffffff;
بوردر:1پایکس سولڈ #c3c3c3;
بوردر کالپرس:کالپرس;
وائڈت:100%;
}
تبلے.data th
{
بگارڈ کولر:#e8eef4;
بوردر:1پایکس سولڈ #c3c3c3;
پیدھنگ:3پایکس;
}
تبلے.data td
{
بوردر:1پایکس سولڈ #c3c3c3;
پیدھنگ:3پایکس;
}
_ViewStart فائل
شارڈ فولدر (Views فولدر میں واقع) میں _ViewStart فائل میں مندرجہ ذیل مواد شامل ہے:
@{Layout = "~/Views/Shared/_Layout.cshtml";}
یہ کوڈ خودکار طور پر اپلائی سیٹ کی جو ویو دکھائی دتی ہیں، سبھی ویوو میں اضافہ کیا جاتا ہے。
اگر یہ فائل حذف کی جائی تو اس کا کوڈ تمام ویوو میں اضافہ کیا جانا چاہئے。
آپ اس تعلیم میں بعد میں بھی ویو کی زیادہ معلومات سیکھیں گے。
- پچھلے پیچھے ایم وی سی فولدر
- پچھلے پیچھے ایم وی سی کنٹرولر
