Untuk mempelajari ASP.NET MVC, kita Membangun Aplikasi Internet.
Bagian III: Menambahkan Styles dan Lihat Konsisten (Layout) .
Menambahkan Layout
File _Layout.cshtml mewakili tata letak setiap halaman dalam aplikasi. Hal ini terletak di folder bersama di dalam folder Views.
Buka file dan swap konten dengan ini:
<!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 w3ii 2012. All Rights Reserved.</p>
</section>
</body>
</html>Pembantu HTML
Pada kode di atas, pembantu HTML digunakan untuk memodifikasi keluaran HTML:
@url. Content() - isi URL akan dimasukkan di sini.
@Html. ActionLink() - tautan HTML akan dimasukkan di sini.
Anda akan belajar lebih banyak tentang pembantu HTML dalam bab selanjutnya dari tutorial ini.
Razor Syntax
Pada kode diatas, kode ditandai merah C # menggunakan Razor markup.
@ ViewBag.Title - Judul halaman akan dimasukkan di sini.
@ RenderBody() - Isi halaman akan diberikan di sini.
Anda dapat mempelajari tentang Razor markup untuk kedua C # dan VB (Visual Basic) di kami Razor tutorial .
menambahkan Styles
Style sheet untuk aplikasi disebut Site.css. Hal ini terletak di folder Konten.
Buka file Site.css dan menukar isi dengan ini:
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;
}
/* 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;
}
The _ViewStart Berkas
File _ViewStart dalam folder bersama (inside the Views folder) berisi konten berikut:
@{Layout = "~/Views/Shared/_Layout.cshtml";}Kode ini otomatis ditambahkan ke semua pandangan yang ditampilkan oleh aplikasi.
Jika Anda menghapus file ini, Anda harus menambahkan baris ini untuk semua pandangan.
Anda akan belajar lebih banyak tentang pandangan dalam bab berikutnya dari tutorial ini.