Bài giảng Lập trình ứng dụng Web - Chương 9: Site Navigation & User control - Trường Cao đẳng Cao Thắng

CHƯƠNG IX:SITE NAVIGATION & USER CONTROLLý thuyết : 3 tiếtThực hành 12 tiếtGiỚI THIỆUSite Navigation được sử dụng để Di chuyển giữa các trang trong websiteQuản lý tất cả các link Hiển thị các link trong danh sách hoặc menu trên mỗi trangMô tả bố cục của web site như một hệ thống thứ bậc GiỚI THIỆUVÍ DỤ:Site MapsBước đầu tiên khi làm việc với hệ thống navigation trong ASP.NET 2.0 là xây dựng một site map cho ứng dụngMột site map là một mô tả XML của cấu trúc websiteSite MapsTạo site maps:Trong solution explorer, click phải trên tên website chọn Add new Item, chọn site mapTập tin site map có phần mở rộng là Web.sitemapCấu trúc của tập tin site map như sau:Site Maps Site MapsTrong một file .sitemap chỉ có môt phần tử Sử dụng tập tin site map:Ví dụ: tạo tập tin web.sitemap Ví dụ(tt)Site map được tạo có dạng: Lưu tập tin Web.sitemapTạo các trang NavigateHome.aspxProducts.aspxHardware.aspxSoftware.aspxTraining.aspxTạo Navigation Menu sử dụng TreeView ControlCách tạo TreView:Mở trang Home.aspxTrong nhóm Data chọn SiteMapDataSource thả vào trang, ID= SiteMapDataSource1SiteMapDataSource control lấy thông tin cho nó từ tập tin Web.sitemapTrong nhóm Navigation chọn TreeView thả vào trang.Tạo Navigation Menu sử dụng TreeView ControlTrong TreeView tasks, khung Choose Data Source, chọn SiteMapDataSource1.Tạo Navigation Menu sử dụng TreeView ControlThuộc tính của treeview:ShowCheckBoxesShowLinesHiển thị Navigation History sử dụng SiteMapPath ControlSiteMapPath control cho phép thực thi việc chuyển trang một cách tự độngCó thể add Navigation cho mỗi trang để hiển thị vị trí của trang trong cây thứ bậc hiện hànhHiển thị Navigation History sử dụng SiteMapPath ControlCách tạo:Mở một trong các trang có trong tập tin web.sitemapTrong nhóm Navigation chọn SiteMapPath thả vào trangĐặt trỏ trên SiteMapPath, nhấn enter để tạo một dòng mớiHiển thị Navigation History sử dụng SiteMapPath ControlSiteMapPath hiển thị vị trí của trang hiện hành trong cấu trúc thứ bậc.Mặc định SiteMapPath hiển thị cấu trúc thứ bậc được tạo trong tập tin Web.sitemapHiển thị Navigation History sử dụng SiteMapPath ControlThuộc tính:PathSeparatorTemplate: tạo ký hiệu phân cách giữa các linkCú pháp: |Tạo Navigation Menu sử dụng Menu ControlCách tạo:Mở một trong các trang có trong tập tin web.sitemapTrong nhóm Navigation chọn Menu thả vào trangTrên Menu Tasks menu, trong hộp Choose Data Source, click NewDataSource.Tạo Navigation Menu sử dụng Menu ControlTạo Navigation Menu sử dụng Menu ControlTrong cửa sổ Data Source Configuration wizard, chọn Site MapTrong khung specify ID for the data source: nhập tên datasource: SiteMapDataSource1, click OK.Kết hợp Site Navigation và Master pagesKết hợp site navigation với master pages ta có thể tạo một bố cục mà các navigation chỉ đặt tại một vị tríCách thực hiện:Kết hợp Site Navigation và Master pagesTạo trang Master pageTrong Solution Explorer, click phải trên tên Web site, chọn Add New Item.Chọn Master Page, Add.Chuyển sang chế độ design, thiết kế trang master pageĐưa các Navigation control vào trang master pageKết hợp Site Navigation và Master pagessiteMapPathTreeViewKết hợp Site Navigation và Master pagesTạo các trang nội dung:Cách 1: nếu trang nội dung tạo sau trang Master thì khi tạo, ta chọn trang master trong cửa sổ Add new ItemCách 2: nếu trang nội dung tạo trước trang master thì thêm thuộc tính ASP.NET User Controls user control is a kind of composite control that works much like an ASP.NET Web pageyou can add existing Web server controls and markup to a user control, and define properties and methods for the control. You can then embed them in ASP.NET Web pages, where they act as a unit.User Controls-Khai báoTo include a user control in a Web Forms pageExample Add a user controlThêm thông tin vào user control Truy xuất dữ liệu của user control protected void Page_Load(object sender, EventArgs e) { // These values can come from anywhere, but right now, we just hardcode them MyUserInfoBoxControl.UserName = "Jane Doe"; MyUserInfoBoxControl.UserAge = 33; MyUserInfoBoxControl.UserCountry = "Germany"; }Loading dynamicallyIn the CodeBehind of the page, we add the control like this;phUserInfoBox.Controls.Add(LoadControl("~/UserInfoBoxControl.ascx"));We use the LoadControl method to instantiate the UserControl by specifying the path.. On the page, add the following declaration in the top:Loading dynamicallyWe can access the UserInfoBoxControl class UserInfoBoxControl userInfoBoxControl = (UserInfoBoxControl)LoadControl("~/UserInfoBoxControl.ascx"); userInfoBoxControl.UserName = "John Doe"; userInfoBoxControl.UserAge = 78; userInfoBoxControl.UserCountry = "Spain"; phUserInfoBox.Controls.Add(userInfoBoxControl);