导航控件

网站的导航功能是给浏览该网站的用户起一个指示的作用，让用户能清楚了解自己当前处于网站的哪一层，并能快速在各层不同模块间进行切换。
过去我们做网站时需要手动地为每一个页面实现导航功能，这样做起来工作量太庞大，可维护性差，而且很容量出错。
在Asp.Net2.0中为我们提供了三个常用的导航控件：
    TreeView控件
    Menu控件
    SiteMapPath控件
   
导航控件的优点在于：
    1、提供可视化的操作界面，和面向对象的思想，简化开发人员的使用。开发人员没有必要再去为HTML,CSS,JavaScript大费脑筋，只需要设置内处属性就可以制作出专业的网站导航。
    2、数据源的多样化，可以进行动态生成导航内容。开发人员除了可以在程序中把导航内容写“死”，还可以把导航内容放XML、SiteMap文件中甚至可以放在数据库中。
   
一、以上这三个控件要实现导航功能一般离不开一个“地图文件”，“地图文件”中记录了导航控件中的导航内容，并有固定的书写格式。
如：
//web.sitemap文件的内容
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="china.aspx" title="中国" description="">
      <siteMapNode url="shandong.aspx" title="山东" description="">
        <siteMapNode url="default9.aspx" title="济南">
          <siteMapNode url="site.aspx?id=0100" title="平阴"></siteMapNode>
          <siteMapNode url="site.aspx?id=0101" title="历城"></siteMapNode>
          <siteMapNode url="site.aspx?id=0102" title="章丘"></siteMapNode>
        </siteMapNode>
        <siteMapNode url="qingdao.aspx" title="青岛"></siteMapNode>
        <siteMapNode url="yantai.aspx" title="烟台"></siteMapNode>
      </siteMapNode>

      <siteMapNode url="jiangsu.aspx" title="江苏" description="">
        <siteMapNode url="nanjing.aspx" title="南京"></siteMapNode>
        <siteMapNode url="suzhou.aspx" title="苏州"></siteMapNode>
      </siteMapNode>
      <siteMapNode url="liaoning.aspx" title="辽宁">
        <siteMapNode url="shenyang.aspx" title="沈阳"></siteMapNode>
        <siteMapNode url="dalian.aspx" title="大连"></siteMapNode>
      </siteMapNode>
    </siteMapNode>
</siteMap>
通过上面的例子大家能看出“地图文件”是一个典型的XML文件，其中的每一个节点元素的名子都是siteMapNode，它呈现的是一种层次型的结构，与我们网站的导航功能在逻辑上是一致的。
    url属性：表示该导航节点所对应的超链接路径。
    title属性：导航节点所显示的名称
    description属性：节点的描述性说明

二、如果要读取地图文件的信息，我们一般会使用SiteMapDataSource控件，它是一个DataSource控件。它会自动嗅探相应目录下的web.sitemap文件，并把它读取出来，然后交给导航控件显示。SiteMapDataSource控件一般直接放在页面上就可以运行了，无需其它复杂设置。

三、TreeView控件将数据源的信息以树状目录的结构展现出来。

    属性：
        CollapseImageUrl：子元素收合起来时的节点图像路径。
        ExpandImageUrl：子元素展开后的节点图像路径。
        NoExpandImageUrl：叶子节点的图像咱径。
        ShowExpandCollapse：是否显示"+"、"-"节点指示
        ShowLines：是否显示节点之间的连线
        Nodes：当前节点的子节点集合
    方法：
        CollapseAll()：关闭所有节点。
        ExpandAll()：展开所有节点。
    事件：
        SelectedNodeChanged：在节点选取时触发。
        TreeNodeExpanded：在展开节点时触发。
        TreeNodeCollapsed：在节点收缩时触发。
        TreeNodeDataBound：当数据项绑定的时候触发。

四、SiteMapPath控件，是导航条工具。

    属性：
        PathSeparator：各导航项之间的分隔符。
        ParentLevelsDisplayed：显示该节点的几层父节点，默认是-1，显示所有的父节点。
    事件：
        ItemCreated：创建节点项时触发。
        ItemDataBound：将数据绑定到节点项时触发。
       这两个事件与Asp.Net1.1中DataGrid的两个事件的意思相似在此不多说。

五、Menu控件，以层次型菜单的形式展现导航内容，可以在属性页面和智能菜单中设置它的一些属性。

 

    属性：
        DisappearAfter：当鼠标放在菜单上时，动态菜单显示的时间
        StaticDisplayLevels：静态菜单中要显示的层级数
        MaximumDynamicDisplayLevels：对动态菜单呈现的菜单层级数目
    事件：
        MenuItemClick：点击菜单项所引发的事件
        MenuItemDataBound：绑定数据时发生   

 

如何将siteMap/XML格式的导航文件中的内容显示在导航控件中，是这篇文章的主要内容。这里面的工作并不难，只要按照下面的步骤实现就可以
一、实现导航控件与siteMap文件的协同操作
1、创建siteMap文件
//web.sitemap文件的内容
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="china.aspx" title="中国" description="">
      <siteMapNode url="shandong.aspx" title="山东" description="">
        <siteMapNode url="default9.aspx" title="济南">
          <siteMapNode url="site.aspx?id=0100" title="平阴"></siteMapNode>
          <siteMapNode url="site.aspx?id=0101" title="历城"></siteMapNode>
          <siteMapNode url="site.aspx?id=0102" title="章丘"></siteMapNode>
        </siteMapNode>
        <siteMapNode url="qingdao.aspx" title="青岛"></siteMapNode>
        <siteMapNode url="yantai.aspx" title="烟台"></siteMapNode>
      </siteMapNode>

      <siteMapNode url="jiangsu.aspx" title="江苏" description="">
        <siteMapNode url="nanjing.aspx" title="南京"></siteMapNode>
        <siteMapNode url="suzhou.aspx" title="苏州"></siteMapNode>
      </siteMapNode>
      <siteMapNode url="liaoning.aspx" title="辽宁">
        <siteMapNode url="shenyang.aspx" title="沈阳"></siteMapNode>
        <siteMapNode url="dalian.aspx" title="大连"></siteMapNode>
      </siteMapNode>
    </siteMapNode>
</siteMap>
siteMap文件的文件名一般为web.sitemap，因为后面的SiteMapDataSource会自动嗅探web.sitemap文件作为要显示的文件。
2、将SiteMapDataSource控件放入页面
3、将导航控件放入页面，设置其DataSourceId属性为第2步中的SiteMapDataSource控件的ID
效果如下：

上面是menu的效果

上面是sitemap的效果

上面是treeview的效果

二、实现导航控件与自定义的XML文件实现协同操作
1、创建自定义的XML文件
//work.xml文件
<?xml version="1.0" encoding="utf-8" ?>
<root url="top.aspx" name="计算机书目">
<type url="type.aspx?id=0" name="办公类">
    <book url="book.aspx?id=0" name="Windows应用"></book>
    <book url="book.aspx?id=1" name="Office快速入门"></book>
</type>
<type url="type.aspx?id=1" name="编程类">
    <book url="book.aspx?id=2" name="C语言程序设计"></book>
    <book url="book.aspx?id=3" name="Java从入门到精通"></book>
    <book url="book.aspx?id=4" name="Asp.Net入门经典"></book>
</type>
<type url="type.aspx?id=2" name="网络类">
    <book url="book.aspx?id=5" name="网络基础"></book>
    <book url="book.aspx?id=6" name="TCP/IP协议"></book>
</type>
<type url="type.aspx?id=3" name="动画类">
    <book url="book.aspx?id=7" name="PhotoShop创意设计"></book>
    <book url="book.aspx?id=8" name="3D Max景观设计"></book>
    <book url="book.aspx?id=9" name="Maya影视动画初步"></book>
</type>
</root>
从上面的文件内容能看出XML与SiteMap文件的差异。
2、把XMLDataSource控件放入页面，并指定要访问的XML文件
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/work.xml"></asp:XmlDataSource>
3、把导航控件放入页面，并进行绑定设置
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1">
    <DataBindings>
        <asp:TreeNodeBinding DataMember="root" NavigateUrlField="url" TextField="name" />
        <asp:TreeNodeBinding DataMember="type" NavigateUrlField="url" TextField="name" />
        <asp:TreeNodeBinding DataMember="book" NavigateUrlField="url" TextField="name" />
    </DataBindings>
</asp:TreeView>

如此就可以实现导航控件对自定义XML文件的访问了

三、用树形控件实现对数据库数据的加载
这里我没有找到SiteMapDataSource控件访问SQLServer数据库的简便方法，只好用SQLDataSource与导航控件搭配使用，实现对数据库中数据的加载。
有知道如何使用SiteMapDataSource控件访问数据库中表的朋友希望能够赐教。
这里用到的知识点是“递归”
1、创建数据表
create table computer
(
    ids varchar(10) primary key,
    name varchar(50),
    parent varchar(10)
)
go
insert into computer(ids,name) values('p001','计算机配件')
insert into computer(ids,name,parent) values('p002','处理器','p001')
insert into computer(ids,name,parent) values('p003','主板','p001')
insert into computer(ids,name,parent) values('p004','硬盘','p001')
insert into computer(ids,name,parent) values('p005','Intel处理器','p002')
insert into computer(ids,name,parent) values('p006','AMD处理器','p002')
insert into computer(ids,name,parent) values('p007','华硕主板','p003')
insert into computer(ids,name,parent) values('p008','联想主板','p003')
insert into computer(ids,name,parent) values('p009','希捷硬盘','p004')
insert into computer(ids,name,parent) values('p010','迈拓硬盘','p004')
insert into computer(ids,name,parent) values('p011','Intel酷睿系列','p005')
insert into computer(ids,name,parent) values('p012','Intel奔腾系列','p005')
insert into computer(ids,name,parent) values('p013','希捷80G','p009')
insert into computer(ids,name,parent) values('p014','希捷160G','p009')
select * from computer
2、将SQLDataSource控件放入页面
<asp:SqlDataSource ID="sd" runat="server" ConnectionString="<%$ConnectionStrings:conn1 %>"></asp:SqlDataSource>
3、将树形控件放入页面
<asp:TreeView ID="TreeView1" runat="server"></asp:TreeView>
4、编写程序加载数据表中的数据
private void select(TreeNodeCollection nodes, DataView dv)
    {
        if (dv.Count <= 0)
            return;
        for (int i = 0; i < dv.Count; i++)
        {
            TreeNode tn = new TreeNode(dv[i]["name"].ToString());
            nodes.Add(tn);
            sd.SelectCommand = "select * from computer where parent='" + dv[i]["ids"].ToString() + "'";
            DataView d = ((DataView)sd.Select(DataSourceSelectArguments.Empty));
            select(tn.ChildNodes, d);
           
        }
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            sd.SelectCommand = "select * from computer where parent is null";
            sd.DataSourceMode = SqlDataSourceMode.DataSet;
            sd.Select(DataSourceSelectArguments.Empty);
            DataView dv = ((DataView)sd.Select(DataSourceSelectArguments.Empty));
            select(TreeView1.Nodes, dv);
        }
    }
    此方法麻烦一些，而且递归代码对初学者不太好理解。
   

    四、使用SiteMapDataSource对任意名称的sitemap文件进行访问
    有的时候我们的导航地图文件不只一个web.sitemap，或者名称不一定叫web.sitemap，那如何实现SiteMapDataSource 控件对地图文件的访问呢？
    1、创建sitemap文件并命名为custom.sitemap
    <?xml version="1.0" encoding="utf-8" ?>
    <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
        <siteMapNode url="page.aspx?id=0" title="华育国际" description="">
            <siteMapNode url="page.aspx?id=1" title="天安门校区" description="" />
            <siteMapNode url="page.aspx?id=2" title="中关村校区" description="" />
          <siteMapNode url="page.aspx?id=3" title="济南校区" description="" >
            <siteMapNode url="page.aspx?id=4" title="校长室"></siteMapNode>
            <siteMapNode url="page.aspx?id=5" title="教学部"></siteMapNode>
            <siteMapNode url="page.aspx?id=6" title="就业部"></siteMapNode>
          </siteMapNode>
            <siteMapNode url="page.aspx?id=" title="青岛校区" description="" />
        </siteMapNode>
    </siteMap>
    2、在配置文件中进行如下配置  
    <system.web>

    <siteMap defaultProvider="custom" enabled ="true">
      <providers>
        <add name="custom" siteMapFile="custom.sitemap" type="System.Web.XmlSiteMapProvider"></add>
      </providers>
    </siteMap>
   
    3、将SiteMapDataSource 控件放入页面
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
   
    4、将导航控件放入页面，并设置DataSourceId
     <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"></asp:TreeView>