ASP.NET MVC dan tata letak halaman
Dalam rangka untuk belajar ASP.NET MVC, kita akan membangun sebuah aplikasi Internet.
Bagian 3: Menambahkan gaya dan penampilan seragam (tata letak).
Tambahkan tata letak
_Layout.cshtml Berkas mewakili tata letak aplikasi setiap halaman. Hal ini terletak di folder bersama folder Views.
Buka file _Layout.cshtml, untuk mengganti isi ke:
<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 W3CSchool 2012. All Rights Reserved.</p>
</section>
</body>
</html>
HTML Helper
Pada kode di atas, Bantuan HTML digunakan untuk memodifikasi output HTML:
@ Url.Content () - konten URL akan dimasukkan di sini.
@ Html.ActionLink () - Link HTML akan dimasukkan di sini.
Dalam bab selanjutnya dari tutorial ini, Anda akan belajar lebih banyak tentang HTML pengetahuan helper.
Razor Sintaks
Pada kode diatas, kode ini ditandai penanda merah menggunakan Razor C #.
@ ViewBag.Title - judul halaman akan dimasukkan di sini.
@RenderBody () - Isi Halaman akan disajikan di sini.
Anda dapat di kami tutorial Razor belajar tentang Razor C # dan VB (Visual Basic) dari tag.
menambahkan Style
style sheet aplikasi yang Site.css, yang terletak di folder Content.
Buka file Site.css, untuk mengganti isi ke:
{
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;
}
/* Menu Styles ------------------------------*/
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 properties*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
/* Forms Styles ------------------------------*/
fieldset
{
padding-left: 12px;
}
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Data Styles ------------------------------*/
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 Berkas
Folder bersama (terletak di folder Views) dalam file _ViewStart berisi berikut:
Kode ini otomatis ditambahkan ke semua tampilan yang ditampilkan oleh aplikasi.
Jika Anda menghapus file ini, Anda harus menambahkan baris kode ini untuk semua pandangan.
Dalam bab-bab selanjutnya dari tutorial ini, Anda akan belajar lebih banyak tentang pandangan.