Lập trình web Asp.net với C# - Chương 06: Thiết kế layout

Giảng Viên: Th.S Phạm Đào Minh Vũ Email: phamdaominhvu@yahoo.com 1 LẬP TRÌNH WEB ASP.NET VỚI C# 233 Chương 06 Thiết Kế Layout 6.1 Web User controls 6.2 Master Pages 6.3 Themes Và Skin 6.4 Site Navigation Controls Khoa CNTT Trường CĐ CNTT TP.HCM 234 6.1. Web User controls 6.1.1 Giới thiệu Khi kết hợp các control để tạo thành một control mới gọi là Web user control (UC)  Sử dụng UC cũng giống như sử dụng thủ tục, hàm  khả năng tái sử dụng UC trên các trang web  Phần mở rộng của US là: .ascx Khoa CNTT Trường CĐ CNTT TP.HCM 235 6.1.2 Tạo và sử dụng User control Tạo mới User control:  Tạo mới 1 Web user control  Thiết kế giống như thiết kế 1 trang aspx Khoa CNTT Trường CĐ CNTT TP.HCM Chọn: Web User Control Đặt tên: *.ascx 236 Thiết kế User control:  Thiết kế các controls theo ý muốn Khoa CNTT Trường CĐ CNTT TP.HCM 237 Sử dụng User control:  Kéo và thả UC vào trang aspx Khoa CNTT Trường CĐ CNTT TP.HCM 238 6.2. Master Pages 6.2.1 Giới thiệu  Master pages cho phép tạo 1 bố cục nhất quán trên các trang web trong cùng 1 website (tương tự template)  Nội dung thể hiển trên trình duyệt là sự kết hợp giữa trang .master (master page) và trang .aspx (hoặc .ascx) - content page Khoa CNTT Trường CĐ CNTT TP.HCM  Master page là tập tin có phần mở rộng .master  Thao tác thiết kế: Giống như trang aspx, nhưng phải bổ sung ít nhất một điều khiển ContentPlaceHolder 239 Khoa CNTT Trường CĐ CNTT TP.HCM Master page Content page Trang kết quả 240 6.2.2 Tạo trang Master  Bước 1: Tạo mới Item  chọn icon Master Page và đặt tên trang: *.master Khoa CNTT Trường CĐ CNTT TP.HCM 241  Bước 2: Thiết kế bố cục chung (có thể sử dụng User control) và bổ sung ContentplaceHolder vào trang master Khoa CNTT Trường CĐ CNTT TP.HCM 242 6.2.3 Sử dụng trang Master  Bước 1: Tạo mới trang web (.aspx) khai báo sử dụng trang master Khoa CNTT Trường CĐ CNTT TP.HCM 243  Bước 2: Thiết kế bổ sung nội dụng trên trang *.aspx (có thể kéo các User control vào) Khoa CNTT Trường CĐ CNTT TP.HCM 244 6.3. Themes Và Skin Khoa CNTT Trường CĐ CNTT TP.HCM 6.3.1 Giới thiệu  Themes là tập hợp các khai báo thuộc tính về hình thức hiển thị(màu sắc, nét chữ, . . .) của điều khiển  Dùng áp dụng chung cho tất cả các điều khiển trong một ứng dụng hoặc tất cả các ứng dụng trên webserver  Themes được tạo từ các thành phần: skin, css, images . . . Tối thiểu phải có skin. Các thành phần này đặt trong thư mục App_Themes  Skin là một tập tin có phần mở rộng là .skin, chứa các tag tạo ra các server control kèm theo các khai báo thuộc tính. 245 Khoa CNTT Trường CĐ CNTT TP.HCM  Có 2 loại skin:  Default skin: Không khai báo thuộc tính skinID, mặc định ứng dụng sẽ áp dụng skin này cho tất cả các điều khiển có cùng kiểu khai báo.  Named skin: có khai báo thuộc tính skinID, muốn sử dụng thì phải khai báo tường minh trên điều khiển cụ thể.  Tạo file skin:  Thêm mới 1 item 246 Khoa CNTT Trường CĐ CNTT TP.HCM  Tạo file skin:  Thêm mới 1 itemchọn skin fileđặt tên file .skin 247 Khoa CNTT Trường CĐ CNTT TP.HCM 248 Khoa CNTT Trường CĐ CNTT TP.HCM  Tạo Theme:  Click phải ProjectAdd ASP.NET FolderTheme 249 Khoa CNTT Trường CĐ CNTT TP.HCM 250 Khoa CNTT Trường CĐ CNTT TP.HCM 251 6.4. Site Navigation Controls Khoa CNTT Trường CĐ CNTT TP.HCM Giới thiệu  Dùng để chuyển đến một trang web khác và thể hiện cấu trúc logic của website (sitemap). Gồm các điều khiển: Menu, TreeView, SiteMapPath kết hợp với SiteMapDataSource  Các điều khiển này thường sử dụng trong trang Master 252 6.4.1 Điều khiển Menu Khoa CNTT Trường CĐ CNTT TP.HCM Dùng thể hiện menu và cho phép người dùng chuyển đến một trang web khác khi chọn một chức năng Thao tác tạo: Tạo điều khiển Menu vào trang web Chọn mẫu định dạng Thiết kế Menu 253 Khoa CNTT Trường CĐ CNTT TP.HCM Auto Format: Chọn mẫu định dạng 254 Khoa CNTT Trường CĐ CNTT TP.HCM  Edit Menu Items: Thiết kế Menu 255 6.4.2 Điều khiển TreeView Khoa CNTT Trường CĐ CNTT TP.HCM Dùng thể hiện menu ở dạng cây và cho phép người dùng chuyển đến một trang web khác khi chọn node Thao tác tạo: Tạo điều khiển TreeView vào trang web Chọn mẫu định dạng Thiết kế các node 256 Khoa CNTT Trường CĐ CNTT TP.HCM Auto Format: Chọn mẫu định dạng 257 Khoa CNTT Trường CĐ CNTT TP.HCM  Edit Node: Thiết kế các node 258 6.4.3 Điều khiển SiteMapPath Khoa CNTT Trường CĐ CNTT TP.HCM Dùng thể hiện cấu trúc logic của website và cho phép người dùng chuyển đến một trang web khác Nội dung cấu trúc của Website mặc định được chứa trong tập tin Web.sitemap Thao tác tạo: Tạo tập tin Web.sitemap 259 Khoa CNTT Trường CĐ CNTT TP.HCM Tạo điều khiển SitemapPath vào các trang Nút cháu Nút gốc Nút con Trangchu.aspx Tinthethao.aspx 260 Khoa CNTT Trường CĐ CNTT TP.HCM Kết quả 261 6.4.4 Điều khiển SiteMapDataSource Khoa CNTT Trường CĐ CNTT TP.HCM Dùng để chứa nguồn dữ liệu lưu trữ trong tập tin Web.sitemap  Thường sử dụng kết hợp với các điều khiển Menu, TreeView  Để liên kết với TreeView, Menu chỉ định thuộc tính DataSourceID của 2 điều khiển này là tên SiteMapDataSource 262 Khoa CNTT Trường CĐ CNTT TP.HCM Thực thi VÍ DỤ