ASP.NET MVC - Syle và Layout
- Trang trước Thư mục MVC
- Trang tiếp theo Kontroller MVC
Để học ASP.NET MVC, chúng ta sẽ xây dựng một ứng dụng Internet.
Phần 3:Thêm样式 và diện mạo nhất quán (布局).
Thêm布局
Tệp _Layout.cshtml biểu thị布局 của mỗi trang trong ứng dụng. Nó nằm trong thư mục Shared của thư mục Views.
Mở tệp này, thay thế nội dung của nó bằng:
<!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("Giới thiệu", "About", "Home")</li> </ul> <section id="main"> @RenderBody() <p>© W3school 2012. All Rights Reserved.</p> </section> </body> </html>
Hàm hỗ trợ HTML
Trong đoạn mã trên, các hàm hỗ trợ HTML được sử dụng để thay đổi đầu ra HTML:
@Url.Content() - Chèn nội dung URL tại đây.
@Html.ActionLink() - Chèn liên kết HTML tại đây.
Chúng ta sẽ giải thích về các hàm hỗ trợ HTML trong phần sau của hướng dẫn này.
Cú pháp Razor
Trong đoạn mã trên, mã được đánh dấu màu đỏ là C# sử dụng ký hiệu Razor.
@ViewBag.Title - Chèn tiêu đề trang tại đây.
@RenderBody() - Đặt nội dung trang tại đây.
Bạn có thể tìm thấy trong Hướng dẫn RazorHọc C# và VB (Visual Basic) bằng các ký hiệu Razor.
Thêm phong cách
Tệp bảng định dạng của ứng dụng là Site.css. Nó nằm trong thư mục Content.
Mở tệp Site.css và thay thế nội dung của nó bằng:
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; } /* 菜单样式 ------------------------------*/ 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; /* Thuộc tính CSS3 */ border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: #ffffff; } /* Kiểu biểu mẫu ------------------------------*/ fieldset { padding-left: 12px; } label fieldset { display: block; padding: 4px; } input[type="text"], input[type="password"] { width: 300px; } input[type="submit"] { padding: 4px; } /* Kiểu dữ liệu ------------------------------*/ 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 tệp
Tệp _ViewStart trong thư mục Shared (nằm trong thư mục Views) chứa nội dung sau:
@{Layout = "~/Views/Shared/_Layout.cshtml";}
Đoạn mã này được tự động thêm vào tất cả các giao diện hiển thị bởi ứng dụng.
Nếu xóa tệp này, bạn phải thêm đoạn mã này vào tất cả các giao diện.
Bạn sẽ học thêm về kiến thức về giao diện trong các chương sau của bài học này.
- Trang trước Thư mục MVC
- Trang tiếp theo Kontroller MVC