Transcript chương 9

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/SiteMapFile-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>
<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" />
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("~/UserInfoBoxC
ontrol.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("~/UserInfoBoxContro
l.ascx");
userInfoBoxControl.UserName = "John Doe";
userInfoBoxControl.UserAge = 78;
userInfoBoxControl.UserCountry = "Spain";
phUserInfoBox.Controls.Add(userInfoBoxControl);