Bài giảng Phát triển Web nâng cao - Chương 9: Site Navigation

CHƯƠNG IX:

SITE NAVIGATION
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=" >

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

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">
url=“Hardware.aspx" />
url=“Software.aspx" />
</siteMapNode>
<siteMapNode title="Services" description="Services we offer" url=“Services.aspx">

<siteMapNode title="Training" description="Training" url=“Training.aspx" />
url=“Consulting.aspx" />
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“
%>