CHƯƠNG IX: SITE NAVIGATION & USER CONTROL

1. CHƯƠNG IX:SITE NAVIGATION & USER CONTROL Lý thuyết : 3 tiết Thực hành 12 tiết

2. 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

3. GiỚI THIỆU VÍ DỤ:

4. 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

5. 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:

6. Site Maps <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="" title="" description=""> <siteMapNode url="" title="" description="" /> <siteMapNode url="" title="" description="" /> </siteMapNode> </siteMap>

7. Site Maps • Trong một file .sitemap chỉ có môt phần tử <siteMap > • Sử dụng tập tin site map: <siteMapNode title="Home" description="Home" url="Default.aspx“>

8. Ví dụ: tạo tập tin web.sitemap <siteMap> <siteMapNode title="Home" description="Home" url=“home.aspx" /> <siteMapNode title="Products" description="Our products" url=“Products.aspx"> <siteMapNode title="Hardware" description="Hardware we offer" url=“Hardware.aspx" /> <siteMapNode title="Software" description="Software for sale" url=“Software.aspx" /> </siteMapNode> <siteMapNode title="Services" description="Services we offer" url=“Services.aspx"> <siteMapNode title="Training" description="Training" url=“Training.aspx" /> <siteMapNode title="Consulting" description="Consulting" url=“Consulting.aspx" /> <siteMapNode title="Support" description="Support" url=“Support.aspx" /> </siteMapNode> </siteMapNode> </siteMap>

9. 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…

10. 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.

11. Tạo Navigation Menu sử dụng TreeView Control • Trong TreeViewtasks, khung Choose Data Source, chọn SiteMapDataSource1.

12. Tạo Navigation Menu sử dụng TreeView Control • Thuộc tính của treeview: • ShowCheckBoxes • ShowLines

13. 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

14. 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

15. 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

16. 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: <asp:SiteMapPath ID="SiteMapPath1" runat="server"> <PathSeparatorTemplate>|</PathSeparatorTemplate> </asp:SiteMapPath>

17. 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.

18. Tạo Navigation Menu sử dụng Menu Control

19. 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.

20. 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:

21. 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

22. Kết hợp Site Navigation và Master pages siteMapPath TreeView

23. 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 <%@ Page Language="C#" MasterPageFile="~/Navigation.master“ %>

24. 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.

25. User Controls-Khai báo • <%@ Register TagPrefix="My" TagName="UserInfoBoxControl" Src="~/UserInfoBoxControl.ascx" %>

26. To include a user control in a Web Forms page Example <%@ Page Language="C#" %> <%@ Register TagPrefix="uc" TagName="Spinner" Src="~/Controls/Spinner.ascx" %> <html> <body> <form runat="server"> <uc:Spinner id="Spinner1" runat="server" MinValue="1" MaxValue="10" /> </form> </body>

27. <My:UserInfoBoxControl runat="server" ID="MyUserInfoBoxControl"/> Add a user control <My:UserInfoBoxControl runat="server" ID="MyUserInfoBoxControl" /> • Thêm thông tin vào user control <My:UserInfoBoxControl runat="server" ID="MyUserInfoBoxControl" UserName="John Doe" UserAge="45" UserCountry="Australia" />

28. 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"; }

29. Loading dynamically <asp:PlaceHolder runat="server" ID="phUserInfoBox" /> • 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: <%@ Reference Control="~/UserInfoBoxControl.ascx" %>

30. 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);