在ASP.NET 2.0中使用頁(yè)面導(dǎo)航控件

悟靜 2010-11-04

展開(kāi)全文

幾乎每個(gè)網(wǎng)站里，為了方便用戶在網(wǎng)站中進(jìn)行頁(yè)面導(dǎo)航，都少不了使用頁(yè)面導(dǎo)航控件。有了頁(yè)面導(dǎo)航的功能，用戶可以很方便地在一個(gè)復(fù)雜的網(wǎng)站中進(jìn)行頁(yè)面之間的跳轉(zhuǎn)。在以往的WEB編程中，要寫一個(gè)好的頁(yè)面導(dǎo)航功能，并不是那么容易的，也要使用一些技巧。而在asp.net 2.0中，為了方便進(jìn)行頁(yè)面導(dǎo)航，新增了一個(gè)叫做頁(yè)面導(dǎo)航控件sitemapdatasource,其中還可以綁定到不同的其他頁(yè)面控件，比如treeview,menu等，十分靈活，使到能很方便地實(shí)現(xiàn)頁(yè)面導(dǎo)航的不同形式，而且還提供了運(yùn)行時(shí)的編程接口，可以以編程的形式動(dòng)態(tài)實(shí)現(xiàn)頁(yè)面導(dǎo)航控件。本文將簡(jiǎn)單以幾個(gè)例子來(lái)介紹一下在asp.net 2.0中如何實(shí)現(xiàn)頁(yè)面導(dǎo)航。

　　頁(yè)面導(dǎo)航的結(jié)構(gòu)和sitemapdatasource控件

　　在asp.net 2.0中，要實(shí)現(xiàn)頁(yè)面導(dǎo)航，應(yīng)該先以xml的形式，提供出整個(gè)網(wǎng)站的頁(yè)面結(jié)構(gòu)層次。我們可以編寫一個(gè)叫web.sitemap的XML文本文件，在該文件中定義出整個(gè)要導(dǎo)航頁(yè)面的結(jié)構(gòu)層次。舉例如下：

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
　<siteMapNode title="Default" description="Home" url="Default.aspx" >
　　<siteMapNode title="Members" description="Members" url="Members.aspx">
　　　<siteMapNode title="My Account" description="My Account" url="MyAccount.aspx" />
　　　<siteMapNode title="Products" description="Products" url="Products.aspx" />
　　</siteMapNode>
　　<siteMapNode title="Administration" description="Administration" url="~/Admin/Default.aspx">
　　　<siteMapNode title="Customer" description="Customer Admin" url="~/Admin/Customer/default.aspx" />
　　　<siteMapNode title="Products Admin" description="Products Admin" url="~/Admin/ProductsAdmin.aspx" />
　　</siteMapNode>
　</siteMapNode>
</siteMap>

　　我們可以看到，其中，web.sitemap文件必須包含根結(jié)點(diǎn)sitemap。而且，設(shè)置一個(gè)父sitemapnode結(jié)點(diǎn)，該結(jié)點(diǎn)表明是默認(rèn)的站點(diǎn)首頁(yè)，在該父sitemapnode結(jié)點(diǎn)下，可以有若干個(gè)子sitemapnode結(jié)點(diǎn)，分別按層次結(jié)構(gòu)代表了網(wǎng)站的各子欄目（留意一下上例中，各個(gè)子結(jié)點(diǎn)之間的包含關(guān)系）。而每一個(gè)sitemapnode結(jié)點(diǎn)中，有如下若干個(gè)屬性：

　　1）URL屬性：該屬性指出要導(dǎo)航的欄目的地址鏈接，在web.sitemap中定義中，必須是每個(gè)欄目的相對(duì)地址。

　　2)Title屬性：該屬性指出每個(gè)子欄目的名稱，顯示在頁(yè)面中。

　　3）Description屬性：該屬性指定時(shí)，則用戶在鼠標(biāo)移動(dòng)到該欄目時(shí)，出現(xiàn)有關(guān)該欄目的相關(guān)提示，類似于tooltips屬性。

　　在設(shè)計(jì)好sitemap屬性后，接下來(lái)就可以一步步構(gòu)建頁(yè)面導(dǎo)航功能了，主要有兩個(gè)步驟：

　　1）向頁(yè)面中添加sitemapdatasource控件。該控件會(huì)自動(dòng)感應(yīng)綁定web.sitemap中的內(nèi)容。

　　2）將sitemapdatasource控件綁定到如sitemappath,treeview,menu等控件中，也就是說(shuō)，將它們的數(shù)據(jù)源設(shè)置為該sitemapdatasource控件。

　　知道了方法后，我們下面就分別以treeview,menu,sitemappath三種控件為例子，介紹一下如何和sitemapdatasource控件進(jìn)行配合使用。

　　先來(lái)介紹使用treeview控件和sitemapdatasource 控件配合使用的方法。Treeview樹形列表控件十分適合于用來(lái)做頁(yè)面導(dǎo)航，為了能具體說(shuō)明，我們充分利用asp.net中的masterpage控件，先搭建出一個(gè)網(wǎng)站的基本框架架構(gòu)。

　　在visual web developer 2005 beta 1中，新建一個(gè)網(wǎng)站，之后添加上文的web.sitemap文件，再添加一個(gè)名叫Navigation的master類型的頁(yè)面，代碼如下：

<%@ Master Language="C#" %>
<html xmlns="http://www./1999/xhtml" >
<head id="Head1" runat="server">
<title>Master Page</title>
</head>
<body>
　<form id="form1" runat="server">
　　<div>
　　<table style="width: 100%; height: 100%" border="1">
　　<tr>
　　　<td style="width: 10%">
　　　　<asp:TreeView ID="TreeView1" Runat="server" DataSourceID="SiteMapDataSource1"
　　　　　　ExpandDepth="2" ShowExpandCollapse="False" NodeIndent="10">
　　　　　<LevelStyles>
　　　　　　<asp:TreeNodeStyle Font-Bold="True" Font-Underline="False"/>
　　　　　　<asp:TreeNodeStyle Font-Italic="True" Font-Underline="False" />
　　　　　　<asp:TreeNodeStyle Font-Size="X-Small" ImageUrl="bullet.gif" Font-Underline="False" />
　　　　　</LevelStyles>
　　　　　<NodeStyle ChildNodesPadding="10" />
　　　　</asp:TreeView>
　　　</td>
　　　<td style="width: 100px">
　　　　<asp:contentplaceholder id="ContentPlaceHolder1"　runat="server">
　　　　</asp:contentplaceholder>
　　　</td>
　　</tr>
　</table>
　<asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server"/>
　</div>
</form>
</body>
</html>

　　在上面的代碼中，其中的TREEVIEW控件中的DATASORUCE屬性中，就指定了sitemapdatasource控件，并且在treeview控件中，也定義了不同結(jié)點(diǎn)的樣式。

　　在完成了masterpage頁(yè)面后，就等于已經(jīng)把網(wǎng)站的模版頁(yè)建立起來(lái)了，接下來(lái)就可以新建其他子頁(yè)面，以繼承masterpage頁(yè)面，并且新建各自頁(yè)面的內(nèi)容了。比如，新建一個(gè)default.aspx頁(yè)面，代碼如下：

<%@ Page Language="C#" MasterPageFile="Navigation.master" Title="Default Page"%>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1"
ID="Content1" Runat="Server">
This is the default page
</asp:Content>

　　可以看到，當(dāng)建立了模版頁(yè)后，就可以新建其他的子頁(yè)面了，只需要在其中的contentplaceholderid中寫入不同的內(nèi)容就可以了。運(yùn)行起來(lái)后，效果如圖：

接下來(lái)，我們來(lái)介紹如何將menu菜單控件和sitemapdatasource 控件配合使用。其中，我們?cè)谏厦娴睦拥幕A(chǔ)上，在<table style="width: 100%; height: 100%" border="1">下面增加如下代碼就可以了，

　　其中，我們?cè)黾恿艘粋€(gè)menu控件，其中將其datasourceid屬性設(shè)定為sitemapdatasource1就可以了，運(yùn)行如下圖，當(dāng)然，我們可以改變menu控件的顯示位置，如可以將其改成垂直樣式顯示。

　　而對(duì)于我們經(jīng)常見(jiàn)到的顯示出頁(yè)面當(dāng)前路徑的導(dǎo)航條功能，在asp.net 2.0中也可以輕易實(shí)現(xiàn)，我們可以使用其中的sitemappath控件。我們緊接著在上文代碼中的menu控件下，增加如下代碼：

<tr height="100px">
<td colspan="2" align="left">
Currently Selected Page is:
<asp:SiteMapPath Runat="Server" ID="SiteMapPath1"></asp:SiteMapPath>
</td>
</tr>

　　要注意的是，只要增加sitemappath控件就可以了，因?yàn)樗鼤?huì)自動(dòng)和已經(jīng)增加的sitemapdatasource控件進(jìn)行綁定的。我們?yōu)榱苏f(shuō)明問(wèn)題，另外增加一個(gè)頁(yè)面member.aspx,代碼如下：

<%@ Page Language="C#" MasterPageFile="Navigation.master" Title="Members Page"%>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" ID="Content1" Runat="Server">
This is the members page
</asp:Content>

　　運(yùn)行結(jié)果如下：

　　　　

　　最后，我們看一下，如何通過(guò)編程的方式來(lái)獲取頁(yè)面導(dǎo)航中的相關(guān)數(shù)據(jù)。其中，必須引用到的是sitemap類，該類提供了很多相關(guān)的方法和屬性，最重要的是currentnode屬性，它可以指出當(dāng)前用戶正在瀏覽的是哪一個(gè)欄目頁(yè)面，這用來(lái)跟蹤用戶在網(wǎng)站中的行動(dòng)軌跡，并進(jìn)行站點(diǎn)數(shù)據(jù)統(tǒng)計(jì)，有時(shí)是很有用的，舉例如下：

<%@ Page Language="C#" MasterPageFile="Navigation.master" Title="Members Page"%>
<script runat="Server">
void Page_Load(object sender, EventArgs e)
{
　Response.Write("The currently selected root node is: " + SiteMap.CurrentNode.Description + "<br>");
　Response.Write("The Parent for the currently selected node is : " +
　　　SiteMap.CurrentNode.ParentNode.Description);
}
</script>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" ID="Content1" Runat="Server">
This is the members page
</asp:Content>

　　在這個(gè)例子中，使用程序的方式，得出了用戶當(dāng)前正在瀏覽的欄目頁(yè)面，以及該欄目的父欄目的名稱，運(yùn)行結(jié)果如下圖：

　　可以看出，在asp.net 2.0中，實(shí)現(xiàn)頁(yè)面導(dǎo)航的功能十分靈活而且方便，功能十分強(qiáng)大，更多的功能請(qǐng)參考MSDN。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：悟靜 > 《.net和asp.net》

舉報(bào)/認(rèn)領(lǐng)