Master Pages

6 May 2010 1hunglx.it@gmail.com
Giới thiệu
‰Master Page là trang chứa những điều khiển sẽ 
được chia sẻ cho nhiều trang khác sử dụng lại. 
Chẳng hạn, trong web site có nhiều trang có
cùng header, footer, banner, menu,… ta có thể
xây dựng những thành phần này chỉ một lần 
trong Master Page, sau đó những trang có liên 
kết đến Master Page sẽ kế thừa lại những thành 
phần đó.
‰Master Page giúp việc bảo trì web site dễ
dàng, tránh trùng lắp code giữa các trang.
Tạo Master Page
‰Website/Add New Item/Chọn MasterPage/Bấm nút 
Add
‰Trong Master Page chứa một điều khiển đặc biệt là
ContentPlaceHolder, điều khiển này định nghĩa 
một vùng trên Master Page có thể thay thế bởi nội 
dung từ một trang liên kết với Master Page. Trang 
liên kết với Master Page gọi là Content Page
<%-- Điều khiển ContentPlaceHolder có nội dung mặt định --
%>
Chào mừng đến với website Hoa 24h! 
Tạo Content Page
‰Website / Add New Item / Chọn Web Form / Đánh 
dấu vào ô “Select master page” / Add 
‰Chọn Master Page đã tạo / OK
Mô hình Master Page và Content Page
Truy cập Master Page bằng code
‰Trên Content Page khai báo chỉ dẫn để tham chiếu 
đến các thành phần public trên Master Page
‰Trên Master Page xây dựng thuộc tính hoặc hàm với 
phạm vi public để Content Page truy cập đến.
public String TieuDeTrang
public sub DatTieuDeTrang(string sTitle)
lblContent.Text = sTitle 
end sub 
Truy cập Master Page bằng code (tt)
‰Từ Content Page tham chiếu đến Master Page, dùng 
thuộc tính Master.
‰
Hoặc
protected sub Page_Load(object sender, EventArgs e)
Master.DatTieuDeTrang("Thông tin kinh tế")
Master.TieuDeTrang = "tin kinh tế"
End sub
protected sub Page_Load(object sender, EventArgs e)
Label lbl = (Label)Master.FindControl("lblContent")
if (lbl null) then
 lbl.Text = "Nơi hiển thị Content Page"
end if
End sub
6 May 2010 8hunglx.it@gmail.com
Nội dung
‰Menu
‰TreeView
‰SiteMapPath
6 May 2010 hunglx.it@gmail.com 9
Menu
Giới thiệu
‰Một Menu bao gồm nhiều 
MenuItem. Các MenuItem 
được tổ chức thành nhiều 
cấp độ để hình thành cấu 
trúc menu. MenuItem có
thể tự khai báo hoặc nạp 
từ các nguồn dữ liệu như: 
SiteMapDataSource, 
XMLDataSource hoặc từ
Code.
Menu
Tự khai báo MenuItem
‰VD: (8.1)
Menu
Dùng SiteMapDataSource
‰Tạo file Web.Sitemap theo cấu trúc sau:
‰Tạo Menu
<asp:Menu ID="Menu2" runat="server" 
DataSourceID="SiteMapDataSource1">
<asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" 
ShowStartingNode="False" />
Menu 
Dùng XMLDataSource
‰Tạo file Menu.xml
‰Tạo Menu
<asp:MenuItemBinding DataMember="siteMapNode" 
NavigateUrlField="url" TextField="title“
ToolTipField="description" />
<asp:XmlDataSource ID="XmlDataSource1" runat="server" 
DataFile="~/Menu.xml" XPath="/*/*/*">
TreeView
TreeView được định nghĩa tĩnh
‰Tập hợp Nodes
<asp:TreeNode Text="MSN" 
NavigateUrl=""/> 
<asp:TreeNode Text="MSNBC News" 
NavigateUrl=""/> 
TreeView
Tùy biến hình các node trên TreeView
‰ Mỗi TreeView gồm 3 loại node:
™ Root nodes: node ở cấp độ cao nhất
™ Parrent nodes: node có chứa node con
™ Leaf nodes: node không chứa node con
‰ Tùy biến hình ảnh bằng các thuộc tính
™ RootNodeStyle-ImageUrl
™ ParentNodeStyle-ImageUrl
™ LeafNodeStyle-ImageUrl
™ CollapseImageUrl
™ ExpandImageUrl
‰ VD: (8.6)
6 May 2010 hunglx.it@gmail.com 15
TreeView
Tùy biến Style cho TreeView
‰Quy định các khoảng trống
™ NodeStyle
y NodeSpacing
y VerticalPadding
y HorizontalPadding
y ChildNodesPadding
‰Đường nối các node
™ShowLines
™LineImageFolder
™Customize Line Images (Smart tag)
TreeView
Dùng file XML cho TreeView
‰Tạo file XML
‰Liên kết TreeView đến file xml
™ DataSoureID
™ DataBindings
‰VD: (8.8)
<asp:TreeView ID="TreeView1" runat="server" 
DataSourceID="XmlDataSource1">
<asp:XmlDataSource ID="XmlDataSource1" runat="server" 
DataFile="~/Hardware.xml">
SiteMapPath
Giới thiệu
‰Điều khiển SiteMapPath hiển thị một đường dẫn gồm 
các liên kết, cho biết vị trí của trang mà người dùng 
đang xem trong cấu trúc của website. 
SiteMapPath
Tạo SiteMapPath dùng web.sitemap
‰ Tạo file web.sitemap
‰ Tạo SiteMapPath
‰ Tùy biến SiteMapPath
™ CurrentNodeStyle: Style của nốt hiện tại
™ NodeStyle : Style chung của các nốt
™ ParentLevelsDisplayed: Số nốt cha muốn hiển thị
™ PathDirection: (RootToCurrent / CurrentToRoot): hướng đường dẫn
™ PathSeparator: Ký tự phân cách các nốt
™ PathSeparatorStyle: Style cho phân cách các nốt
™ RenderCurrentNodeAsLink: Trình bày nốt hiện tại như liên kết
™ RootNodeStyle: Style của nốt gốc 
™ PathSeparatorTemplate: Tùy biến phân cách các nốt bằng hình