ASP.NET MVC - Estilo at Layout

  • ទៅកាន់ទំព័រមុខ MVC Folder
  • ទៅកាន់ទំព័របន្ទាប់ MVC Controller

Para matututo ang ASP.NET MVC, magbibuo kami ng isang Internet application.

Bakuran 3:Magdagdag ng estilo at pagkakasunod-sunod na hitsura (layout).

Magdagdag ng layout

File na _Layout.cshtml ay nangangahulugan ng paglalaro ng bawat pahina ng aplikasyon. Ito ay nasa folder na Shared sa Views folder.

Buksan ang file na ito, palitan ang nilalaman nito ng:

<!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 helper

Sa itaas na kodigo, ang HTML helper ay ginamit upang baguhin ang pagkakakitaan ng HTML:

@Url.Content() - Maglagay ng URL content dito.

@Html.ActionLink() - Maglagay ng HTML link dito.

Magiging tuturuan namin sa susunod na mga kabanata ng tutorial ang HTML helper.

Razor Syntax

Sa itaas na kodigo, ang kodigo na may pulang markasyon ay ginamit ang C# na Razor tags.

@ViewBag.Title - Maglagay ng pamagat ng pahina dito.

@RenderBody() - Ito ang pinapakita ang nilalaman ng pahina.

Maaari kang makita sa aming Tuturuan ng RazorSa amin upang malaman ang Razor tags na ginawa sa C# at VB (Visual Basic).

Magdagdag ng estilo

Ang stylesheet ng aplikasyon ay Site.css. Ito ay nasa folder na Content.

Buksan ang file na Site.css at palitan ang nilalaman nito sa:

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;
}
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 ឯកសារ

ឯកសារ _ViewStart នៅក្នុងថត Shared (ស្ថិតនៅក្នុង Views) មានមាតិដូចខាងក្រោម:

@{Layout = "~/Views/Shared/_Layout.cshtml";}

កូដនេះត្រូវបានបន្ថែមជាថ្មីដោយស្វ័យប្រវត្តិទៅលើទស្សនដែលត្រូវបានបង្ហាញដោយកម្មវិធី。

ប្រសិនបើលុបរបស់ឯកសារនេះ អ្នកត្រូវតែបន្ថែមនាមកូដនេះទៅកាន់ទស្សនទាំងអស់。

អ្នកនឹងរៀនពីការទទួលបានចំនួនជាច្រើនអំពីទស្សនដែលនឹងត្រូវបានបង្ហាញនៅក្នុងវគ្គក្រោយនេះ。

  • ទៅកាន់ទំព័រមុខ MVC Folder
  • ទៅកាន់ទំព័របន្ទាប់ MVC Controller