ASP.NET MVC - Gaya dan Bentuk

Untuk belajar ASP.NET MVC, kita akan membina aplikasi Internet.

Bagian 3:Tambahkan gaya dan penampilan seragam (bentuk).

Tambahkan bentuk

Fail _Layout.cshtml menunjukkan bentuk setiap halaman aplikasi. Ia berada di dalam folder Shared di folder Views.

Buka fail ini, dan ganti kandungannya 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("Rumah", "Index", "Rumah")</li>
<li>@Html.ActionLink("Bilik", "Index", "Bilik")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul> 
<section id="main">
@RenderBody()
<p>Copyright W3school 2012. Hak Cipta Dipertahankan.</p>
</section>
</body>
</html>

Pemantu HTML

Dalam kod di atas, pemantu HTML digunakan untuk mengubah output HTML:

@Url.Content() - URL kandungan di tempat ini masukkan.

@Html.ActionLink() - HTML pautan di tempat ini masukkan.

Kami akan menghuraikan HTML pemantu di bab yang akan datang dalam pengajaran ini.

Syarat Razor

Dalam kod di atas, kod yang ditandakan merah adalah digunakan Razor markah C#.

@ViewBag.Title - masukkan tajuk laman di tempat ini.

@RenderBody() - di tempat ini paparkan kandungan laman.

Anda boleh mendapati di Razor pengajarandalam belajar C# dan VB (Visual Basic) yang ditulis dengan Razor markah.

tambah gaya

gaya laman aplikasi adalah Site.css. Ialetak di dalam folder Content.

buka fail Site.css, dan ganti kandungannya dengan:

body
{
font: "Trebuchet MS", Verdana, sans-serif;
warna latar belakang: #5c87b2;
warna: #696969;
}
h1
{
garis bawah: 3px solid #cc9900;
font: Georgia, serif;
warna: #996600;
}
#main
{
mengatur: 20px;
background-color: #ffffff;
radius pinggir: 0 4px 4px 4px;
}
a
{
warna: #034af3; 
}
/* gaya menu ------------------------------*/
ul#menu
{
mengatur: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
}
ul#menu li a 
{
warna latar belakang: #e8eef4;
mengatur: 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;
} 
/* 表单样式 ------------------------------*/
fieldset
{
padding-left: 12px;
} 
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* 数据样式 ------------------------------*/
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 文件

Shared 文件夹（位于 Views 文件夹内）中的 _ViewStart 文件包含以下内容：

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

这段代码被自动添加到由应用程序显示的所有视图。

如果删除该文件，则必须向所有视图添加这段代码。

您将在本教程稍后的章节学到更多有关视图的知识。