Master page là một trong những thành phần rất quan trọng trong cấu trúc website asp.net. Nó là trang master dùng để cho các trang con kế thừa những tính năng đã có mà không cần phải lập đi lập lại ở mỗi trang con.
Dựa vào cấu trúc website ở phần trước hôm nay chúng ta cùng đi sâu hơn để bàn luận về trang master
1. Xây dựng một template cơ bản từ master page
- Tạo file master.css trong folder css như hình bên dưới và tiến hành gõ đoạn code sau vào file
1
2
3
4
5
| body {background:#000;font-family:Verdana;}#content_master{width:1000px;margin:0px auto;height:800px;}#content_placeholder{height:500px;width:1000px;background:#fff; border:1px solid #ccc;margin-top:10px;color:#000;font-size:80PX;}#top{background:url('../images/banner.jpg'); width:1000px; height:317px;}#footer{font-size:20px;color:#fff;background:#f146c2;margin-top:10px;} |
- Mở page master_project.master và tiến hành thực hiện đoạn code sau
- Include file css vào master
1
| <link href="/includes/css/master.css" rel="stylesheet" type="text/css" /> |
- Code toàn page như sau
1
| <link href="/includes/css/master.css" rel="stylesheet" type="text/css" /> |
- Code toàn page như sau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <head runat="server"> <title></title><asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder><link href="/includes/css/master.css" rel="stylesheet" type="text/css" /></head> <body> <form id="form1" runat="server"> <div id="content_master"> <div id="top"></div> <div id="content_placeholder"> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <div id="footer">FOOTER</div></div></form></body> </html> |
- Hoàn tất code trong site
2. Kế thừa từ master page
Tạo page mới kế thừa từ master page bạn thực hiện như sau:
Lưu ý: check vào Select master page (quan trọng) à Add à chọn master_project.masterpage
Kết quả của trang kế thừa default.aspx như sau:
1
2
3
4
| <%@ Page Title="" Language="C#" MasterPageFile="~/master_project.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> |
CONTENT
1
| </asp:Content> |
Giải thích:
1
2
| <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content> |
Là nơi chứa các tile của các site con và là nơi includes tài nguyên css, javascript vào
1
| <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> |
CONTENT
1
| </asp:Content> |
Là nơi chứa nội dung của trang con
Chạy chương trình lên ta được kết quả như sau
3. Đánh giá kết quả
Kết quả trên cho ta thấy tất cả các trang con được kết thừa từ trang master page đã có giao diện như vậy chỉ có phần content là thay đổi tùy thuộc vào nội dung của từng trang
Chỉ cần thực hiện một lần là bạn có thể sử dụng rất nhiều lần mà không cần phải mỗi trang include header, footer như php. Đây là một trong những điểm ưu việt của .net
Master page còn giúp cho nhà lập trình bảo mật hệ thống một phần sử dụng kỹ thuật session và cookie để lưu trữ từ server và client.
Quản lý source code dễ dàng và tiện lợi từ trang master giúp lập trình viên tiết kiệm thời gian và cập nhật modules.
Comments[ 0 ]
Đăng nhận xét