347
技術社區[雲棲]
在ASP.NET 2.0中使用頁麵導航控件
幾乎每個網站裏，為了方便用戶在網站中進行頁麵導航，都少不了使用頁麵導航控件。有了頁麵導航的功能，用戶可以很方便地在一個複雜的網站中進行頁麵之間的跳轉。在以往的WEB編程中，要寫一個好的頁麵導航功能，並不是那麼容易的，也要使用一些技巧。而在asp.net2.0中，為了方便進行頁麵導航，新增了一個叫做頁麵導航控件sitemapdatasource,其中還可以綁定到不同的其他頁麵控件，比如treeview,menu等，十分靈活，使到能很方便地實現頁麵導航的不同形式，而且還提供了運行時的編程接口，可以以編程的形式動態實現頁麵導航控件。本文將簡單以幾個例子來介紹一下在asp.net2.0中如何實現頁麵導航。
頁麵導航的結構和sitemapdatasource控件
在asp.net2.0中，要實現頁麵導航，應該先以xml的形式，提供出整個網站的頁麵結構層次。我們可以編寫一個叫web.sitemap的XML文本文件，在該文件中定義出整個要導航頁麵的結構層次。舉例如下：
<?xmlversion="1.0"encoding="utf-8"?>
<siteMap>
<siteMapNodetitle="Default"description="Home"url="Default.aspx">
<siteMapNodetitle="Members"description="Members"url="Members.aspx">
<siteMapNodetitle="MyAccount"description="MyAccount"url="MyAccount.aspx"/>
<siteMapNodetitle="Products"description="Products"url="Products.aspx"/>
</siteMapNode>
<siteMapNodetitle="Administration"description="Administration"url="~/Admin/Default.aspx">
<siteMapNodetitle="Customer"description="CustomerAdmin"url="~/Admin/Customer/default.aspx"/>
<siteMapNodetitle="ProductsAdmin"description="ProductsAdmin"url="~/Admin/ProductsAdmin.aspx"/>
</siteMapNode>
</siteMapNode>
</siteMap>
我們可以看到，其中，web.sitemap文件必須包含根結點sitemap。而且，設置一個父sitemapnode結點，該結點表明是默認的站點首頁，在該父sitemapnode結點下，可以有若幹個子sitemapnode結點，分別按層次結構代表了網站的各子欄目(留意一下上例中，各個子結點之間的包含關係)。而每一個sitemapnode結點中，有如下若幹個屬性：
1)URL屬性：該屬性指出要導航的欄目的地址鏈接，在web.sitemap中定義中，必須是每個欄目的相對地址。
2)Title屬性：該屬性指出每個子欄目的名稱，顯示在頁麵中。
3)Description屬性：該屬性指定時，則用戶在鼠標移動到該欄目時，出現有關該欄目的相關提示，類似於tooltips屬性。
在設計好sitemap屬性後，接下來就可以一步步構建頁麵導航功能了，主要有兩個步驟：
1)向頁麵中添加sitemapdatasource控件。該控件會自動感應綁定web.sitemap中的內容。
2)將sitemapdatasource控件綁定到如sitemappath,treeview,menu等控件中，也就是說，將它們的數據源設置為該sitemapdatasource控件。
知道了方法後，我們下麵就分別以treeview,menu,sitemappath三種控件為例子，介紹一下如何和sitemapdatasource控件進行配合使用。
先來介紹使用treeview控件和sitemapdatasource控件配合使用的方法。Treeview樹形列表控件十分適合於用來做頁麵導航，為了能具體說明，我們充分利用asp.net中的masterpage控件，先搭建出一個網站的基本框架架構。
在visualwebdeveloper2005beta1中，新建一個網站，之後添加上文的web.sitemap文件，再添加一個名叫Navigation的master類型的頁麵，代碼如下：
<%@MasterLanguage="C#"%>
<htmlxmlns="www.w3.org/1999/xhtml">
<headrunat="server">
<title>MasterPage</title>
</head>
<body>
<formrunat="server">
<div>
<tableborder="1">
<tr>
<td>
<asp:TreeViewID="TreeView1"Runat="server"DataSourceID="SiteMapDataSource1"
ExpandDepth="2"ShowExpandCollapse="False"NodeIndent="10">
<LevelStyles>
<asp:TreeNodeStyleFont-Bold="True"Font-Underline="False"/>
<asp:TreeNodeStyleFont-Italic="True"Font-Underline="False"/>
<asp:TreeNodeStyleFont-Size="X-Small"ImageUrl="bullet.gif"Font-Underline="False"/>
</LevelStyles>
<NodeStyleChildNodesPadding="10"/>
</asp:TreeView>
</td>
<td>
<asp:contentplaceholder runat="server">
</asp:contentplaceholder>
</td>
</tr>
</table>
<asp:SiteMapDataSourceID="SiteMapDataSource1"Runat="server"/>
</div>
</form>
</body>
</html>
在上麵的代碼中，其中的TREEVIEW控件中的DATASORUCE屬性中，就指定了sitemapdatasource控件，並且在treeview控件中，也定義了不同結點的樣式。
在完成了masterpage頁麵後，就等於已經把網站的模版頁建立起來了，接下來就可以新建其他子頁麵，以繼承masterpage頁麵，並且新建各自頁麵的內容了。比如，新建一個default.aspx頁麵，代碼如下：
<%@PageLanguage="C#"MasterPageFile="Navigation.master"Title="DefaultPage"%>
<asp:ContentContentPlaceHolderID="ContentPlaceHolder1"
ID="Content1"Runat="Server">
Thisisthedefaultpage
</asp:Content>
可以看到，當建立了模版頁後，就可以新建其他的子頁麵了，隻需要在其中的contentplaceholderid中寫入不同的內容就可以了。
接下來，我們來介紹如何將menu菜單控件和sitemapdatasource控件配合使用。其中，我們在上麵的例子的基礎上，在<tableborder="1">下麵增加如下代碼就可以了
<trheight="100px">
<tdcolspan="2"align="left">
<asp:MenuID="Menu1"Runat="Server"
DataSourceID="SiteMapDataSource1">
</asp:Menu>
</td>
</tr>
其中，我們增加了一個menu控件，其中將其datasourceid屬性設定為sitemapdatasource1就可以了，運行如下圖，當然，我們可以改變menu控件的顯示位置，如可以將其改成垂直樣式顯示。
而對於我們經常見到的顯示出頁麵當前路徑的導航條功能，在asp.net2.0中也可以輕易實現，我們可以使用其中的sitemappath控件。我們緊接著在上文代碼中的menu控件下，增加如下代碼：
<trheight="100px">
<tdcolspan="2"align="left">
CurrentlySelectedPageis:
<asp:SiteMapPathRunat="Server"ID="SiteMapPath1"></asp:SiteMapPath>
</td>
</tr>
<%@PageLanguage="C#"MasterPageFile="Navigation.master"Title="MembersPage"%>
<asp:ContentContentPlaceHolderID="ContentPlaceHolder1"ID="Content1"Runat="Server">
Thisisthememberspage
</asp:Content>
最後，我們看一下，如何通過編程的方式來獲取頁麵導航中的相關數據。其中，必須引用到的是sitemap類，該類提供了很多相關的方法和屬性，最重要的是currentnode屬性，它可以指出當前用戶正在瀏覽的是哪一個欄目頁麵，這用來跟蹤用戶在網站中的行動軌跡，並進行站點數據統計，有時是很有用的，舉例如下：
<%@PageLanguage="C#"MasterPageFile="Navigation.master"Title="MembersPage""%
<scriptrunat="Server">
voidPage_Load(objectsender,EventArgse)
{
Response.Write("Thecurrentlyselectedrootnodeis:"+SiteMap.CurrentNode.Description+"<br>");
Response.Write("TheParentforthecurrentlyselectednodeis:"+
SiteMap.CurrentNode.ParentNode.Description);
}
</script>
<asp:ContentContentPlaceHolderID="ContentPlaceHolder1"ID="Content1"Runat="Server">
Thisisthememberspage
</asp:Content>
在這個例子中，使用程序的方式，得出了用戶當前正在瀏覽的欄目頁麵，以及該欄目的父欄目的名稱。
最後更新：2017-04-02 00:06:35