ASP.NET MVC - Gaya dan Tata Letak
- Halaman Sebelumnya Folder MVC
- Halaman Berikutnya Kontrol MVC
Untuk belajar ASP.NET MVC, kita akan membangun aplikasi Internet.
Bagian 3:Tambahkan gaya dan penampilan yang seragam (tata letak).
Tambahkan tata letak
Berkas _Layout.cshtml mewakili tata letak setiap halaman aplikasi. Dia berada di dalam folder Shared di folder Views.
Buka berkas ini, ganti kontennya dengan:
<!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. Hak Cipta Diutamakan.</p>
</section>
</body>
</html>
HTML Helper
Dalam kode di atas, HTML helper digunakan untuk mengubah output HTML:
@Url.Content() - Dimasukkan konten URL di sini.
@Html.ActionLink() - HTML link disini dimasukkan.
Kami akan membahas HTML helper di bagian akhir tutorial ini.
Syarat Razor
Dalam kode di atas, kode yang diwarnai merah adalah penggunaan Razor tag C#.
@ViewBag.Title - Masukkan judul halaman di sini.
@RenderBody() - Disini menampilkan konten halaman.
Anda dapat mengakses di Panduan Razorbelajar Razor tag yang ditulis dalam C# dan VB (Visual Basic)
Tambah gaya
Tabel gaya aplikasi adalah Site.css. Terletak di dalam folder Content.
Buka berkas Site.css dan ganti kontennya dengan:
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 style ------------------------------*/
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;
/* Properti CSS3 */
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
/* Gaya Form ------------------------------*/
fieldset
{
padding-left: 12px;
}
label fieldset
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Gaya Data ------------------------------*/
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
Berkas _ViewStart di folder Shared (berada di dalam folder Views) mengandung konten berikut:
@{Layout = "~/Views/Shared/_Layout.cshtml";}
Kode ini akan ditambahkan otomatis ke semua tampilan yang ditampilkan oleh aplikasi.
Jika file ini dihapus, maka kode ini harus ditambahkan ke semua tampilan.
Anda akan belajar lebih banyak tentang tampilan di bab berikutnya di tutorial ini.
- Halaman Sebelumnya Folder MVC
- Halaman Berikutnya Kontrol MVC
