尊重作者，請保留 www.it55.com 連結字樣。
網站導覽控制項可以讓你的網站結構清晰、易操作性更強，本節主要涉及asp.net 2.0新特性：網站導覽控制項。
網站導覽控制項包括：SiteMapPath控制項、TreeView控制項、Menu控制項等。這些控制項都建立在資料來源（網站地圖）基礎上的。網站地圖是一種嚴格的xml檔案。所以在講述上述控制項之前，我們必須先建立一個網站地圖。
網站地圖的建立
在當前項目上滑鼠右鍵>>>添加新項>>>在“添加新項”配置框中選擇“網站地圖”，因為預設的Web.config名稱可以被網站導覽控制項隱性調用，所以這裡我們不改動檔案名稱。點擊“添加”
將Web.sitemap的內容修改如下：
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="http://www.itgao.com/" title="首頁" description="itgao.com首頁">
<siteMapNode url="http://www.itgao.com/web/" title="網站製作" description="網站製作教程">
<siteMapNode url="http://www.itgao.com/Dreamweaver/" title="Dreamweaver" description="Dreamweaver教程" />
<siteMapNode url="http://www.itgao.com/Flash/" title="flash" description="flash教程" />
<siteMapNode url="http://www.itgao.com/standard/" title="web標準" description="web標準" />
</siteMapNode>
<siteMapNode url="http://www.itgao.com/design/" title="圖片處理" description="圖片處理教程" >
<siteMapNode url="Default.aspx" title="Photoshop" description="Photoshop教程" />
<siteMapNode url="http://www.itgao.com/CorelDRAW/" title="CorelDRAW" description="CorelDRAW教程" />
<siteMapNode url="http://www.itgao.com/Illustrator/" title="Illustrator" description="Illustrator教程" />
</siteMapNode>
<siteMapNode url="http://www.itgao.com/program/" title="程式設計" description="程式設計教程" />
<siteMapNode url="http://www.itgao.com/site/" title="建站資訊" description="建站資訊" />
<siteMapNode url="http://www.itgao.com/server/" title="伺服器" description="伺服器教程" />
<siteMapNode url="http://www.itgao.com/DataBase/" title="資料庫" description="資料庫教程" />
<siteMapNode url="http://www.itgao.com/safe/" title="安全防護" description="安全防護教程" />
<siteMapNode url="http://www.itgao.com/office/" title="辦公軟體" description="辦公軟體教程" />
</siteMapNode>
</siteMap>
“SiteMapPath”控制項應用：
“SiteMapPath”控制項可以很方便的在你的頁面上建立一個“當前位置”的導航條。
建立方法：建立web表單，並且換至設計介面。在工具箱中找到“SiteMapPath”控制項，並拖至web表單中。
在vs 2005的設計介面裡，我們可以通過“自動套用格式”來快速設定SiteMapPath的樣式：
我們還可以通過“編輯模版”來給SiteMapPath某個節點或分隔字元設定自訂模版：
本例為了學習內容的簡化明了，對此不做設定和講解。以下是SiteMapPath控制項的大部分屬性及注釋：
#p#分網頁標題#e#SiteMapPath預設調用網站根目錄下的Web.sitemap作為資料來源，但需要注意的是：在Web.sitemap中的所有節點的url屬性中有且只能有一個SiteMapPath控制項調用頁路徑（本例為Default.aspx），否則運行後會無法看到SiteMapPath控制項。
最終Default.aspx內容：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Culture="auto" meta:resourcekey="PageResource1" UICulture="auto" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無標題頁</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SiteMapPath ID="SiteMapPath1" runat="server" meta:resourcekey="SiteMapPath1Resource1" SkipLinkText="">
</asp:SiteMapPath>
</div>
</form>
</body>
</html>
運行效果：
“TreeView”控制項應用：
“TreeView”控制項可以在你的頁面上呈現網站欄目樹形結構，可以綁定多種資料來源控制項，本例仍然使用Web.sitemap作為資料來源。因為要使用網站地圖作為資料來源需要整合SiteMapDataSource控制項以實現資料的轉換，所以本例在實現過程中需要調用SiteMapDataSource控制項。
建立方法：在當前項目中建立web表單Default2.aspx並且換至設計介面；將左側工具列中“資料”選項欄中的“SiteMapDataSource”控制項拖放至頁面中，命名為“SiteMapDataSource1”，此時“SiteMapDataSource”控制項預設會自動綁定網站根目錄下的Web.sitemap網站地圖檔案。
將左側工具列中“導航”選項欄中的“TreeView”控制項拖放至頁面中，並選擇SiteMapDataSource1作為其資料來源。
此時TreeView已經製作完成。另外，我們可以通過“自動套用格式”來很方便的設定TreeView控制項的格式：
還可以通過“編輯節點”來以可視化方式添加TreeView的節點項：
你也可以通過“自訂行表徵圖”來為你的節點添加個人化表徵圖：
最後，如果你選取了“顯示行”的複選框，TreeView將以樹形線的方式來展示節點結構：
考慮到教程的簡潔化，本例不做以上設定。
最後Default2.aspx的內容如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無標題頁</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ShowLines="True">
</asp:TreeView>
</div>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</form>
</body>
</html>
運行結果：
“Menu”控制項應用：
顧名思義，“Menu”控制項的作用就是根據資料來源產生網站菜單，可以綁定多種資料來源控制項，本例仍然使用Web.sitemap作為資料來源。“Menu”控制項的建立方法和“TreeView”控制項大同小異：#p#分網頁標題#e#
首先建立“SiteMapDataSource”資料來源；然後在“導航”中的“Menu”控制項拖拉至頁面中，並選擇資料來源為SiteMapDataSource1：
因為在網站地圖檔案Web.sitemap中，只有“首頁”是根節點，所以預設我們的Menu控制項只顯示“首頁”菜單，這和我們的要求是有差別的。我們需要顯示所有二級節點的菜單，所以我們必須對SiteMapDataSource1做如下設定：
滑鼠點選“SiteMapDataSource1”資料來源控制項，在右側屬性中更改ShowStartingNode屬性值為false：
菜單預設是豎直顯示的，為了使菜單能夠水平顯示，我們需要滑鼠點選Menu控制項後，將其Orientation屬性值改為“Horizontal”：
Web表單Default3.aspx最終代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無標題頁</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal">
</asp:Menu>
</div>
</form>
</body>
</html>
最終顯示效果：
本節主要講述了網站導覽控制項(SiteMapPath、TreeView、Menu)的用法，只要多多實踐，大家就可以掌握個中蹊蹺。
下一節，我們將一起學習：Asp.Net 2.0新特性 其它伺服器控制項 BulletedList控制項、HiddenField控制項、FileUpload控制項、ImageMap控制項、MultiView和View控制項、Wizard控制項
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
