Bài giảng Phát triển web nâng cao - Chương IV: Master page

CHƯƠNG IV:  MASTER PAGE 
Lý thuyết 3 tiết 
Thực hành 6 tiết 
Giới thiệu về Master Page 
ASP.Net 2.0 cung cấp một cách đơn giản để tạo trang template làm nền tảng cho bất kỳ trang web nào trong website. Các template này gọi là Master Page. 
Sử dụng master page giúp cho việc xây dựng các ứng dụng trở nên dễ dàng hơn và dễ quản lý hơn 
Giới thiệu về Master Page 
Khi làm việc với master Pages ta tạo ra một tập tin master – template được tham chiếu bởi subpage hoặc content page 
Tập tin Master page có phần mở rộng .master , và tập tin content page có phần mở rộng là .aspx 
Giới thiệu về Master Page 
M 
C 
MC 
Master page 
.master 
Content page 
.aspx 
Combined Page 
Thiết kế trang Master Page 
Đặt tất cả nội dung muốn chia sẻ (dùng chung) trong trang master (MasterPage), thông thường gồm các phần: 
Header section (Tiêu đề trang) 
Navigation (Menu - ) 
Footer section 
Trang nội dung (Content page) chứa tất cả các nội dung của trang ngoại trừ các phần tử của trang master 
Thiết kế trang Master Page 
Ví dụ một kiểu trang master 
Navigation 
Header 
Content 
Footer 
my.master 
Header 
Footer 
Navigation 
< asp:contentplaceholder 
 Id=“ MainContent ”> 
 Here is the content 
 that replaces  
default.aspx (content-page) 
my.master 
Header 
Footer 
Navigation 
< asp:contentplaceholder 
 Id=“ MainContent ”> 
 Here is my basic 
 default content 
my.master 
Footer 
Navigation 
< asp:contentplaceholder 
 Id=“ MainContent ”> 
 Here is my basic 
 default content 
Header 
my.master 
Header 
Footer 
Navigation 
< asp:contentplaceholder 
 Id=“ MainContent ”> 
 Here is my basic 
 default content 
default.aspx (content-page) 
< asp:content 
 contentplaceholderid =“ MainContent ”> 
 	 Here is the content 
	that replaces  
/ asp:content > 
my.master 
Header 
Footer 
Navigation 
< asp:contentplaceholder 
 Id=“ MainContent ”> 
 Here is my basic 
 default content 
default.aspx (content-page) 
< asp:content 
 contentplaceholderid =“ MainContent ”> 
 	 Here is the content 
	that replaces  
/ asp:content > 
my.master 
Header 
Footer 
Navigation 
< asp:contentplaceholder 
 Id=“ MainContent ”> 
 Here is my basic 
 default content 
default.aspx (content-page) 
< asp:content 
 contentplaceholderid =“ MainContent ”> 
 	 Here is the content 
	that replaces  
/ asp:content > 
Ví dụ: 
default.aspx (content-page) 
< asp:content 
 contentplaceholderid =“ MainContent ”> 
 	 Here is the content 
	that replaces  
/ asp:content > 
Thiết kế 1 trang Master Page  Master-page : design-time 
Tạo a master page với phần mở rộng .master 
Định nghĩa a master trong 
Thêm Content: 
Có thể là trang .html control page content 
Thay thế phần place-holder: 
Sử dụng 
Thêm nội dung mặc định của trang 
 Default content!!! 
Thiết kế 1 trang Master Page  Master-page : design-time 
Tạo 1trang ASP.NET page (.aspx) 
Tiền chỉ thị: 
 chỉ đến Master Page 
Tạo thuộc tính 
Thêm nội dung thay thế phần content của Master Page: 
Tag or server-side script allowed 
 controls replace regions in the master : 
contentplaceholderid nội dung của MasterPage 
 chứa nội dung của từng trang web con 
Thiết kế 1 trang Web Server dùng Master-page : design-time 
Cách sử dụng a master-page 
login.aspx 
 Navigation 
 < asp:treeview id=“Navigation tree" runat="server“ 
	 datasourceid =“ NavSource ”/> 
 Support section 
default.aspx 
Programatic master selection 
Dynamic selection of master-page 
Master-pages  Nested master-pages 
Master-pages can be nested 
Enables a master to master relationship 
Useful when a site enforces an overall layout and defines sub-layouts within 
ASPX 
MASTER (ASPX Content-page) 
MASTER (MASTER) 
MASTER (ASPX Content-page) 
Master-pages  Nested master-pages 
Content Place Holder 
‘Sub’ 
Content Place Holder 
‘Main’ 
mysite.master 
productsection.master 
Master-pages  Nested master-pages: Conceptual 
mysite.master 
Header 
Footer 
< asp:contentplaceholder 
 id=“ MainContent ” /> 
productsection.master 
< asp:content 
 contentplaceholderId =“ MainContent ”> 
 // Menu provided default 
Master-pages  Nested master-pages 
howtobuy.aspx 
partners.aspx 
Bài tập: Tạo 1 Website theo mẫu: Đề tài nhóm. 
Bài tập 9: 
BT_WebTintuc (Design) 
BT_WebBank(Design)