.net入門普及-在ASP.NET 2.0中使用頁面導(dǎo)航控件
今天開始涉及.net web程序的開發(fā)。因為之前一直很少涉及,所以在下面引用一系列文章做入門普及用。先從Menu菜單開始。這篇文章引用自:http://www.cnblogs.com/xiaolin/archive/2006/12/11/589339.html
在ASP.NET 2.0中使用頁面導(dǎo)航控件
ASP.NET 2.0中使用sitemapdatasource頁面導(dǎo)航控件
幾乎每個網(wǎng)站里,為了方便用戶在網(wǎng)站中進(jìn)行頁面導(dǎo)航,都少不了使用頁面導(dǎo)航控件。有了頁面導(dǎo)航的功能,用戶可以很方便地在一個復(fù)雜的網(wǎng)站中進(jìn)行頁面之間的跳轉(zhuǎn)。在以往的WEB編程中,要寫一個好的頁面導(dǎo)航功能,并不是那么容易的,也要使用一些技巧。而在asp.net 2.0中,為了方便進(jìn)行頁面導(dǎo)航,新增了一個叫做頁面導(dǎo)航控件sitemapdatasource,sitemapdatasource中還可以綁定到不同的其他頁面控件,比如treeview,menu等,十分靈活,使到能很方便地實現(xiàn)頁面導(dǎo)航的不同形式,而且還提供了運行時的編程接口,可以以編程的形式動態(tài)實現(xiàn)頁面導(dǎo)航控件。本文將簡單以幾個例子來介紹一下在asp.net 2.0中sitemapdatasource如何實現(xiàn)頁面導(dǎo)航。
頁面導(dǎo)航的結(jié)構(gòu)和sitemapdatasource控件
在asp.net 2.0中,要實現(xiàn)頁面導(dǎo)航,應(yīng)該先以xml的形式,提供出整個網(wǎng)站的頁面結(jié)構(gòu)層次。我們可以編寫一個叫web.sitemap的XML文本文件, 在該文件中定義出整個要導(dǎo)航頁面的結(jié)構(gòu)層次。舉例如下:
1 <?xml version="1.0" encoding="utf-8" ?>
2 <siteMap>
3 <siteMapNode title="Default" description="Home" url="Default.aspx" >
4 <siteMapNode title="Members" description="Members" url="Members.aspx">
5 <siteMapNode title="My Account" description="My Account" url="MyAccount.aspx" />
6 <siteMapNode title="Products" description="Products" url="Products.aspx" />
7 </siteMapNode>
8 <siteMapNode title="Administration" description="Administration" url="~/Admin/Default.aspx">
9 <siteMapNode title="Customer" description="Customer Admin" url="~/Admin/Customer/default.aspx" />
10 <siteMapNode title="Products Admin" description="Products Admin" url="~/Admin/ProductsAdmin.aspx" />
11 </siteMapNode>
12 </siteMapNode>
13 </siteMap>
2 <siteMap>
3 <siteMapNode title="Default" description="Home" url="Default.aspx" >
4 <siteMapNode title="Members" description="Members" url="Members.aspx">
5 <siteMapNode title="My Account" description="My Account" url="MyAccount.aspx" />
6 <siteMapNode title="Products" description="Products" url="Products.aspx" />
7 </siteMapNode>
8 <siteMapNode title="Administration" description="Administration" url="~/Admin/Default.aspx">
9 <siteMapNode title="Customer" description="Customer Admin" url="~/Admin/Customer/default.aspx" />
10 <siteMapNode title="Products Admin" description="Products Admin" url="~/Admin/ProductsAdmin.aspx" />
11 </siteMapNode>
12 </siteMapNode>
13 </siteMap>
我們可以看到,其中,web.sitemap文件必須包含根結(jié)點sitemap。而且,設(shè)置一個父sitemapnode結(jié)點,該結(jié)點表明是 默認(rèn)的站點首頁,在該父sitemapnode結(jié)點下,可以有若干個子sitemapnode結(jié)點,分別按層次結(jié)構(gòu)代表了網(wǎng)站的各子欄目(留意一下上例 中,各個子結(jié)點之間的包含關(guān)系)。而每一個sitemapnode結(jié)點中,有如下若干個屬性:
- URL屬性:該屬性指出要導(dǎo)航的欄目的地址鏈接,在web.sitemap中定義中,必須是每個欄目的相對地址。
- Title屬性:該屬性指出每個子欄目的名稱,顯示在頁面中。
- Description屬性:該屬性指定時,則用戶在鼠標(biāo)移動到該欄目時,出現(xiàn)有關(guān)該欄目的相關(guān)提示,類似于tooltips屬性。
- 向頁面中添加sitemapdatasource控件。該控件會自動感應(yīng)綁定web.sitemap中的內(nèi)容。
- 將sitemapdatasource控件綁定到如sitemappath,treeview,menu等控件中,也就是說,將它們的數(shù)據(jù)源設(shè)置為該sitemapdatasource控件。
先來介紹使用treeview控件和sitemapdatasource 控件配合使用的方法。Treeview樹形列表控件十分適合于用來做頁面導(dǎo)航,為了能具體說明,我們充分利用asp.net中的masterpage控件,先搭建出一個網(wǎng)站的基本框架架構(gòu)。
在visual web developer 2005 beta 1中,新建一個網(wǎng)站,之后添加上文的web.sitemap文件,再添加一個名叫Navigation的master類型的頁面,代碼如下:
1 <%@ Master Language="C#" %>
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head id="Head1" runat="server">
4 <title>Master Page</title>
5 </head>
6 <body>
7 <form id="form1" runat="server">
8 <div>
9 <table style="width: 100%; height: 100%" border="1">
10 <tr>
11 <td style="width: 10%">
12 <asp:TreeView ID="TreeView1" Runat="server" DataSourceID="SiteMapDataSource1"
13 ExpandDepth="2" ShowExpandCollapse="False" NodeIndent="10">
14 <LevelStyles>
15 <asp:TreeNodeStyle Font-Bold="True" Font-Underline="False"/>
16 <asp:TreeNodeStyle Font-Italic="True" Font-Underline="False" />
17 <asp:TreeNodeStyle Font-Size="X-Small" ImageUrl="bullet.gif" Font-Underline="False" />
18 </LevelStyles>
19 <NodeStyle ChildNodesPadding="10" />
20 </asp:TreeView>
21 </td>
22 <td style="width: 100px">
23 <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
24 </asp:contentplaceholder>
25 </td>
26 </tr>
27 </table>
28 <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server"/>
29 </div>
30 </form>
31 </body>
32 </html>
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head id="Head1" runat="server">
4 <title>Master Page</title>
5 </head>
6 <body>
7 <form id="form1" runat="server">
8 <div>
9 <table style="width: 100%; height: 100%" border="1">
10 <tr>
11 <td style="width: 10%">
12 <asp:TreeView ID="TreeView1" Runat="server" DataSourceID="SiteMapDataSource1"
13 ExpandDepth="2" ShowExpandCollapse="False" NodeIndent="10">
14 <LevelStyles>
15 <asp:TreeNodeStyle Font-Bold="True" Font-Underline="False"/>
16 <asp:TreeNodeStyle Font-Italic="True" Font-Underline="False" />
17 <asp:TreeNodeStyle Font-Size="X-Small" ImageUrl="bullet.gif" Font-Underline="False" />
18 </LevelStyles>
19 <NodeStyle ChildNodesPadding="10" />
20 </asp:TreeView>
21 </td>
22 <td style="width: 100px">
23 <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
24 </asp:contentplaceholder>
25 </td>
26 </tr>
27 </table>
28 <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server"/>
29 </div>
30 </form>
31 </body>
32 </html>
在上面的代碼中,其中的TREEVIEW控件中的DATASORUCE屬性中,就指定了sitemapdatasource控件,并且在treeview控件中,也定義了不同結(jié)點的樣式。
在完成了masterpage頁面后,就等于已經(jīng)把網(wǎng)站的模版頁建立起來了,接下來就可以新建其他子頁面,以繼承masterpage頁面,并且新建各自頁面的內(nèi)容了。比如,新建一個default.aspx頁面,代碼如下:
1 <%@ Page Language="C#" MasterPageFile="Navigation.master" Title="Default Page"%>
2 <asp:Content ContentPlaceHolderID="ContentPlaceHolder1"
3 ID="Content1" Runat="Server">
4 This is the default page
5 </asp:Content>
2 <asp:Content ContentPlaceHolderID="ContentPlaceHolder1"
3 ID="Content1" Runat="Server">
4 This is the default page
5 </asp:Content>
可以看到,當(dāng)建立了模版頁后,就可以新建其他的子頁面了,只需要在其中的contentplaceholderid中寫入不同的內(nèi)容就可以了。運行起來后,效果如圖:

接下來,我們來介紹如何將menu菜單控件和sitemapdatasource 控件配合使用。其中,我們在上面的例子的基礎(chǔ)上,在<table style="width: 100%; height: 100%" border="1">下面增加如下代碼就可以了,
1 <tr height="100px">
2 <td colspan="2" align="left">
3 <asp:Menu ID="Menu1" Runat="Server"
4 DataSourceID="SiteMapDataSource1">
5 </asp:Menu>
6 </td>
7 </tr>
2 <td colspan="2" align="left">
3 <asp:Menu ID="Menu1" Runat="Server"
4 DataSourceID="SiteMapDataSource1">
5 </asp:Menu>
6 </td>
7 </tr>
其中,我們增加了一個menu控件,其中將其datasourceid屬性設(shè)定為sitemapdatasource1就可以了,運行如下圖,當(dāng)然,我們可以改變menu控件的顯示位置,如可以將其改成垂直樣式顯示。

而對于我們經(jīng)常見到的顯示出頁面當(dāng)前路徑的導(dǎo)航條功能,在asp.net 2.0中也可以輕易實現(xiàn),我們可以使用其中的sitemappath控件。我們緊接著在上文代碼中的menu控件下,增加如下代碼:
1 <tr height="100px">
2 <td colspan="2" align="left">
3 Currently Selected Page is:
4 <asp:SiteMapPath Runat="Server" ID="SiteMapPath1"></asp:SiteMapPath>
5 </td>
6 </tr>
2 <td colspan="2" align="left">
3 Currently Selected Page is:
4 <asp:SiteMapPath Runat="Server" ID="SiteMapPath1"></asp:SiteMapPath>
5 </td>
6 </tr>
要注意的是,只要增加sitemappath控件就可以了,因為它會自動和已經(jīng)增加的sitemapdatasource控件進(jìn)行綁定的。我們?yōu)榱苏f明問題,另外增加一個頁面member.aspx,代碼如下:
1 <%@ Page Language="C#" MasterPageFile="Navigation.master" Title="Members Page"%>
2 <asp:Content ContentPlaceHolderID="ContentPlaceHolder1" ID="Content1" Runat="Server">
3 This is the members page
4 </asp:Content>
2 <asp:Content ContentPlaceHolderID="ContentPlaceHolder1" ID="Content1" Runat="Server">
3 This is the members page
4 </asp:Content>
運行結(jié)果如下:

最后,我們看一下,如何通過編程的方式來獲取頁面導(dǎo)航中的相關(guān)數(shù)據(jù)。其中,必須引用到的是sitemap類,該類提供了很多相關(guān)的方法和屬 性,最重要的是currentnode屬性,它可以指出當(dāng)前用戶正在瀏覽的是哪一個欄目頁面,這用來跟蹤用戶在網(wǎng)站中的行動軌跡,并進(jìn)行站點數(shù)據(jù)統(tǒng)計,有 時是很有用的,舉例如下:
1 <%@ Page Language="C#" MasterPageFile="Navigation.master" Title="Members Page"%>
2 <script runat="Server">
3 void Page_Load(object sender, EventArgs e)
4 {
5 Response.Write("The currently selected root node is: " + SiteMap.CurrentNode.Description + "<br>");
6 Response.Write("The Parent for the currently selected node is : " +
7 SiteMap.CurrentNode.ParentNode.Description);
8 }
9 </script>
10 <asp:Content ContentPlaceHolderID="ContentPlaceHolder1" ID="Content1" Runat="Server">
11 This is the members page
12 </asp:Content>
2 <script runat="Server">
3 void Page_Load(object sender, EventArgs e)
4 {
5 Response.Write("The currently selected root node is: " + SiteMap.CurrentNode.Description + "<br>");
6 Response.Write("The Parent for the currently selected node is : " +
7 SiteMap.CurrentNode.ParentNode.Description);
8 }
9 </script>
10 <asp:Content ContentPlaceHolderID="ContentPlaceHolder1" ID="Content1" Runat="Server">
11 This is the members page
12 </asp:Content>
在這個例子中,使用程序的方式,得出了用戶當(dāng)前正在瀏覽的欄目頁面,以及該欄目的父欄目的名稱,運行結(jié)果如下圖:

可以看出,在asp.net 2.0中,實現(xiàn)頁面導(dǎo)航的功能十分靈活而且方便,功能十分強大,更多的功能請參考MSDN。
SiteMapDataSource 類
注意:此類在 .NET Framework 2.0 版中是新增的。
提供了一個數(shù)據(jù)源控件,Web 服務(wù)器控件及其他控件可使用該控件綁定到分層的站點地圖數(shù)據(jù)。
SiteMapDataSource 控件是站點地圖數(shù)據(jù)的數(shù)據(jù)源,站點數(shù)據(jù)則由為站點配置的站點地圖提供程序進(jìn)行存儲。SiteMapDataSource 使那些并非專門作為站點導(dǎo)航控件的 Web 服務(wù)器控件(如 TreeView、Menu 和 DropDownList 控件)能夠綁定到分層的站點地圖數(shù)據(jù)。可以使用這些 Web 服務(wù)器控件將站點地圖顯示一個為目錄,或者對站點進(jìn)行主動式導(dǎo)航。當(dāng)然,您也可以使用 SiteMapPath 控件,該控件被專門設(shè)計為一個站點導(dǎo)航控件,因此不需要 SiteMapDataSource 控件的實例。
SiteMapDataSource 綁定到站點地圖數(shù)據(jù), 并基于在站點地圖層次結(jié)構(gòu)中指定的起始節(jié)點顯示其視圖。默認(rèn)情況下,起始節(jié)點是層次結(jié)構(gòu)的根節(jié)點,但也可以是層次結(jié)構(gòu)中的任何其他節(jié)點。起始節(jié)點由以下幾個 SiteMapDataSource 屬性的值來標(biāo)識:
起始節(jié)點
屬性值
層次結(jié)構(gòu)的根節(jié)點(默認(rèn)設(shè)置)。
StartFromCurrentNode 為 false。
未設(shè)置 StartingNodeUrl。
表示當(dāng)前正在查看的頁的節(jié)點。
StartFromCurrentNode 為 true。
未設(shè)置 StartingNodeUrl。
層次結(jié)構(gòu)的特定節(jié)點。
StartFromCurrentNode 為 false。
已設(shè)置 StartingNodeUrl。
如果 StartingNodeOffset 屬性設(shè)置為非 0 的值,則它會影響起始節(jié)點以及由 SiteMapDataSource 控件基于該節(jié)點公開的站點地圖數(shù)據(jù)層次結(jié)構(gòu)。StartingNodeOffset 的值為一個負(fù)整數(shù)或正整數(shù),該值標(biāo)識從 StartFromCurrentNode 和 StartingNodeUrl 屬性所標(biāo)識的起始節(jié)點沿站點地圖層次結(jié)構(gòu)上移或下移的層級數(shù),以便對數(shù)據(jù)源控件公開的子樹的起始節(jié)點進(jìn)行偏移。
如果 StartingNodeOffset 屬性設(shè)置為負(fù)數(shù) -n,則由該數(shù)據(jù)源控件公開的子樹的起始節(jié)點是所標(biāo)識的起始節(jié)點上方 n 個級別的上級節(jié)點。如果 n 的值大于層次結(jié)構(gòu)樹中所標(biāo)識起始節(jié)點上方的所有上級層級數(shù),則子樹的起始節(jié)點是站點地圖層次結(jié)構(gòu)的根節(jié)點。
如果 StartingNodeOffset 屬性設(shè)置為正數(shù) +n,則公開的子樹的起始節(jié)點是位于所標(biāo)識的起始節(jié)點下方 n 個級別的子節(jié)點。由于層次結(jié)構(gòu)中可能存在多個子節(jié)點的分支,因此,如果可能,SiteMapDataSource 會嘗試根據(jù)所標(biāo)識起始節(jié)點與表示當(dāng)前被請求頁的節(jié)點之間的路徑,直接解析子節(jié)點。如果表示當(dāng)前被請求頁的節(jié)點不在所標(biāo)識起始節(jié)點的子樹中,則忽略 StartingNodeOffset 屬性的值。如果表示當(dāng)前被請求頁的節(jié)點與位于其上方的所標(biāo)識起始節(jié)點之間的層級差距小于 n 個級別,則使用當(dāng)前被請求頁作為起始節(jié)點。
站點地圖數(shù)據(jù)是從 SiteMapProvider 對象(如作為 ASP.NET 的默認(rèn)站點地圖提供程序的 XmlSiteMapProvider)中檢索的。可指定為站點配置的任何提供程序向 SiteMapDataSource 提供站點地圖數(shù)據(jù),并且通過訪問 SiteMap.Providers 集合可獲得可用提供程序的列表。
與所有數(shù)據(jù)源控件一樣,SiteMapDataSource 的每個實例都與單個幫助器對象關(guān)聯(lián),該幫助器對象稱為數(shù)據(jù)源視圖。SiteMapDataSourceView 是一個基于站點地圖數(shù)據(jù)的視圖,根據(jù)數(shù)據(jù)源的屬性進(jìn)行設(shè)置,并且通過調(diào)用 GetHierarchicalView 方法來檢索此視圖。SiteMapDataSourceView 維護(hù)控件所綁定到的 SiteMapNodeCollection 對象。
默認(rèn)情況下,起始節(jié)點是層次結(jié)構(gòu)的根節(jié)點,但是您可將起始節(jié)點設(shè)置為任何節(jié)點。起始節(jié)點可以是相對于站點地圖中當(dāng)前位置的一個節(jié)點,或者是相對于某個絕對位置的節(jié)點。通過設(shè)置 StartingNodeUrl 屬性可指定起始節(jié)點。
SiteMapDataSource 專用于導(dǎo)航數(shù)據(jù),并且不支持排序、篩選、分頁或緩存之類的常規(guī)數(shù)據(jù)源操作,也不支持更新、插入或刪除之類的數(shù)據(jù)記錄操作。
示例
下面的代碼示例演示如何以聲明方式使用 SiteMapDataSource 控件將 TreeView 控件綁定到一個站點地圖。該站點地圖數(shù)據(jù)從根節(jié)點級別開始檢索。
C#
1 <%@ Page Language="C#" %>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4 <HTML>
5 <BODY>
6 <FORM runat="server">
7 <asp:SiteMapDataSource
8 id="SiteMapDataSource1"
9 runat="server" />
10
11 <asp:TreeView
12 id="TreeView1"
13 runat="server"
14 DataSourceID="SiteMapDataSource1">
15 </asp:TreeView>
16
17 </FORM>
18 </BODY>
19 </HTML>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4 <HTML>
5 <BODY>
6 <FORM runat="server">
7 <asp:SiteMapDataSource
8 id="SiteMapDataSource1"
9 runat="server" />
10
11 <asp:TreeView
12 id="TreeView1"
13 runat="server"
14 DataSourceID="SiteMapDataSource1">
15 </asp:TreeView>
16
17 </FORM>
18 </BODY>
19 </HTML>
Visual Basic
1 <%@ Page Language="VB" %>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <HTML>
4 <BODY>
5 <FORM runat="server">
6 <asp:SiteMapDataSource
7 id="SiteMapDataSource1"
8 runat="server" />
9
10 <asp:TreeView
11 id="TreeView1"
12 runat="server"
13 DataSourceID="SiteMapDataSource1">
14 </asp:TreeView>
15
16 </FORM>
17 </BODY>
18 </HTML>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <HTML>
4 <BODY>
5 <FORM runat="server">
6 <asp:SiteMapDataSource
7 id="SiteMapDataSource1"
8 runat="server" />
9
10 <asp:TreeView
11 id="TreeView1"
12 runat="server"
13 DataSourceID="SiteMapDataSource1">
14 </asp:TreeView>
15
16 </FORM>
17 </BODY>
18 </HTML>
J#
1 <%@ Page Language="VJ#" %>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4 <HTML>
5 <BODY>
6 <FORM runat="server">
7 <asp:SiteMapDataSource
8 id="SiteMapDataSource1"
9 runat="server">
10 </asp:SiteMapDataSource>
11
12 <asp:TreeView
13 id="TreeView1"
14 runat="server"
15 DataSourceID="SiteMapDataSource1">
16 </asp:TreeView>
17
18 </FORM>
19 </BODY>
20 </HTML>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4 <HTML>
5 <BODY>
6 <FORM runat="server">
7 <asp:SiteMapDataSource
8 id="SiteMapDataSource1"
9 runat="server">
10 </asp:SiteMapDataSource>
11
12 <asp:TreeView
13 id="TreeView1"
14 runat="server"
15 DataSourceID="SiteMapDataSource1">
16 </asp:TreeView>
17
18 </FORM>
19 </BODY>
20 </HTML>
原文出處:http://www.ad0.cn/netfetch/article.asp?id=285
posted on 2010-09-07 14:27 游雯 閱讀(384) 評論(0) 編輯 收藏 所屬分類: .net技術(shù)