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

asp.net|導航|網站 　　 二、 使用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中的Web表單，並且確保當你添加它們時都為其設定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地點建立一個專業的導航結構。