Bagian ini memperkenalkan tata letak setiap halaman dalam aplikasi ASP.NET MVC dan cara mengatur gayanya.
Untuk mempelajari ASP.NET MVC, kita akan membangun aplikasi Internet.
Bagian 3: Tambahkan gaya dan tampilan terpadu (tata letak).
File _Layout.cshtml mewakili tata letak setiap halaman dalam aplikasi. Itu terletak di folder Bersama di folder Tampilan.
Buka file _Layout.cshtml dan ganti isinya 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" /> <skrip src="@Url.Content("~/Scripts/jquery-1.5.1.min.js") "></skrip> <skrip src="@Url.Content("~/Scripts/modernizr-1.7.min.js") "></script> </head> <body> <ul id="menu"> <li>@Html.ActionLink("Beranda", "Indeks", "Beranda") </li> <li>@Html.ActionLink("Film", "Indeks", "Film") </li> <li>@Html.ActionLink("Tentang", "Tentang", "Beranda") </li> </ul> <bagian id="utama"> @RenderBody() <p>Hak Cipta W3CSchool 2012. Semua Hak Dilindungi Undang-Undang.</p> </bagian> </body> </html>Pada kode di atas, HTML helper digunakan untuk mengubah output HTML:
@Url.Content() - Konten URL akan disisipkan di sini.
@Html.ActionLink() - Tautan HTML akan disisipkan di sini.
Anda akan mempelajari lebih lanjut tentang pembantu HTML di bab selanjutnya dari tutorial ini.
Pada kode di atas, kode yang ditandai dengan warna merah adalah C# dengan menggunakan tag Razor.
@ViewBag.Title - Judul halaman akan disisipkan di sini.
@RenderBody() - Konten halaman akan dirender di sini.
Anda dapat mempelajari tentang markup Razor untuk C# dan VB (Visual Basic) di tutorial Razor kami.
Style sheet aplikasinya adalah Site.css, terletak di folder Content.
Buka file Site.css dan ganti isinya dengan:
body { font: "Trebuchet MS", Verdana, sans-serif; warna latar: #5c87b2; warna: #696969; } h1 { batas bawah: 3px solid #cc9900; } #main { padding: 20px; warna latar: #ffffff; 4px 4px 4px; } a { warna: #034af3 } /* Gaya Menu --------------------------------- -*/ ul #menu { padding: 0px; posisi: relatif; margin: 0; } ul#menu li { tampilan: inline; } ul#menu li a { warna latar: #e8eef4; dekorasi teks: tidak ada; tinggi garis: 2.8em; /*properti CSS3*/ radius batas: 4px 4px 0 0; } ul#menu li a:hover { warna latar: #ffffff; -----------------------------*/ kumpulan bidang { padding-kiri: 12 piksel; } label kumpulan bidang { tampilan: blok; ; input[type="text"], input[type="password"] { lebar: 300px; } input[type="submit"] { padding: 4px } /* Gaya Data --------- ---------------------*/ table.data { warna latar:#ffffff; batas:1px solid #c3c3c3; batas-runtuh:runtuhnya; %; } tabel.data th { warna latar:#e8eef4; batas:1px padat #c3c3c3; bantalan:3px; } tabel.data td { batas:1px padat #c3c3c3;File _ViewStart di folder Bersama (terletak di dalam folder Tampilan) berisi konten berikut:
@{Layout = "~/Views/Shared/_Layout.cshtml";}Kode ini secara otomatis ditambahkan ke semua tampilan yang ditampilkan oleh aplikasi.
Jika Anda menghapus file ini, Anda harus menambahkan baris kode ini ke semua tampilan.
Anda akan mempelajari lebih lanjut tentang tampilan di bab selanjutnya dari tutorial ini.
Tampilan ViewStart umumnya ada langsung di bawah tampilan Views. Tentu saja, ada juga ViewStart. lihat halaman di bawah folder lain (asalkan folder ini berada di bawah folder Views).