網站導航?
傳統的網站導航需要我們在是在頁面上弄超連結的方式來實現的,在頁面修改或移動的的時候需要一一在每個頁中都要進行修改,這樣會很麻煩。
在網站中建立網站地圖,也就是把所有的連結地址放在一個專門的檔案中進行統一管理,這樣就很方面的進行管理。
怎麼弄網站導航?怎麼做?
需要在VS中建立網站地圖檔案,再把網站地圖檔案與我們想要的導航控制項相關聯,這樣就可以實現導航的效果了,我們要更改某個地址,就直接在網站地圖.siteMap檔案中更改就行了。
vs中如何添加網站地圖?
在vs中建立項中選擇"網站地圖"建立網站地圖。
要使用網站地圖,我們需要把網站地圖檔添加到網站根資料夾下。
在建立一個網站地圖檔的時候,預設的代碼如下所示:
<?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>元素形成樹形結構,第一層為網站的首頁。
<siteMapNode>元素常用的屬性工作表。
複雜的導航為了更能清晰的顯示,我們可以多用幾個.mapMap檔案,也就是嵌套網站地圖。
我們在建立一個檔案夾,在這個檔案夾下建兩個網站地圖檔案,Products.siteMap和Servers.sitMap,建立Web.siteMap放到網站的根目錄下,用web.site的siteMapFile屬性來連結其他兩個.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="我們的產品" 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="我們提供的服務"> <siteMapNode url="~/chap/Training.aspx"title="訓練" description="訓練" /> <siteMapNode url="~/chap/Consulting.aspx"title="諮詢" description="問題諮詢" /> <siteMapNode url="~/chap/Support.aspx"title="支援" description="支援人員" /> </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>
導航地圖建立完了,接下來顯示導航地圖。
SiteMapPath控制項顯示導航
直接把控制項拖動到要導航的頁面就可以了。控制項會自動與導航地圖進行綁定。
顯示:
TreeView控制項顯示導航
TreeView控制項通常用來樹形結構的網站導覽,可以用來顯示XML、表格或關係資料。
基本的操作:
TreeView每個節點其實都一個是個TreeNode類的對象。可以通過編程操作TreeNode對象動態添加和修改。可以通過資料來源控制項進行綁定,例如通過SiteMapDataSource空調感覺愛你或XmlDataSource控制項。
TreeViewcollapseAll()和ExpandAll()方法摺疊和展開節點。利用Nodes.Add()方法添加到節點到控制項中,Nodes.Remove()方法刪除指定節點。
DEMO:
在這裡只是為了熟悉TreeView,也沒有實現,滑鼠右擊對TreeView操作,和只重新整理TreeView控制項,以及和資料繫結。只是為了熟悉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="英語部" Value="英語部"></asp:MenuItem> <asp:MenuItem Text="值日生部門" Value="值日生部門"></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 { //移除當前節點 protectedvoid RemoveNode_Click(object sender, EventArgs e) { //如果存在當前節點。 if (myTreeView.SelectedNode !=null) { //擷取當前節點的父節點。 TreeNode parentNode= myTreeView.SelectedNode.Parent; //移除當前節點。 if (parentNode !=null) { parentNode.ChildNodes.Remove(myTreeView.SelectedNode); } else { myTreeView.Nodes.Remove(myTreeView.SelectedNode); } } } //添加當前節點。 protectedvoid AddNode_Click(object sender, EventArgse) { //如果添加當前節點的值為空白,則返回。 if (txtAdd.Text.Trim().Length <1) { return; } //建立節點的childNode,設定Value屬性。 TreeNode chileNode = new TreeNode(); //給新加的節點賦值。 chileNode.Value = txtAdd.Text.Trim(); //判斷是否選中一個節點。 if (myTreeView.SelectedNode !=null)//如果存在當前節點。 { //將新的childNode對象添加到當前節點。 myTreeView.SelectedNode.ChildNodes.Add(chileNode); txtAdd.Text = ""; } else { //作為根節點添加到樹中。 myTreeView.Nodes.Add(chileNode); //清楚文字框。 txtAdd.Text = ""; } } //將樹全部的摺疊。 protectedvoid FlodNodes_Click(object sender, EventArgs e) { myTreeView.CollapseAll();//將樹全部摺疊起來. } //全部展開. protectedvoid OpenAllNode_Click(object sender, EventArgs e) { myTreeView.ExpandAll();//全部展開樹. } }
效果:
Menu控制項和TreeView大同小異,在這就不贅述了。
Word中的導航讓我們一目瞭然的瞭解到文章的主體內容,我想每個看過厚厚文檔的程式員對word的導航都深有體會。清晰合理的導航有效引導使用者到網站的各個角落,百度地圖能讓我們找到每一塊有名字的土地。一篇文章上說過,SEO行業裡總流傳著這麼句經典話語:“內容為王,外鏈為皇,內鏈為妃,關鍵詞為相,代碼為將,結構為城,更新為太子,百度垂簾聽政。那導航不就是連結地址,也就處在皇妃的位置了。。。。
希望這篇關於ASP.NET網站導航及導航控制項的文章希望對大家的學習有所協助。