Bài giảng Lập trình ứng dụng Web - Chương 9: Site navigation and User Control

CHƯƠNG IX:  SITE NAVIGATION & USER CONTROL 
Lý thuyết : 3 tiết 
Thực hành 12 tiết 
GiỚI THIỆU 
Site Navigation được sử dụng để 
Di chuyển giữa các trang trong website 
Quả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 trang 
Mô tả bố cục của web site như một hệ thống thứ bậc 
GiỚI THIỆU 
VÍ DỤ: 
Site Maps 
Bướ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ụng 
Một site map là một mô tả XML của cấu trúc website 
Site Maps 
Tạo site maps: 
Trong solution explorer, click phải trên tên website chọn Add new Item, chọn site map 
Tập tin site map có phần mở rộng là Web .sitemap 
Cấu trúc của tập tin site map như sau: 
Site Maps 
Site Maps 
Trong 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.sitemap 
Tạo các trang Navigate 
Home.aspx 
Products.aspx 
Hardware.aspx 
Software.aspx 
Training.aspx 
Tạo Navigation Menu sử dụng TreeView Control 
Cách tạo TreView: 
Mở trang Home.aspx 
Trong nhóm Data chọn SiteMapDataSource thả vào trang, ID= SiteMapDataSource1 
SiteMapDataSource control lấy thông tin cho nó từ tập tin Web.sitemap 
Trong nhóm Navigation chọn TreeView thả vào trang. 
Tạo Navigation Menu sử dụng TreeView Control 
Trong TreeView tasks, khung Choose Data Source , chọn SiteMapDataSource1. 
Tạo Navigation Menu sử dụng TreeView Control 
Thuộc tính của treeview: 
ShowCheckBoxes 
ShowLines 
Hiển thị Navigation History sử dụng SiteMapPath Control 
SiteMapPath control cho phép thực thi việc chuyển trang một cách tự động 
Có thể add Navigation cho mỗi trang để hiển thị vị trí của trang trong cây thứ bậc hiện hành 
Hiển thị Navigation History sử dụng SiteMapPath Control 
Cách tạo : 
Mở một trong các trang có trong tập tin web.sitemap 
Trong 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ới 
Hiển thị Navigation History sử dụng SiteMapPath Control 
SiteMapPath 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.sitemap 
Hiển thị Navigation History sử dụng SiteMapPath Control 
Thuộc tính: 
PathSeparatorTemplate: tạo ký hiệu phân cách giữa các link 
Cú pháp: 
 | 
Tạo Navigation Menu sử dụng  Menu Control 
Cách tạo: 
Mở một trong các trang có trong tập tin web.sitemap 
Trong nhóm Navigation chọn Menu thả vào trang 
Trên Menu Tasks menu, trong hộp Choose Data Source , click NewDataSource . 
Tạo Navigation Menu sử dụng  Menu Control 
Tạo Navigation Menu sử dụng  Menu Control 
Trong cửa sổ Data Source Configuration wizard, chọn Site Map 
Trong khung specify ID for the data source: nhập tên datasource: SiteMapDataSource1 , click OK. 
Kết hợp Site Navigation và Master pages 
Kế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 pages 
Tạo trang Master page 
Trong 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 page 
Kết hợp Site Navigation và Master pages 
siteMapPath 
TreeView 
Kết hợp Site Navigation và Master pages 
Tạ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 Item 
Cá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 page 
you 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áo 
To include a user control in a Web Forms page 
Example 
Add a user control 
Thê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 dynamically 
In 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 dynamically 
We 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);