ASP.NET 2.0網站地圖建置網站導航結構

作者：Eve Cole 更新時間：2009-06-30 16:47:46

如果你曾經到過陌生的目的地旅行過，那麼你一定知道地圖的重要性—它們能夠幫助使你的旅行更舒適些。這個道理對於網站來說是同樣的。一個網站應該呈現給訪客一種簡單而靈活的導航結構以便它們能夠輕鬆導航到該網站的不同部分。 ASP.NET 2.0提供了一種稱為SiteMap的特徵—它幫助你實現這項功能。本文將解釋什麼是網站地圖並且描述如何開發使用它們的網站導航結構。

一、 SiteMap

一個網站地圖是一個XML檔案（具有一個.sitemap副檔名）—它能夠詳細地描述你的網站的整個導航佈局。你可以使用網站地圖檔案來滿足你的一切要求。

一個範例將有助於解釋網站地圖檔案。圖1顯示了一個範例網站的目錄結構。

圖1:網站結構

圖中，首頁(Default.aspx)和Contact Us頁面(contact.aspx)位於網站的根資料夾下。還有兩個分別稱為Products和Services的子資料夾。每一子資料夾下方都有兩個Web表單：分別對應Product1.aspx和Product2.aspx，以及Service1.aspx和Service2.aspx。

現在，只要遵循如下的步驟，你就可以使用一個網站地圖來描述這個網站的結構：

1. 使用VS.NET 2005建立一個新網站。

2. 右鍵點選網站並且選擇“Add New Item...”。

3. 從「Add New Item...」對話方塊中選擇Site Map（見圖2）並且命名它為Web.sitemap。

圖2:新增一個新的網站地圖

Key in the following XML markup in the web.sitemap file:

＜?xml version="1.0" encoding="utf-8" ?＞
＜siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ＞
＜siteMapNode url="default.aspx" title="Home" description="My Web Site"＞
＜siteMapNode url="~/products/default.aspx" title="Products"＞
＜siteMapNode url="~/products/product1.aspx" title="First Product" /＞
＜siteMapNode url="~/products/product2.aspx" title="Second Product" /＞
＜/siteMapNode＞
＜siteMapNode url="~/services/default.aspx" title="Services"＞
＜siteMapNode url="~/services/service1.aspx" title="First Service" /＞
＜siteMapNode url="~/services/service2.aspx" title="Second Service" /＞
＜/siteMapNode＞
＜siteMapNode url="contact.aspx" title="Contact Us" /＞
＜/siteMapNode＞
＜/siteMap＞

網站地圖檔案的根是siteMap。它包含一個結點siteMapNode，並且根據你的網站結構，它可以包含若干siteMapNode結點。

這個siteMapNode標籤有四個重要的屬性（參見表格１）。

屬性	描述
title	顯示頁面的標題。這個屬性經常由導航控制用於顯示URL的標題。
url	顯示這個結點描述的頁面的URL。
description	指定關於這個頁面的描述。你可以使用這個描述來顯示提示內容。
roles	透過使用安全整修(後面將討論)，這個屬性指定允許訪問這個頁面的角色。

表格1:＜siteMapNode＞標籤的重要屬性

這就構成了你的網站地圖。現在你可以把使用它當作導航目的。
二、使用SiteMap的方式

你可以以三種常見方式來使用在前一節所建立的網站地圖檔案：

· 使用SiteMapPath控件

· 使用SiteMap資料來源控件

· 使用SiteMap類

這個SiteMapPath控制允許你產生breadcrumb。圖3顯示出什麼是breadcrumb。

圖3:Breadcrumb導航

SiteMapPath控制項顯示各種層級的導覽。例如，你可以點擊父或根級別以往回導航或轉到頂層。當然，你也可以自訂導航層次。

ASP.NET 2.0中還附帶一組良好的導航控件，包括TreeView和選單。借助於SiteMap資料來源控件，你可以把網站地圖檔案與這些控件綁定在一起。

有些情況下，內建的導航控制可能無法滿足你的要求。在這種情況中，你可以以程式設計方式訪問這個網站地圖檔案並且讀取各種siteMapNode結點。然後，你可以產生一個自訂的導覽結構—使用siteMapNode的title和URL屬性。

三、使用SiteMapPath控件

在詳細討論細節之前，讓我們先建立我們需要的目錄結構和Web表單。首先，把兩個資料夾Products和Services加入網站。然後，新增一個新的Master頁面MasterPage.master。接著新增顯示在表格2中的網頁表單，並確保當你新增它們時都為其設定master頁面。

Web表單名稱	資料夾
Default.aspx	Website root
Contact.aspx	Website root
Default.aspx	Products
Product1.aspx	Products
Product2.aspx	Products
Default.aspx	Services
Service1.aspx	Services
Service2.aspx	Services

表格2:Web表單清單

現在，打開你前面新增的Master頁面。把一個Label控制和一個SiteMapPath控制項拖曳到它上面。然後，把該Label的Text屬性設定為「Welcome!」。

以下的清單顯示了MasterPage.master頁面中的所有標記：

＜%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %＞
＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜head runat="server"＞
＜title＞Untitled Page＜/title＞
＜/head＞
＜body＞
＜form id="form1" runat="server"＞
＜div＞
＜asp:Label ID="Label1" runat="server" Font-Size="XX-Large" ForeColor="Blue" Text="Welcome!"＞＜/asp:Label＞＜br /＞
＜asp:SiteMapPath ID="SiteMapPath1" runat="server"
Font-Names="Verdana" Font-Size="0.8em" PathSeparator=" : "＞
＜PathSeparatorStyle Font-Bold="True" ForeColor="#5D7B9D" /＞
＜CurrentNodeStyle ForeColor="#333333" /＞
＜NodeStyle Font-Bold="True" ForeColor="#7C6F57" /＞
＜RootNodeStyle Font-Bold="True" ForeColor="#5D7B9D" /＞
＜/asp:SiteMapPath＞
＜br /＞
＜br /＞
＜asp:contentplaceholder id="ContentPlaceHolder1" runat="server"＞
＜/asp:contentplaceholder＞
＜/div＞
＜/form＞
＜/body＞
＜/html＞

現在，從根資料夾開啟Default.aspx。 Default.aspx應該看似圖4的樣子。

圖4:Default.aspx的範例運行

為了設計這個頁面，新增一個有４行和１列的表格。拖曳一個Label控製到最上邊一行並且設定它的Text屬性為「歡迎來到我們的網站！」。然後，拖曳三個HyperLink控制項到剩下的行上，並且設定它們的Text和NavigateUrl屬性，顯示於表格3。

HyperLink ID	Text屬性	NavigateUrl屬性
HyperLink1	Products	~/products/default.aspx
HyperLink2	Services	~/Services/default.aspx
HyperLink3	Contact Us	~/contact.aspx

表格3:設定HyperLinks的屬性

下面的清單顯示了Default.aspx中的完整標記：

＜%@ Page Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" Title="Untitled Page" %＞
＜asp:Content ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"＞
＜center＞
＜table＞
＜tr＞
＜td width="60%"＞
＜asp:Label ID="Label1" runat="server" Font-Size="X-Large"
Text="Welcome to our Web site!"＞＜/asp:Label＞＜/td＞
＜/tr＞
＜tr＞
＜td width="60%"＞
＜asp:HyperLink ID="HyperLink1" runat="server"
Font-Size="X-Large" NavigateUrl="~/Products/Default.aspx"＞Products
＜/asp:HyperLink＞＜/td＞
＜/tr＞
＜tr＞
＜td width="60%"＞
＜asp:HyperLink ID="HyperLink2" runat="server" Font-Size="X-Large"
NavigateUrl="~/Services/Default.aspx"＞Services
＜/asp:HyperLink＞＜/td＞
＜/tr＞
＜tr＞
＜td width="60%"＞
＜asp:HyperLink ID="HyperLink3" runat="server"
Font-Size="X-Large" NavigateUrl="~/Contact.aspx"＞Contact Us
＜/asp:HyperLink＞＜/td＞
＜/tr＞
＜/table＞
＜/center＞
＜/asp:Content＞

現在，從Products資料夾下開啟Default.aspx並且按照圖5所示來設計它。

圖5:Products資料夾的預設頁面

表格4列舉了在Web表單中所使用的所有超級連結。

HyperLink ID	Text屬性	NavigateUrl屬性
HyperLink1	First Product	~/products/product1.aspx
HyperLink2	Second Product	~/products/product2.aspx

表格4:Products資料夾下Default頁面中的超級連結資訊

遵循同樣道理，從Services資料夾下設計Default.aspx，結果如圖6所示。

圖6.Services資料夾的預設頁面

表格5列舉出了使用於Web表單中的超級連結資訊。

HyperLink ID	Text屬性	NavigateUrl屬性
HyperLink1	First Service	~/Services/service1.aspx
HyperLink2	Second Service	~/Services/service2.aspx

表格5:Products資料夾下Default頁面中的超級連結訊息

最後，把一個標籤加入到每一個其它Web表單並且依表格6所示設定它的Text屬性。

Web表單名稱	Label的Text屬性
~/Contact.aspx	Contact Us
~/Products/Product1.aspx	First Product Details
~/Products/Product2.aspx	Second Product Details
~/Services/Service1.aspx	First Service Details
~/Services/Service2. aspx	Second Service Details

表格6:從剩下的Web表單中設定Label的Text屬性

現在，從根資料夾下執行Default.aspx並且導航到Product1.aspx頁面。圖7顯示了Web表單的範例運作情況。

圖7:Product1.aspx的範例運行

注意，web.sitemap檔案的title和URL屬性是怎麼用來產生「breadcrumbs」的。另外，也要注意，父級是如何隨著目前頁面標題一起顯示的。試試導覽至各種頁面並觀察SiteMapPath控制項。

四、使用SiteMap資料源控件

網站地圖的使用並不僅限於SiteMapPath控制項。你也可以把網站地圖依附到可導航控制（例如TreeView）上。在下列例子中，你將使用相同的網站地圖檔案來實作與一個TreeView控制項的綁定。

把一個新的Web表單SiteMapDataSourceDemo.aspx加入到網站上。然後，把一個SiteMap資料來源控制項（SiteMapDataSource1）和一個TreeView控制項（TreeView1）拖曳到表單上。把這個TreeView控制項的DataSourceID屬性設定為SiteMapDataSource1。另外，還要把該TreeView控制項的ShowLines屬性設為true。以下是SiteMapDataSourceDemo.aspx頁面中的完整的標記：

＜%@ Page Language="C#" AutoEventWireup="true"
CodeFile="SiteMapDataSourceDemo.aspx.cs"
Inherits="SiteMapDataSourceDemo" %＞
＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜head runat="server"＞
＜title＞Untitled Page＜/title＞
＜/head＞
＜body＞
＜form id="form1" runat="server"＞
＜asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"
ShowLines="True"＞
＜/asp:TreeView＞
＜asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /＞
＜/form＞
＜/body＞
＜/html＞

現在，執行這個Web表單以觀察相同的導航結構是怎麼被自動產生到TreeView中的（見圖8）。

圖8:把網站地圖檔綁定到一個TreeView控件

五、使用SiteMap類

在SiteMapPath或TreeView控制項中顯示網站地圖資料效果太好了。然而，有時你可能需要設計客製化生成邏輯。例如，你可能想開發一個客製化的導航控制項—它僅為了垂直地顯示其父級。在這樣的情況下，你需要以程式設計方式來存取這個網站地圖檔案。 SiteMap類別允許你準確地實現這一點。

這個SiteMap路徑有兩個重要的屬性：RootNode和CurrentNode。它們的類型都是SiteMapNode，而且它們都能讓你分別參考網站地圖的根結點和目前結點。表格7列舉了SiteMapNode類別的一些重要的屬性。

屬性	描述
ChildNodes	代表當前結點的所有子結點的集合
HasChildNodes	指示是否站點地圖結點具有子結點（true/false）
Title	返回在站點地圖檔案中指定的title屬性的值
Url	返回在站點地圖檔案中指定的url屬性的值
Description	傳回在網站地圖檔案中指定的description屬性的值
ParentNode	指出目前結點的父網站地圖結點的參考

表格7:SiteMapNode類別的一些重要的屬性

下面的範例使用了SiteMap路徑來存取一個網站地圖檔案的單一結點。然後，以程式方式把它們加到一個TreeView控制項。

新增一個稱為SiteMapCustom.aspx的Web表單。然後，把一個TreeView控制拖曳到其上。把列表程式碼加入這個Web表單的Page_Load事件：

protected void Page_Load(object sender， EventArgs e)
{
int count = SiteMap.RootNode.ChildNodes.Count;
for (int i = 0; i ＜ count; i++)
{
SiteMapNode smNode=SiteMap.RootNode.ChildNodes[i];
TreeNode tvNode = new TreeNode(smNode.Title， ""， ""， smNode.Url， "");
TreeView1.Nodes.Add(tvNode);
if (smNode.HasChildNodes)
{
int childCount=smNode.ChildNodes.Count;
for (int j = 0; j ＜ childCount; j++)
{
SiteMapNode smChildNode = smNode.ChildNodes[j];
TreeNode tvChildNode = new TreeNode(smChildNode.Title，
""， ""，
smChildNode.Url， "");
tvNode.ChildNodes.Add(tvChildNode);
}
}
}
}

在這裡，你首先得到根結點中的子結點的總數。然後，你迴圈遍歷根結點的ChildNodes集合。在每一次遍歷中，你都會建立一個新的TreeNode類別的實例並且在它的建構器中指定它的標題和url。然後，你把這個TreeNode加入到TreeView的Nodes集合中。然後，你檢查是否當前SiteMapNode有任何子結點。如果有，你就對之進行遍歷，重複TreeNode創建過程。注意，這次你把新的TreeNodes加入到目前TreeNode物件的ChildNodes集合中。

請注意，因為你知道只存在兩級的嵌套，所以你在循環中使用了２。為了讓你的邏輯更有一般性，你可以使用遞歸來填滿TreeView。

運行Web表單，那麼你將再次看到類似圖8所示的內容。

六、使用安全整修

經常情況下，網站都要實現基於角色的安全模式。例如，你可以在你的應用程式中具有不同的角色，例如係統管理員，產品測試員和服務測試員。在這樣的情況中，你經常需要控制顯示給使用者的網站導航連結。例如，如果當前登入的使用者屬於產品測試員角色，那麼你可能只想要顯示與產品相聯繫的鏈接，而隱藏任何其它鏈接。一種處理角色的方法是使用手動編碼，但是，它要求以程式設計方式實現所有的授權邏輯。幸好，網站地圖檔案和SiteMap資料來源控制項一起提供了一種稱為安全整修的特徵來幫助你。

為了測試安全整修，你需要啟動你的網站的會員和角色特徵。開啟web.config檔並且在其中加入下列標記：

＜authentication mode="Forms" /＞
＜authorization＞
＜deny users="?"＞＜/deny＞
＜/authorization＞

在此，你已經把認證模式設定為Forms。你也可以設定授權規則，這樣以來匿名的使用者都會被禁止造訪此網站。然後，你需要啟動角色管理特徵—透過把下列標誌加入到web.config檔案中：

＜roleManager enabled="true" /＞

然後，從VS.NET選單下選擇「WebSite＞ASP.NET Configuration」以開啟Web網站管理工具。使用這個工具來新增兩個角色：ProductTesters和ServiceTesters(參考圖9)。當一個屬於ProductTesters角色的使用者簽入時，你只想實現把與產品相關的連結顯示在導航TreeView控制項中。同樣，當一個屬於ServiceTesters角色的使用者簽入時，應該只在TreeView中顯示與服務相關的連結。

圖9:使用Web網站管理工具新增角色

使用Web網站管理工具建立兩個用戶，分別稱為user1和user2。把user1加入ProductTesters角色，把user2加入ServiceTesters角色(見圖10)。

圖10:使用Web網站管理工具建立用戶

注意:預設地，使用者和角色資訊被儲存在你的網站的App_Data資料夾下的ASPNETDB資料庫中。這個資料庫是由ASP.NET自動建立的，如果它不存在的話。

現在，把一個新的網站地圖檔案SecurityTrimming.sitemap加入網站並且輸入下列標記：

＜?xml version="1.0" encoding="utf-8" ?＞
＜siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ＞
＜siteMapNode url="default.aspx" title="Home" description="My Web Site"＞
＜siteMapNode title="Products" roles="ProductTesters"＞
＜siteMapNode url="~/products/product1.aspx" title="First Product" /＞
＜siteMapNode url="~/products/product2.aspx" title="Second Product" /＞
＜/siteMapNode＞
＜siteMapNode title="Services" roles="ServiceTesters"＞
＜siteMapNode url="~/services/service1.aspx" title="First Service" /＞
＜siteMapNode url="~/services/service2.aspx" title="Second Service" /＞
＜/siteMapNode＞
＜siteMapNode url="contact.aspx" title="Contact Us" /＞
＜/siteMapNode＞
＜/siteMap＞

這裡的大多數標記與在web.sitemap檔案中的相同。然而，這裡有一個重要的屬性加入了Products和Services—siteMapNodes:roles。這個roles屬性指定能夠存取這個結點及其子結點的角色。因為與產品連結的連結只顯示給屬於ProductTesters角色的用戶，你要把Products siteMapNode的roles屬性設定為ProductTesters。遵循相同的道理，你要把Services siteMapNode的roles屬性設定為ServiceTesters。不具有指定的roles屬性的siteMapNodes對於所有使用者都可存取。另外，也要注意，Products和Services結點不再有指定的URL屬性。

現在，你需要配置網站地圖提供者並且啟動安全整修以便SiteMap資料來源控制項能夠按照你的要求行動。把下列標記加入web.config檔：

＜siteMap defaultProvider="myprovider" enabled="true"＞
＜providers＞
＜add name="myprovider"
type="System.Web.XmlSiteMapProvider "
siteMapFile="SecurityTrimming.sitemap"
securityTrimmingEnabled="true" /＞
＜/providers＞

在此，你新增了＜siteMap＞節並且指定一個指向SecurityTrimming.sitemap檔案的提供者。注意，這裡的securityTrimmingEnabled屬性被設定為true以支援安全整修。在你配置完＜siteMap＞節後，這個SiteMap資料源控制項會自動地從這個節中「拾取」這些設定。

把一個稱為Login.aspx的新的web表單加到網站上。然後，把一個Login控制項拖曳到它上面並且設定它的DestinationPageUrl屬性為「~/SiteMapDataSourceDemo.aspx」。注意，你在之前已經開發了SiteMapDataSourceDemo.aspx。

執行Login.aspx(參考圖11)並且輸入針對user1的憑證。

圖11:登入頁面

在你成功地登入以後，你應該會看見如圖12所示的TreeView。因為user1屬於ProductTesters角色，所以隱藏了與服務連結的連結。

圖12:使用安全整修

七、總結

網站地圖是一XML檔案—它包含你的Web網站結構的所有細節。你可以使用網站地圖檔案來產生導航結構。三種使用網站地圖檔案的常用方法分別是：使用SiteMapPath控件，使用SiteMap資料來源控件，或使用SiteMap類別。你也可以使用一個特徵—稱為安全整修來支援到產生的導航連結的角色為基礎的安全性。這些控制項和類別共同幫助為你的Web地點創建一個專業的導航結構。