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

2023-06-19 16:37•php•阅读 3574

　在开发.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>

　　Title指的是栏目名称，LinkUrl指的是链接地址，Parents指的是上级栏目，OrderID指排序ID。具体用法请看压缩包内的使用说明。

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

在开发.Net网站时，灵活运用“用户自定义控件”常常能给我们减少许多重复性的工作。今天就给大家介绍我最近刚写的一个顶部导航控件，效果如下：程序运行效果图　　源文件下载：点击这里下载(70KB, Winzip压缩文件) 一、效果简介　　当点击一级栏目时（如首页），被点击的一级栏目的单元格背景色发生变色，如果该一级栏目下有二级栏目，则会在下一行显示出来，否则二级栏目这一行不会显示任何东西，但会占一定的高度。当点击二级栏目时，其所属的一级栏目单元格背景色发生变化，同时被点击的二级栏目名称会加粗，并在前方加一个“。”号，表示现在正在访问该栏目。当前位置会随着栏目的变化而变化。为了让该控件更灵活，我用了xml，这样就可以和数据库脱离开来，目前该用户控件只能适应一个页面一个链接这种类型的网站，如果有“article.aspx?http://localhost/temp/default.aspx" rel="nofollow" target="_blank">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)

{

上一篇 »ASP.NET，C#——Menu控件实现导航栏
下一篇 »用delphi制作无界面的activex控件

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

相关推荐

asp.net 自带登陆控件 权限管理-访问地址怎么-导航等 的资料？

ASP.NET MVC 之路，一---------HtmlHelper 擴展控件

ASP.NET - 锚点跳转，用于回到顶部

Bootstrap，标准顶部导航条

asp.net 中为什么在showModalDialog弹出的窗体 用html 控件 刷新不了页面。而用服务器端控件 写C#代码可以刷新页面。但是用服务器端刷新页面不好。？

“面包屑导航”——SiteMapPath控件的使用，ASP.NET

asp.net四种页面导航的比较

asp.net使用include包含文件

asp.net 自带登陆控件权限管理-访问地址怎么-导航等的资料？

asp.net 中为什么在showModalDialog弹出的窗体用html 控件刷新不了页面。而用服务器端控件写C#代码可以刷新页面。但是用服务器端刷新页面不好。？