如何使用ASP实现动态导航栏控件？

ASP.NET导航栏控件

效果简介

当点击一级栏目时，被点击的一级栏目的单元格背景色发生变色，如果该一级栏目下有二级栏目，则会在下一行显示出来；否则二级栏目这一行不会显示任何东西，但会占一定的高度，当点击二级栏目时，其所属的一级栏目单元格背景色发生变化，同时被点击的二级栏目名称会加粗，并在前方加一个“。”号，表示现在正在访问该栏目，当前位置会随着栏目的变化而变化，为了让该控件更灵活，使用了XML文件，这样就可以和数据库脱离开来，目前该用户控件只能适应一个页面一个链接这种类型的网站，如果有“article.aspx?id=”这种形式的链接，则该控件不可用。

思路分析

用Request.Url.AbsolutePath.ToString()可以获得当前访问的地址，比如当前访问地址为：http://localhost/temp/default.aspx，该方法即可获得temp/default.aspx这一段，然后用LastIndexOf(@"/")方法把访问的文件名截出来，这里就是指default.aspx这部份，有了访问文件，就可以查出这个文件对应的那条记录，根据该记录判断它是一级栏目还是二级栏目，即可知道当前点击的是一级栏目还是二级栏目，然后显示相应的一级栏目和二级栏目即可实现上图的效果。

实现过程

1、xml文件代码

<?xml version="1.0" encoding="gb2312" ?>
<siteMap>
  <siteMapNode LinkUrl="default.aspx" Title="首页" Parents="root" OrderID="1" />
  <siteMapNode LinkUrl="soft.aspx" Title="软件应用" Parents="root" OrderID="2" />
  <siteMapNode LinkUrl="hardsoft.aspx" Title="硬件相关" Parents="root" OrderID="5" />
  <siteMapNode LinkUrl="system.aspx" Title="操作系统" Parents="root" OrderID="9" />
  <siteMapNode LinkUrl="duomeiti.aspx" Title="多媒体类" Parents="root" OrderID="10" />
  <siteMapNode LinkUrl="qq.aspx" Title="QQ专区" Parents="root" OrderID="11" />
  <siteMapNode LinkUrl="security.aspx" Title="网络安全" Parents="root" OrderID="12" />
  <siteMapNode LinkUrl="other.aspx" Title="其它分类" Parents="root" OrderID="13" />
  <siteMapNode LinkUrl="soft.aspx" Title="软件技巧" Parents="软件应用" OrderID="3" />
  <siteMapNode LinkUrl="softuse.aspx" Title="软件使用" Parents="软件应用" OrderID="4"></siteMapNode>
  <siteMapNode LinkUrl="hardsoft1.aspx" Title="硬件保养" Parents="硬件相关" OrderID="6"></siteMapNode>
  <siteMapNode LinkUrl="hardsoft2.aspx" Title="硬件维护" Parents="硬件相关" OrderID="7"></siteMapNode>
  <siteMapNode LinkUrl="hardsoft_other.aspx" Title="硬件其它" Parents="硬件相关" OrderID="8"></siteMapNode>
</siteMap>

Title指的是栏目名称，LinkUrl指的是链接地址，Parents指的是上级栏目，OrderID指排序ID。

2、添加用户自定义控件及后台代码

通过“新建->项目->Visual C#项目->Asp.net Web应用程序”新建一个项目命令为HeadControl，新建用户自定义控件，命名为Head.ascx，向Head.ascx页面加入两个label控件，上面的命名为lblCode，用来显示后台生成的一级栏目和二级栏目的代码，下面的命名为lblPosition，用来显示当前位置这一部份，如果没有在CSS中定义页面的上下左右距离，则需要手动设置Head.ascx页面四边的距离，要保证控件宽度在Head.ascx里为100%，也就是说，这个用户控件不能有固定宽度，否则就不能适应各种宽度网页的需要。

接下来要在Head.ascx.cs中编码，由于源码较长，这里就拿关键部份进行解释，先在成员中创建一个DataSet对象,代码中好多地方要用到这个DataSet。

然后定义读取xml中的数据的方法，该方法传入xml文件的相对路径，查询的条件以及排列方式，返回DataView。

现在已经可以读出栏目数据了，接下来要写五个方法来显示栏目，分别为：

方法1：显示所有一级栏目，该方法是点击“首页”时或者是第一次打开网页的时候调用的，实现的效果为加粗“首页”两字，并改变“首页”所在的单元格背景色。

方法2：显示某一一级栏目下的二级栏目，当点击某一一级栏目时，调用此方法，此方法首先判断该一级栏目是否有子栏目（即二级栏目），若有，则显示这些二级栏目；若没有，则不显示任何内容，在显示二级栏目时，将所属的一级栏目单元格背景色设置为与点击“首页”时不同的颜色，以区分当前点击的是哪一个一级栏目。

方法3：显示某一二级栏目的内容，当点击某一二级栏目时，调用此方法，此方法将所属的一级栏目单元格背景色再次改变为另一种颜色（与前两种颜色均不同），同时将被点击的二级栏目名称加粗，并在前方加上一个“。”号，表示现在正在访问该二级栏目，并且更新lblPosition标签的内容，显示当前的位置信息。

方法4：隐藏非当前栏目的二级栏目，当点击某一二级栏目时，除了将所属的一级栏目和该二级栏目设置为显示状态外，还需要将其他一级栏目下的二级栏目隐藏起来，这样可以避免用户看到不属于当前栏目的二级栏目，造成混淆。

方法5：更新当前位置信息，无论点击一级栏目还是二级栏目，都需要调用此方法来更新lblPosition标签的内容，使其始终显示当前的位置信息。

相关问题与解答

问题一：如何修改控件的样式？

解答：可以通过CSS来修改控件的样式，在Head.ascx文件中添加一个link标签，引入外部的CSS文件，然后在CSS文件中定义相应的样式规则，可以设置菜单的背景颜色、字体颜色、边框样式等，对于具体的控件元素，可以使用特定的CSS选择器来进行样式设置，如对于Menu控件中的菜单项，可以使用“asp:MenuItem”选择器来设置菜单项的样式。

问题二：如果要实现点击栏目时跳转到指定的页面而不是根据xml中的链接地址跳转，应该怎么做？

解答：可以在Menu控件或TreeView控件的菜单项或节点的Click事件中编写代码来实现跳转，在Menu控件的MenuItemClick事件中，可以根据点击的菜单项的Text属性或其他标识属性来确定要跳转的页面，然后使用Response.Redirect方法跳转到指定的页面，同样，在TreeView控件的NodeClick事件中也可以采用类似的方法来实现跳转。

以上内容就是解答有关“asp导航栏控件”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。