• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

用Asp.net制作顶部导航控件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 在开发.Net网站时,灵活运用“用户自定义控件”常常能给我们减少许多重复性的工作。今天就给大家介绍我最近刚写的一个顶部导航控件,效果如下:

详细出处参考:http://www.itqun.net/content-detail/42257.html

一、效果简介
  当点击一级栏目时(如首页),被点击的一级栏目的单元格背景色发生变色,如果该一级栏目下有二级栏目,则会在下一行显示出来,否则二级栏目这一行不会显示任何东西,但会占一定的高度。当点击二级栏目时,其所属的一级栏目单元格背景色发生变化,同时被点击的二级栏目名称会加粗,并在前方加一个“。”号,表示现在正在访问该栏目。当前位置会随着栏目的变化而变化。为了让该控件更灵活,我用了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.添加用户自定义控件及后台代码

在开发.Net网站时,灵活运用“用户自定义控件”常常能给我们减少许多重复性的工作。今天就给大家介绍我最近刚写的一个顶部导航控件,效果如下:程序运行效果图  源文件下载:点击这里下载(70KB, Winzip压缩文件) 一、效果简介  当点击一级栏目时(如首页),被点击的一级栏目的单元格背景色发生变色,如果该一级栏目下有二级栏目,则会在下一行显示出来,否则二级栏目这一行不会显示任何东西,但会占一定的高度。当点击二级栏目时,其所属的一级栏目单元格背景色发生变化,同时被点击的二级栏目名称会加粗,并在前方加一个“。”号,表示现在正在访问该栏目。当前位置会随着栏目的变化而变化。为了让该控件更灵活,我用了xml,这样就可以和数据库脱离开来,目前该用户控件只能适应一个页面一个链接这种类型的网站,如果有“article.aspx?id=”这种形式的链接,则该控件不可用。二、思路分析  用Request.Url.AbsolutePath.ToString()可以获得当前访问的地址,比如当前访问地址为:http://localhost/temp/default.aspx,该方法即可获得temp/default.aspx这一段,然后用LastIndexOf(@"/")方法把访问的文件名截出来,这里就是指default.aspx这部份。有了访问文件,就可以查出这个文件对应的那条记录,根据该记录判断它是一级栏目还是二级栏目,即可知道当前点击的是一级栏目还是二级栏目。然后显示相应的一级栏目和二级栏目即可实现上图的效果。下面来具体分析实现代码。三、实现过程  1.xml文件代码   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。 //创建DataSet对象private DataSet ds = new DataSet();   然后定义读取xml中的数据的方法,该方法传入xml文件的相对路径,查询的条件以及排列方式,返回DataView。 public DataView ReadXmlDataView(string strXmlPath,string strWhere,string strSort) { DataSet ds = new DataSet(); //读入xml的架构 ds.ReadXmlSchema(Server.MapPath(strXmlPath)); //将OrderID列转成整型(原本为字符串,影响排序),如果你排序不用OrderID,请将这里的OrderID改成别的名称,同时xml文件里的OrderID也要改名 ds.Tables[0].Columns["OrderID"].DataType = System.Type.GetType("System.Int32"); //读取xml文件 ds.ReadXml(Server.MapPath(strXmlPath)); DataView dv = new DataView(); //指定DataView的Table为DataSet的Table dv.Table = ds.Tables[0]; //指定DataView中的数据的排序方式 dv.Sort = strSort; //指定DataView过滤数据条件,也就是进行筛选 dv.RowFilter = strWhere; //返回DataView return dv; }   现在已经可以读出栏目数据了,接下来要写五个方法来显示栏目,分别为:  方法1:显示所有一级栏目  该方法是点击“首页”时或者是第一次打开网页的时候调用的,实现的效果为加粗“首页”两字,并改变“首页”所在的单元格的背景。该方法命名为:showFirstMenu(),代码如下: public void showFirstMenu() { //读取所有Parents为root的记录(也就是所有一级栏目),升序排列,下同 DataView dv = ReadXmlDataView("HeadMenu.xml","Parents = 'root'","OrderID asc"); //保存从xml中读取出来的栏目的链接地址 string strLinkUrl; //保存读出来的栏目名称 string strTitle; //判断是否有一级栏目 if(dv.Count >

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

  接下来要在Head.ascx.cs中编码,由于源码较长,这里我就拿关键部份进行解释。

  先在成员中创建一个DataSet对象,代码中好多地方要用到这个DataSet。

//创建DataSet对象
private DataSet ds = new DataSet();

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

         public DataView ReadXmlDataView(string strXmlPath,string strWhere,string strSort)
         {
              DataSet ds = new DataSet();
              //读入xml的架构
              ds.ReadXmlSchema(Server.MapPath(strXmlPath));
              //将OrderID列转成整型(原本为字符串,影响排序),如果你排序不用OrderID,请将这里的OrderID改成别的名称,同时xml文件里的OrderID也要改名
              ds.Tables[0].Columns["OrderID"].DataType = System.Type.GetType("System.Int32");
              //读取xml文件
              ds.ReadXml(Server.MapPath(strXmlPath));  
                      DataView dv = new DataView();
              //指定DataView的Table为DataSet的Table
              dv.Table = ds.Tables[0];
              //指定DataView中的数据的排序方式
              dv.Sort = strSort;
              //指定DataView过滤数据条件,也就是进行筛选

dv.RowFilter = strWhere;
              //返回DataView
          return dv;
          }
  现在已经可以读出栏目数据了,接下来要写五个方法来显示栏目,分别为:

  方法1:显示所有一级栏目

  该方法是点击“首页”时或者是第一次打开网页的时候调用的,实现的效果为加粗“首页”两字,并改变“首页”所在的单元格的背景。该方法命名为:showFirstMenu(),代码如下:

public void showFirstMenu()
         {
                            //读取所有Parents为root的记录(也就是所有一级栏目),升序排列,下同
              DataView dv = ReadXmlDataView("HeadMenu.xml","Parents = 'root'","OrderID asc");
              //保存从xml中读取出来的栏目的链接地址
              string strLinkUrl;
              //保存读出来的栏目名称
              string strTitle;
              //判断是否有一级栏目
              if(dv.Count > 0)
              {

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap