Thiết kế web bằng ASP.NET MVC (Phần 4) – Style và Layout theo http://esvn.vn/
Thêm 1 layout
File _Layout.cshtml trình bày layout của mỗi trang trong ứng dụng.Nó được đặt trong thư mục Shared nằm trong thư mục Views.
Mở file này ra và sẽ thấy nội dung như sau:
<!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 W3schools 2012. All Rights Reserved.</p>
</section>
</body>
</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 W3schools 2012. All Rights Reserved.</p>
</section>
</body>
</html>
HTML Helper
Trong đoạn code trên, HTML Helpers được dùng để điều chỉnh HTML ra:
@Url.Content() – Chỉ ra nội dung của URL sẽ hiển thị.
@Html.ActionLink() – Chỉ ra là URL sẽ được hiển thị.
Bạn sẽ được học thêm về HTML Helper trong phần sau của khóa học.
Cú pháp Razor
Trong đoạn code trên, code được đánh dấu màu đỏ là C# sử dụng Razor.
@ViewBag.Title - Chỉ ra tiêu đề trang sẽ được hiển thị.
@RenderBody() – Nội dung trang sẽ được hiển thị.
Bạn có thể tham khảo thêm về Razor markup cả C# và VB trên các trang liên quan.
Thêm Style Sheet
Style sheet của ứng dụng được gọi trong Site.css. Nó được đặt trong thư mục Content.
Mở file Site.css và xem nội dung:
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;
}
{
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;
}
File _ViewStart
File _ViewStart trong thư mục Shared (bên trong thư mục Views) chứa các nội dung sau:
@{Layout ="~/Views/Shared/_Layout.cshtml";}
Code này sẽ tự động thêm vào trong tất cả các view của ứng dụng.
Nếu bạn xóa file này, bạn sẽ phải thêm dòng này vào tất cả các view.
Nhận xét
Đăng nhận xét