Bài giảng Lập trình Web ASP.Net: Chương 6 - Thiết kế layout. Chương này gồm có những nội dung chính sau: Web user controls, master pages, themes và skin, site navigation controls. Mời các bạn cùng tham khảo để biết thêm các nội dung chi tiết.
Trang 21 Web User controls
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
Trang 31.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
Chọn: Web User Control
ðặt tên: *.ascx
Trang 4Sử dụng User control:
Kéo và thả UC vào trang aspx, lúc ñó trang aspx sẽxuất hiện tag
<%@ Register %>
Trang 5Master 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
Trang 6Master page Content page
Trang kết quả
Trang 72.2 Tạo trang Master
Bước 1: Tạo mới Item chọn icon Master Page và ñặt tên trang: *.master
Trang 8Bước 2: Thiết kế bố cục chung (có thể sử dụng User control) và bổ sung ContentplaceHolder vào trang master
Trang 92.3 Sử dụng trang Master
Bước 1: Tạo mới trang web (.aspx) khai báo sử dụng trang master
Trang 10Bướ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)
Trang 11Skin 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.
Trang 12Có 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ểnco1 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
Trang 13Tạo file skin:
Thêm mới 1 itemchọn skin fileñặt tên file skin
Trang 14Tạo Theme:
Click phải ProjectAdd ASP.NET FolderTheme
Trang 154 Site Navigation Controls
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
Trang 164.1 ðiều khiển Menu
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
Trang 17Auto Format: Chọn mẫu ñịnh dạng
Trang 18Edit Menu Items: Thiết kế Menu
Trang 194.2 ðiều khiển TreeView
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
Trang 20Auto Format: Chọn mẫu ñịnh dạng
Trang 21Edit Node: Thiết kế các node
Trang 224.3 ðiều khiển SiteMapPath
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
Trang 23Nút gốc
Tạo ñiều khiển SitemapPath vào các trang
Nút con
Nút cháu
Trang 24Kết quả
Trang 254.4 ðiều khiển SiteMapDataSource
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