ASP.net基礎(九)網站導航--網站導航及導航控件

轟穿老師講網站導航這塊內容時,組要講的是ASP.NET中常用的導航控件。在這裏就一一簡單說說。

 

網站導航?

傳統的網站導航需要我們在是在頁面上弄超鏈接的方式來實現的,在頁面修改或移動的時候需要一一在每個頁中都要進行修改,這樣會很麻煩。

在網站中建立網站地圖,也就是把所有的鏈接地址放在一個專門的文件中進行統一管理,這樣就方面的進行管理。

怎麼弄網站導航?怎麼做?

需要在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>元素常用的屬性表。

屬性

說明

title

超鏈接顯示的文字

description

超鏈接的作用,鼠標移動到鏈接地址時顯示文字

url

超鏈接目標頁的地址

siteMapFile

引用一個siteMap文件

resourceKey

用於頁面本地變化

securityTrimmingEnabled

是否讓sitemap支持安全特性

roles

確定哪些角色可以訪問當前節點

 

複雜的導航爲了更能清晰的顯示,我們可以多用幾個.mapMap文件,也就是嵌套網站地圖。

我們在新建一個文件夾,在這個文件夾下建兩個網站地圖文件,Products.siteMapServers.sitMap,建立Web.siteMap放到網站的根目錄下,用web.sitesiteMapFile屬性來鏈接其他兩個.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" >

    <siteMapNodeurl="~/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" >

    <siteMapNodeurl="home.aspx" title="home"  description="home">

        <siteMapNode siteMapFile="~/chap/Products.sitemap"  />

        <siteMapNodesiteMapFile="~/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>

    <formid="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行業裏總流傳着這麼句經典話語:“內容爲王,外鏈爲皇,內鏈爲妃,關鍵詞爲相,代碼爲將,結構爲城,更新爲太子,百度垂簾聽政。那導航不就是鏈接地址,也就處在皇妃的位置了。。。。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章