Susun atur MVC

ASP.NET MVC - Gaya dan Reka Letak

Untuk mempelajari ASP.NET MVC, kami akan membina aplikasi Internet.

Bahagian 3: Menambah gaya dan rupa bersatu (reka letak).

Tambah reka letak

Fail _Layout.cshtml mewakili reka letak untuk setiap halaman dalam aplikasi. Ia terletak dalam folder Kongsi dalam folder Views.

Buka fail _Layout.cshtml dan gantikan kandungan 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>
<badan>
<ul id="menu">
< li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Movies", "Indeks", "Filem")</li>
<li>@Html.ActionLink("Perihal", "Perihal", "Rumah"</li>
</ul>
<section id="main">
@RenderBody()
< ;p>Hak Cipta W3CSchool 2012. Hak Cipta Terpelihara.</p>
</section>
</body>
</html>

HTML Helper

Dalam kod di atas, HTML helper digunakan untuk mengubah suai output HTML:

@Url.Content() - Kandungan URL akan dimasukkan di sini.

@Html.ActionLink() - Pautan HTML akan disisipkan di sini.

Anda akan mengetahui lebih lanjut tentang pembantu HTML dalam bab seterusnya dalam tutorial ini.

Sintaks pisau cukur

Dalam kod di atas, kod yang ditandakan dengan warna merah ialah C# menggunakan penanda Razor.

@ViewBag.Title - Tajuk halaman akan disisipkan di sini.

@RenderBody() - Kandungan halaman akan dipaparkan di sini.

Anda boleh mempelajari tentang penanda Razor untuk C# dan VB (Visual Basic) dalam tutorial Razor kami.

Tambah gaya

Lembaran gaya aplikasi ialah Site.css, terletak dalam folder Kandungan.

Buka fail Site.css dan gantikan kandungannya dengan:

body
{
font: "Trebuchet MS", Verdana, sans-serif;
warna latar belakang: #5c87b2;
warna: #696969;
}
h1
{
bahagian bawah sempadan: 3px pepejal #cc9900;
font: Georgia, serif;
warna: #996600;
}
#utama
{
padding: 20px;
warna latar belakang: #ffffff;
jejari sempadan: 0 4px 4px 4px;
}
a
{
warna: #034af3;
}
/* Gaya Menu ---------------------------------*/
ul#menu
{
padding : 0px;
kedudukan: relatif;
margin: 0;
}
ul#menu li
{
paparan: sebaris;
}
ul#menu li a
{
warna latar belakang: #e8eef4;
padding: 10px 20px;
teks-hiasan: tiada;
garis-tinggi: 2.8em;
/*CSS3 hartanah*/
jejari sempadan: 4px 4px 0 0;
}
ul#menu li a:hover
{
warna latar belakang: #ffffff;
}
/* Membentuk Gaya ---------------------------------*/
set medan
{
padding-kiri : 12px;
}
label set medan
{
paparan: blok;
padding: 4px;
}
input[type="text"], input[type= "kata laluan"]
{
lebar: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Gaya Data ----------------------------------*/
table.data
{
latar belakang -warna:# ffffff;
sempadan:1px pepejal #c3c3c3;
sempadan-runtuh:runtuh;
lebar:100%;
}
jadual.data ke
{
warna latar belakang :#e8eef4;
sempadan:1px pepejal #c3c3c3;
padding:3px;
}
jadual.data td
{
sempadan:1px pepejal #c3c3c3;
padding :3px;
}

Fail _ViewStart

Fail _ViewStart dalam folder Kongsi (terletak dalam folder Views) mengandungi kandungan berikut:

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

Kod ini ditambah secara automatik pada semua paparan yang dipaparkan oleh aplikasi .

Jika anda memadamkan fail ini, anda mesti menambah baris kod ini pada semua paparan.

Anda akan mengetahui lebih lanjut tentang paparan dalam bab seterusnya dalam tutorial ini.