第7章網(wǎng)站導航控件

第7章站點導航控件對于較大型的網(wǎng)站，可以利用ASP.NET站點導航控件實現(xiàn)站點導航。站點導航的作用就像城市道路的路標，使用戶操作時清楚了解自已所處的位置。7.1ASP.NET站點導航概述7.1.1站點導航的功能

若要為網(wǎng)站創(chuàng)建一致的、容易管理的導航解決方案，可以使用ASP.NET站點導航。ASP.NET站點導航提供下列功能：站點地圖?？梢允褂谜军c地圖描述站點的邏輯結(jié)構(gòu)。接著通過在添加或移除頁面時修改站點地圖（而不是修改所有網(wǎng)頁的超鏈接）來管理頁導航。ASP.NET導航控件。可以使用ASP.NET控件在網(wǎng)頁上顯示導航菜單。導航菜單以站點地圖為基礎。編程控件。可以以代碼方式使用ASP.NET站點導航，以創(chuàng)建自定義導航控件或修改在導航菜單中顯示的信息的位置。訪問規(guī)則?？梢耘渲糜糜谠趯Ш讲藛沃酗@示或隱藏鏈接的訪問規(guī)則。自定義站點地圖提供程序?？梢詣?chuàng)建自定義站點地圖提供程序，以便使用自己的站點地圖后端（如存儲鏈接信息的數(shù)據(jù)庫），并將提供程序插入到ASP.NET站點導航系統(tǒng)。7.1.2站點導航的工作方式

通過ASP.NET站點導航，可以按層次結(jié)構(gòu)描述站點的布局。例如，一個大學網(wǎng)站共有11頁，其布局如下：中華大學 院系設置 計算機學院 電子信息學院 數(shù)學學院 物理學院 職能部門 教務處 財務處 學生工作處 科技處7.1.3站點導航控件

創(chuàng)建一個反映站點結(jié)構(gòu)的站點地圖只完成了ASP.NET站點導航系統(tǒng)的一部分。導航系統(tǒng)的另一部分是在ASP.NET網(wǎng)頁中顯示導航結(jié)構(gòu)，這樣用戶就可以在站點內(nèi)輕松地移動。通過使用下列ASP.NET站點導航控件，可以輕松地在頁面中建立導航信息：TreeView：此控件顯示一個樹狀結(jié)構(gòu)或菜單，讓用戶可以遍歷訪問站點中的不同頁面。單擊包含子節(jié)點的節(jié)點可將其展開或折疊。Menu：此控件顯示一個可展開的菜單，讓用戶可以遍歷訪問站點中的不同頁面。將光標懸停在菜單上時，將展開包含子節(jié)點的節(jié)點。SiteMapPath：此控件顯示導航路徑（也稱為面包屑或眉毛鏈接）向用戶顯示當前頁面的位置，并以鏈接的形式顯示返回主頁的路徑。此控件提供了許多可供自定義鏈接的外觀的選項。7.2站點地圖

站點地圖是一種以.sitemap為擴展名的標準XML文件，主要為站點導航控件提供站點層次結(jié)構(gòu)信息，默認名為Web.sitemap?！疤砑有马棥睂υ捒騱eb.sitemap站點地圖①②

站點地圖是一個標準XML文件。其中，第一個標記用于標識版本和編碼方式，siteMap是站點地圖根節(jié)點標記，包含若干個siteMapNode子節(jié)點，一個siteMapNode子節(jié)點下又可以包含若干個siteMapNode子節(jié)點，構(gòu)成一種層次結(jié)構(gòu)。siteMapNode節(jié)點的常用屬性如下表所示：屬性說明url設置用于節(jié)點導航的URL地址。在整個站點地圖文件中，該屬性必須唯一title設置節(jié)點名稱description設計節(jié)點說明文字key定義當前節(jié)點的關(guān)鍵字roles定義允許查找該站點地圖文件的角色集合，多個角色可用分號（;）或逗號（,）分隔Provider定義處理其他站點地圖文件的站點導航提供程序名稱，默認為XmlSiteMapProvidersiteMapFile設置包含其他相關(guān)SiteMapNode元素的站點地圖文件7.3TreeView控件

TreeView控件又稱為樹形導航控件。它的顯示類似于一棵橫向的樹，可以展開或折疊樹的節(jié)點來分類查看、管理信息，非常直觀。一個TreeView控件一個節(jié)點可以同時是父節(jié)點和子節(jié)點，但是不能同時為根節(jié)點、父節(jié)點和葉節(jié)點。節(jié)點為根節(jié)點、父節(jié)點還是葉節(jié)點決定著節(jié)點的幾種可視化屬性和行為屬性。包含其他節(jié)點的節(jié)點稱為父節(jié)點（ParentNode）。被其他節(jié)點包含的節(jié)點稱為子節(jié)點（ChildNode）。沒有子節(jié)點的節(jié)點稱為葉節(jié)點（LeafNode）。不被其他任何節(jié)點包含同時是所有其他節(jié)點的上級的節(jié)點是根節(jié)點（RootNode）。

TreeView控件由節(jié)點組成。樹中的每個項都稱為一個節(jié)點，它由一個TreeNode對象表示。節(jié)點類型的定義如下：7.3.1TreeNode類

TreeView控件中一個節(jié)點就是一個TreeNode類對象。屬性說明Checked獲取或設置一個值，該值指示節(jié)點的復選框是否被選中ChildNodes獲取TreeNodeCollection集合，該集合包含當前節(jié)點的第一級子節(jié)點Depth獲取節(jié)點的深度Expanded獲取或設置一個值，該值指示是否展開節(jié)點ImageToolTip獲取或設置在節(jié)點旁邊顯示的圖像的工具提示文本ImageUrl獲取或設置節(jié)點旁顯示的圖像的URLNavigateUrl獲取或設置單擊節(jié)點時導航到的URLParent獲取當前節(jié)點的父節(jié)點Selected獲取或設置一個值，該值指示是否選擇節(jié)點ShowCheckBox獲取或設置一個值，該值指示是否在節(jié)點旁顯示一個復選框Target獲取或設置用來顯示與節(jié)點關(guān)聯(lián)的網(wǎng)頁內(nèi)容的目標窗口或框架Text獲取或設置為TreeView控件中的節(jié)點顯示的文本ToolTip獲取或設置節(jié)點的工具提示文本Value獲取或設置用于存儲有關(guān)節(jié)點的任何其他數(shù)據(jù)（如用于處理回發(fā)事件的數(shù)據(jù)）的非顯示值ValuePath獲取從根節(jié)點到當前節(jié)點的路徑方法說明Collapse折疊當前樹節(jié)點CollapseAll折疊當前節(jié)點及其所有子節(jié)點Expand展開當前樹節(jié)點ExpandAll展開當前節(jié)點及其所有子節(jié)點Select選擇TreeView控件中的當前節(jié)點ToggleExpandState切換節(jié)點的展開和折疊狀態(tài)

TreeNode類提供了以下構(gòu)造函數(shù)：publicTreeNode()publicTreeNode(stringtext)publicTreeNode(stringtext,stringvalue)publicTreeNode(stringtext,string

value,string

imageUrl)publicTreeNode(stringtext,string

value,string

imageUrl,string

navigateUrl,stringtarget)其中，參數(shù)text指定TreeView控件中的節(jié)點顯示的文本。value指定與節(jié)點關(guān)聯(lián)的補充數(shù)據(jù)，如用于處理回發(fā)事件的數(shù)據(jù)。imageUrl指定節(jié)點旁顯示的圖像的URL。navigateUrl指定單擊節(jié)點時鏈接到的URL。target指定單擊節(jié)點時用來顯示鏈接到的網(wǎng)頁內(nèi)容的目標窗口或框架。7.3.2TreeView控件的屬性、方法和事件1.TreeView控件的屬性（1）DataSourceID屬性該屬性指定TreeView控件的數(shù)據(jù)源控件的ID屬性。例如，可以指定與XML文件綁定的XmlDataSource控件或與站點地圖綁定的SiteDataSource控件的ID。（2）ExpandDepth屬性該屬性獲取或設置第一次顯示TreeView控件時所展開的層次數(shù)。例如，若該屬性設為2，則將展開根節(jié)點及根節(jié)點下方緊鄰的所有子節(jié)點。（3）SelectedNode屬性該屬性返回用戶從TreeView控件中選定的一個TreeNode對象。例如，以下語句在標簽Label1中顯示選擇節(jié)點的文本：Label1.Text="選擇的節(jié)點是:"+TreeView1.SelectedNode.Text;（4）Nodes屬性

Nodes屬性是TreeView控件中所有節(jié)點的集合，一個節(jié)點是一個TreeNode對象?？梢酝ㄟ^索引來表示Nodes集合中的元素（索引從零開始），例如：

TreeView1.Nodes表示TreeView1控件的所有節(jié)點集合。TreeView1.Nodes[0]表示TreeView1控件中第一個根節(jié)點。TreeView1.Nodes[0].ChildNodes表示TreeView1控件中第一個根節(jié)點的子節(jié)點集合。TreeView1.Nodes[0].ChildNodes[1]表示TreeView1控件中第一個根節(jié)點的第2個子節(jié)點。2.TreeView控件的方法方法說明ExpandAll打開樹中的每個節(jié)點FindNode檢索TreeView控件中指定值路徑處的TreeNode對象3.TreeView控件的事件事件說明SelectedNodeChanged當選擇TreeView控件中的節(jié)點時發(fā)生TreeNodeCheckChanged當TreeView控件中的復選框在向服務器的兩次發(fā)送過程之間狀態(tài)有所更改時發(fā)生。TreeNodeCollapsed當折疊TreeView控件中的節(jié)點時發(fā)生TreeNodeDataBound當數(shù)據(jù)項綁定到TreeView控件中的節(jié)點時發(fā)生TreeNodeExpanded當擴展TreeView控件中的節(jié)點時發(fā)生TreeNodePopulate當其PopulateOnDemand屬性設置為true的節(jié)點在TreeView控件中展開時發(fā)生7.3.3TreeNodeCollection類

TreeView控件中所有節(jié)點構(gòu)成一個TreeNodeCollection類對象，也就是說，TreeView控件的Nodes屬性就是一個TreeNodeCollection類對象。屬性說明Count獲取TreeNodeCollection對象中的項數(shù)Item獲取TreeNodeCollection對象中指定索引處的TreeNode對象

TreeNodeCollection類的主要方法有Add、AddAt、Clear、Contains、IndexOf、Remove、RemoveAt。7.3.4向TreeView控件中添加節(jié)點的方法

向TreeView控件添加節(jié)點有以下幾種方法。1.手工方式添加節(jié)點2.通過DataSourceID屬性置數(shù)據(jù)源控件

ASP.NET提供了SiteMapDataSource和XmlDataSource兩個服務器控件，位于工具箱的“數(shù)據(jù)”選項卡中，用于ASP.NET站點導航。前者檢索站點地圖提供程序的導航數(shù)據(jù)，后者檢索指定的XML文件的導航數(shù)據(jù)，并將導航數(shù)據(jù)傳遞到可顯示該數(shù)據(jù)的控件（如TreeView和Menu控件）。3.通過編程方式添加節(jié)點

由于TreeView控件的Nodes屬性是一個TreeNodeCollection類對象，因此采用Add方法向其中添加TreeNode對象。這種方式在可以在運行時動態(tài)地增刪TreeView控件的節(jié)點。protectedvoidPage_Load(objectsender,EventArgse){ TreeView1.Nodes.Clear(); TreeNodenode=newTreeNode("中華大學"); TreeView1.Nodes.Add(node); node=newTreeNode("院系設置"); TreeView1.Nodes[0].ChildNodes.Add(node); node=newTreeNode("計算機學院"); TreeView1.Nodes[0].ChildNodes[0].ChildNodes.Add(node); node=newTreeNode("電子信息學院"); TreeView1.Nodes[0].ChildNodes[0].ChildNodes.Add(node); node=newTreeNode("數(shù)學學院"); TreeView1.Nodes[0].ChildNodes[0].ChildNodes.Add(node); node=newTreeNode("物理學院"); TreeView1.Nodes[0].ChildNodes[0].ChildNodes.Add(node); node=newTreeNode("職能部門"); TreeView1.Nodes[0].ChildNodes.Add(node); node=newTreeNode("教務處"); TreeView1.Nodes[0].ChildNodes[1].ChildNodes.Add(node); node=newTreeNode("財務處"); TreeView1.Nodes[0].ChildNodes[1].ChildNodes.Add(node); node=newTreeNode("學生工作處"); TreeView1.Nodes[0].ChildNodes[1].ChildNodes.Add(node); node=newTreeNode("科技處"); TreeView1.Nodes[0].ChildNodes[1].ChildNodes.Add(node);}運行結(jié)果7.4Menu控件Menu控件又稱為菜單控件，在工具箱中的圖標為。Menu控件主要用于創(chuàng)建一個菜單，讓用戶快速選擇不同頁面，從而完成導航功能。其使用方法與TreeView控件十分相似。Menu控件由菜單項（由MenuItem對象表示）樹組成。頂級（級別0）菜單項稱為根菜單項。具有父菜單項的菜單項稱為子菜單項。所有根菜單項都存儲在Items集合中。子菜單項存儲在父菜單項的ChildItems集合中。一個Menu控件7.4.1MenuItem類Menu控件中一個菜單項就是一個MenuItem類對象。TreeNode類提供了以下構(gòu)造函數(shù)：publicMenuItem()publicMenuItem(stringtext)publicMenuItem(string

text,stringvalue)publicMenuItem(string

text,string

value,string

imageUrl)publicMenuItem(string

text,string

value,string

imageUrl,string

navigateUrl)publicMenuItem(string

text,string

value,string

imageUrl,string

navigateUrl,stringtarget)ChildItems獲取該對象包含當前菜單項的子菜單項DataItem獲取綁定到菜單項的數(shù)據(jù)項DataPath獲取綁定到菜單項的數(shù)據(jù)的路徑Depth獲取菜單項的顯示級別ImageUrl獲取或設置顯示在菜單項文本旁邊的圖像的URLNavigateUrl獲取或設置單擊菜單項時要導航到的URLParent獲取當前菜單項的父菜單項Selectable獲取或設置一個值，該值指示MenuItem對象是否可選或“可單擊”Selected獲取或設置一個值，該值指示Menu控件的當前菜單項是否已被選中Target獲取或設置用來顯示菜單項的關(guān)聯(lián)網(wǎng)頁內(nèi)容的目標窗口或框架Text獲取或設置Menu控件中顯示的菜單項文本ToolTip獲取或設置菜單項的工具提示文本Value獲取或設置一個非顯示值，該值用于存儲菜單項的任何其他數(shù)據(jù)，如用于處理回發(fā)事件的數(shù)據(jù)表7.8MenuItem類的常用屬性及其說明7.4.2Menu控件的屬性和事件屬性說明DataSourceID設置數(shù)據(jù)源對象DisappearAfter獲取或設置鼠標指針不再置于菜單上后顯示動態(tài)菜單的持續(xù)時間Items獲取MenuItemCollection對象，該對象包含Menu控件中的所有菜單項ItemWrap獲取或設置一個值，該值指示菜單項的文本是否換行Orientation獲取或設置Menu控件的呈現(xiàn)方向PathSeparator獲取或設置用于分隔Menu控件的菜單項路徑的字符SelectedItem獲取選定的菜單項SelectedValue獲取選定菜單項的值StaticDisplayLevels獲取或設置靜態(tài)菜單的菜單顯示級別數(shù)Target獲取或設置用來顯示菜單項的關(guān)聯(lián)網(wǎng)頁內(nèi)容的目標窗口或框架1.Menu控件的屬性（1）DataSourceID屬性該屬性指定Menu控件的數(shù)據(jù)源控件的ID屬性。例如，可以指定與XML文件綁定的XmlDataSource控件或與站點地圖綁定的SiteDataSource控件的ID。（2）Items屬性Items屬性是Menu控件中所有菜單項的集合，一個菜單項是一個MenuItem對象。可以通過索引來表示Items集合中的元素（索引從零開始），例如：Menu1.Items表示Menu1控件的所有菜單項集合。Menu1.Items[0]表示Menu1控件中第一個菜單項。Menu1.Items[0].ChildItems表示Menu1控件中第一個菜單項的子菜單項集合。Menu1.Item[0].ChildItems[1]表示Menu1控件中第一個菜單項的第2個子菜單項。（3）Orientation屬性該屬性取或設置Menu控件的呈現(xiàn)方向，可取Horizontal（表示水平呈現(xiàn)Menu控件，如左圖所示）或Vertical（表示垂直呈現(xiàn)Menu控件，如右圖所示）。（4）Target屬性該屬性獲取或設置用來顯示菜單項的關(guān)聯(lián)網(wǎng)頁內(nèi)容的目標窗口或框架。Target屬性影響控件中的所有菜單項。若要為單個菜單項指定一個窗口或框架，直接設置MenuItem對象的Target屬性。2.Menu控件的事件事件說明MenuItemClick單擊菜單項時發(fā)生。此事件通常用于將頁上的一個Menu控件與另一個控件進行同步MenuItemDataBound當菜單項綁定到數(shù)據(jù)時發(fā)生。此事件通常用來在菜單項呈現(xiàn)在Menu控件中之前對菜單項進行修改7.4.3MenuItemCollection類Menu控件中所有菜單項構(gòu)成一個MenuItemCollection類對象，即Menu控件的Items屬性就是一個MenuItemCollection類對象。屬性說明Count獲取當前MenuItemCollection對象所含菜單項的數(shù)目Item獲取當前MenuItemCollection對象中指定索引處的MenuItem對象MenuItemCollection類的主要方法如下。（1）Add方法該方法用于向MenuItemCollection對象中添加一個MenuItem對象。其使用格式如下：

publicvoidAdd(MenuItemchild)其中，參數(shù)child指出要添加的MenuItem對象。（2）AddAt方法該方法用于向MenuItemCollection對象中指定位置添加一個MenuItem對象。其使用格式如下：

publicvoidAddAt(intindex,MenuItemchild)其中，參數(shù)index指出將在該處插入MenuItem對象的從零開始的索引位置。child指出要添加的MenuItem對象。（3）Clear方法該方法用于從MenuItemCollection對象中移除所有MenuItem對象。其使用格式如下：

publicvoidClear()（4）Contains方法該方法指出MenuItemCollection對象中是否包含指定的MenuItem對象。其使用格式如下：

publicboolContains(MenuItemc)其中，參數(shù)c指出要查找的MenuItem對象。如果指定的MenuItem對象包含在MenuItemCollection對象中，則返回值為true；否則返回值為false。（5）IndexOf方法該方法查找指定的MenuItem對象在MenuItemCollection對象中的位置。其使用格式如下：publicintIndexOf(MenuItemvalue)其中，參數(shù)value指出要定位的MenuItem對象。如果找到MenuItemCollection中value的第一個匹配項的從零開始的索引，則為該索引；否則為-1。（6）Remove方法該方法從MenuItemCollection對象中刪除指定的MenuItem對象。其使用格式如下：publicvoidRemove(MenuItemvalue)其中，參數(shù)value指出要移除的MenuItem對象。使用Remove方法可從集合中移除指定的節(jié)點。然后跟在該節(jié)點之后的所有項都將上移以填充空白位置，同時還會更新所移動的項的索引。（7）RemoveAt方法該方法從MenuItemCollection對象中刪除指定位置處的MenuItem對象。其使用格式如下：

publicvoidRemoveAt(intindex)其中，參數(shù)index指出要移除的節(jié)點的從零開始的索引位置。使用RemoveAt方法從MenuItemCollection中的指定的從零開始的索引位置移除MenuItem對象。然后跟在該節(jié)點之后的所有項都將上移以填充空白位置。同時還會更新所移動的項的索引。7.4.4向Menu控件中添加菜單項的方法向Menu控件添加菜單項有以下幾種方法。1.手工方式添加節(jié)點2.通過DataSourceID屬性置數(shù)據(jù)源控件3.通過編程方式添加節(jié)點

【例7.3】創(chuàng)建一個WebForm7-2網(wǎng)頁，采用編程方式通過Menu控件顯示前面所列的大學網(wǎng)站層次結(jié)構(gòu)。

解：其設計步驟如下：①在Myaspnet網(wǎng)站的ch7文件夾中添加一個名稱為WebForm7-2的空網(wǎng)頁。②其設計界面如圖7.11所示，其中只包含一個Menu控件Menu1。在該網(wǎng)頁上設計如下事件過程：protectedvoidPage_Load(objectsender,EventArgse){ Menu1.Orientation=Orientation.Horizontal; Menu1.StaticDisplayLevels=2;//靜態(tài)顯示兩層 Menu1.Items.Clear(); MenuItemnode=newMenuItem("中華大學"); Menu1.Items.Add(node); node=newMenuItem("院系設置"); Menu1.Items[0].ChildItems.Add(node); node=newMenuItem("計算機學院"); Menu1.Items[0].ChildItems[0].ChildItems.Add(node); node=newMenuItem("電子信息學院"); Menu1.Items[0].ChildItems[0].ChildItems.Add(node); node=newMenuItem("數(shù)學學院"); Menu1.Items[0].ChildItems[0].ChildItems.Add(node); node=newMenuItem("物理學院"); Menu1.Items[0].ChildItems[0].ChildItems.Add(node); node=newMenuItem("職能部門"); Menu1.Items[0].ChildItems.Add(node); node=newMenuItem("教務處"); Menu1.Items[0].ChildItems[1].ChildItems.Add(node); node=newMenuItem("財務處"); Menu1.Items[0].ChildItems[1].ChildItems.Add(node); node=newMenuItem("學生工作處"); Menu1.Items[0].ChildItems[1].ChildItems.Add(node); node=newMenuItem("科技處"); Menu1.Items[0].ChildItems