chƯƠng ix: site navigation & user control
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
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<?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>
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“>
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>
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:
<asp:SiteMapPath ID="SiteMapPath1" runat="server"> <PathSeparatorTemplate>|</PathSeparatorTemplate></asp:SiteMapPath>
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
<%@ Page Language="C#" MasterPageFile="~/Navigation.master“ %>
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 <%@ Register TagPrefix="My"
TagName="UserInfoBoxControl" Src="~/UserInfoBoxControl.ascx" %>
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>
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" />
<My:UserInfoBoxControl runat="server" ID="MyUserInfoBoxControl" />
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
<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" %>
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);