ASP.NET網(wǎng)站導(dǎo)航及導(dǎo)航控件如何使用

更新時(shí)間：2015年09月22日 17:07:33 投稿：lijiao

這篇文章主要介紹了ASP.NET網(wǎng)站導(dǎo)航及導(dǎo)航控件如何使用，需要的朋友可以參考下

網(wǎng)站導(dǎo)航？

傳統(tǒng)的網(wǎng)站導(dǎo)航需要我們?cè)谑窃陧?yè)面上弄超鏈接的方式來(lái)實(shí)現(xiàn)的，在頁(yè)面修改或移動(dòng)的的時(shí)候需要一一在每個(gè)頁(yè)中都要進(jìn)行修改，這樣會(huì)很麻煩。
在網(wǎng)站中建立網(wǎng)站地圖，也就是把所有的鏈接地址放在一個(gè)專門(mén)的文件中進(jìn)行統(tǒng)一管理，這樣就很方面的進(jìn)行管理。
怎么弄網(wǎng)站導(dǎo)航？怎么做？

需要在VS中新建網(wǎng)站地圖文件，再把網(wǎng)站地圖文件與我們想要的導(dǎo)航控件相關(guān)聯(lián)，這樣就可以實(shí)現(xiàn)導(dǎo)航的效果了，我們要更改某個(gè)地址，就直接在站點(diǎn)地圖.siteMap文件中更改就行了。
vs中如何添加網(wǎng)站地圖？

在vs中新建項(xiàng)中選擇"站點(diǎn)地圖"新建站點(diǎn)地圖。
要使用站點(diǎn)地圖，我們需要把站點(diǎn)地圖文件添加到網(wǎng)站根文件夾下。
在新建一個(gè)站點(diǎn)地圖文件的時(shí)候，默認(rèn)的代碼如下所示：

<?xml version="1.0"encoding="utf-8" ?>
<siteMapxmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNodeurl="" title="" description="">
    <siteMapNodeurl=""title="" description="" />
    <siteMapNodeurl=""title="" description="" />
  </siteMapNode>
</siteMap>

我們可以從代碼中看出文件的根元素siteMap包含了<siteMapNode>元素，這些<siteMapNode>元素形成樹(shù)形結(jié)構(gòu)，第一層為網(wǎng)站的主頁(yè)。
<siteMapNode>元素常用的屬性表。

復(fù)雜的導(dǎo)航為了更能清晰的顯示，我們可以多用幾個(gè).mapMap文件，也就是嵌套網(wǎng)站地圖。
我們?cè)谛陆ㄒ粋€(gè)文件夾，在這個(gè)文件夾下建兩個(gè)網(wǎng)站地圖文件，Products.siteMap和Servers.sitMap，建立Web.siteMap放到網(wǎng)站的根目錄下，用web.site的siteMapFile屬性來(lái)鏈接其他兩個(gè).siteMap文件。代碼如下所示：
Products.siteMap:

<?xml version="1.0"encoding="utf-8" ?> 
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > 
  <siteMapNode title="Products" description="我們的產(chǎn)品" 
        url="~/chap/Products.aspx"> 
    <siteMapNode url="~/chap/Software.aspx"title="軟件" description="軟件的提供" />  
    <siteMapNode url="~/chap/Hardware.aspx"title="硬件" description="硬件的提供" />  
  </siteMapNode>  
</siteMap>  
Services.siteMap文件：  
<?xml version="1.0"encoding="utf-8" ?>  
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >  
  <siteMapNodeurlsiteMapNodeurl="~/chap/Services.aspx"title="Services" description="我們提供的服務(wù)"> 
     <siteMapNode url="~/chap/Training.aspx"title="訓(xùn)練" description="訓(xùn)練" /> 
     <siteMapNode url="~/chap/Consulting.aspx"title="咨詢" description="問(wèn)題咨詢" /> 
     <siteMapNode url="~/chap/Support.aspx"title="支持" description="技術(shù)支持" />  
  </siteMapNode>  
</siteMap>

Web.siteMap文件：

<?xml version="1.0"encoding="utf-8" ?> 
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >  
  <siteMapNodeurlsiteMapNodeurl="home.aspx" title="home" description="home"> 
    <siteMapNode siteMapFile="~/chap/Products.sitemap" /> 
    <siteMapNodesiteMapFilesiteMapNodesiteMapFile="~/chap/Services.sitemap" />  
  </siteMapNode>  
</siteMap>

導(dǎo)航地圖建立完了，接下來(lái)顯示導(dǎo)航地圖。
SiteMapPath控件顯示導(dǎo)航

直接把控件拖動(dòng)到要導(dǎo)航的頁(yè)面就可以了?？丶?huì)自動(dòng)與導(dǎo)航地圖進(jìn)行綁定。
顯示：

TreeView控件顯示導(dǎo)航

TreeView控件通常用來(lái)樹(shù)形結(jié)構(gòu)的站點(diǎn)導(dǎo)航，可以用來(lái)顯示XML、表格或關(guān)系數(shù)據(jù)。
基本的操作：
TreeView每個(gè)節(jié)點(diǎn)其實(shí)都一個(gè)是個(gè)TreeNode類的對(duì)象。可以通過(guò)編程操作TreeNode對(duì)象動(dòng)態(tài)的添加和修改?？梢酝ㄟ^(guò)數(shù)據(jù)源控件進(jìn)行綁定，例如通過(guò)SiteMapDataSource空調(diào)感覺(jué)愛(ài)你或XmlDataSource控件。
TreeViewcollapseAll()和ExpandAll()方法折疊和展開(kāi)節(jié)點(diǎn)。利用Nodes.Add()方法添加到節(jié)點(diǎn)到控件中，Nodes.Remove()方法刪除指定節(jié)點(diǎn)。
DEMO：

在這里只是為了熟悉TreeView，也沒(méi)有實(shí)現(xiàn)，鼠標(biāo)右擊對(duì)TreeView操作，和只刷新TreeView控件，以及和數(shù)據(jù)綁定。只是為了熟悉TreeView而熟悉TreeView。
myTreeView代碼：

<%@ PageLanguage="C#" AutoEventWireup="true"CodeFile="Menu.aspx.cs"Inherits="Menu" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 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>  
  <formidformid="form1" runat="server"> 
  <div>     
  </div>  
  <asp:Menu ID="Menu1" runat="server"> 
    <Items> 
      <asp:MenuItem Text="米老師" Value="米老師"></asp:MenuItem> 
      <asp:MenuItem Text="七期" Value="七期"> 
      <asp:MenuItem Text="師姐一" Value="師姐一"></asp:MenuItem> 
      <asp:MenuItem Text="師姐二" Value="師姐二"></asp:MenuItem> 
      </asp:MenuItem>  
      <asp:MenuItem Text="八期" Value="八期"> 
      <asp:MenuItem Text="英語(yǔ)部" Value="英語(yǔ)部"></asp:MenuItem> 
      <asp:MenuItem Text="值日生部門(mén)" Value="值日生部門(mén)"></asp:MenuItem> 
      </asp:MenuItem> 
      <asp:MenuItem Text="九期" Value="九期"></asp:MenuItem> 
      <asp:MenuItem Text="十期" Value="十期"></asp:MenuItem> 
      <asp:MenuItem Text="十一期" Value="十一期"></asp:MenuItem> 
    </Items> 
   </asp:Menu> 
  </form> 
 </body> 
</html>

C#代碼：

public partial class chap_myTreeView: System.Web.UI.Page  
{ 
  //移除當(dāng)前節(jié)點(diǎn)  
  protectedvoid RemoveNode_Click(object sender, EventArgs e) 
   { 
     //如果存在當(dāng)前節(jié)點(diǎn)。 
     if (myTreeView.SelectedNode !=null) 
    {     
      //獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)。 
      TreeNode parentNode= myTreeView.SelectedNode.Parent; 
      //移除當(dāng)前節(jié)點(diǎn)。 
      if (parentNode !=null) 
      { parentNode.ChildNodes.Remove(myTreeView.SelectedNode); } 
       else 
      { 
         myTreeView.Nodes.Remove(myTreeView.SelectedNode);  
      } 
    } 
  } 
   //添加當(dāng)前節(jié)點(diǎn)。 
  protectedvoid AddNode_Click(object sender, EventArgse)  
  { 
     //如果添加當(dāng)前節(jié)點(diǎn)的值為空，則返回。 
 
    if (txtAdd.Text.Trim().Length <1) 
    { 
       return; 
    } 
     //建立節(jié)點(diǎn)的childNode，設(shè)置Value屬性。 
     TreeNode chileNode = new TreeNode(); 
    //給新加的節(jié)點(diǎn)賦值。 
    chileNode.Value = txtAdd.Text.Trim(); 
    //判斷是否選中一個(gè)節(jié)點(diǎn)。 
    if (myTreeView.SelectedNode !=null)//如果存在當(dāng)前節(jié)點(diǎn)。 
    { 
       //將新的childNode對(duì)象添加到當(dāng)前節(jié)點(diǎn)。 
      myTreeView.SelectedNode.ChildNodes.Add(chileNode); 
      txtAdd.Text = ""; 
    } 
    else 
     { 
      //作為根節(jié)點(diǎn)添加到樹(shù)中。 
      myTreeView.Nodes.Add(chileNode); 
      //清楚文本框。 
     txtAdd.Text = ""; 
    }  
  }  
  //將樹(shù)全部的折疊。 
  protectedvoid FlodNodes_Click(object sender, EventArgs e)  
  { 
     myTreeView.CollapseAll();//將樹(shù)全部折疊起來(lái). 
  } 
   //全部展開(kāi). 
  protectedvoid OpenAllNode_Click(object sender, EventArgs e) 
  { 
    myTreeView.ExpandAll();//全部展開(kāi)樹(shù).  
  } 
}

效果：

Menu控件和TreeView大同小異，在這就不贅述了。
Word中的導(dǎo)航讓我們一目了然的了解到文章的主體內(nèi)容，我想每個(gè)看過(guò)厚厚文檔的程序員對(duì)word的導(dǎo)航都深有體會(huì)。清晰合理的導(dǎo)航有效引導(dǎo)用戶到網(wǎng)站的各個(gè)角落，百度地圖能讓我們找到每一塊有名字的土地。一篇文章上說(shuō)過(guò)，SEO行業(yè)里總流傳著這么句經(jīng)典話語(yǔ)：“內(nèi)容為王，外鏈為皇，內(nèi)鏈為妃，關(guān)鍵詞為相，代碼為將，結(jié)構(gòu)為城，更新為太子，百度垂簾聽(tīng)政。那導(dǎo)航不就是鏈接地址，也就處在皇妃的位置了。。。。

希望這篇關(guān)于ASP.NET網(wǎng)站導(dǎo)航及導(dǎo)航控件的文章希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: