Bài giảng lập trình web asp net với c chương 6 th s phạm đào minh vũ

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