一、效果简介
当点击一级栏目时（如半岛权威十大直营(官方)网站），被点击的一级栏目的单元格背景色发生变色，如果该一级栏目下有二级栏目，则会在下一行显示出来，否则二级栏目这一行不会显示任何东西，但会占一定的高度。当点击二级栏目时，其所属的一级栏目单元格背景色发生变化，同时被点击的二级栏目名称会加粗，并在前方加一个“。”号，表示现在正在访问该栏目。当前位置会随着栏目的变化而变化。为了让该控件更灵活，我用了xml，这样就可以和数据库脱离开来，目前该用户控件只能适应一个页面一个链接这种类型的网站，如果有“article.aspx?id=”这种形式的链接，则该控件不可用。
二、思路分析
用 Request.Url.AbsolutePath.ToString() 可以获得当前访问的地址，比如当前访问地址为：//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。
//创建 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)
{
//先清空 label 的内容，防止上次生成的内容遗留下来
lblCode.Text = "";
//生成一级栏目表格-------------------------------
lblCode.Text = "<table width=100% border=0 align=center cellpadding=0 cellspacing=0 class=Cn12Black>";
lblCode.Text += "<tr><td width=100% height=3 class=bgGray></td></tr>";
lblCode.Text += "<tr><td class=bgGray>";
lblCode.Text += "<table height=30 border=0 cellpadding=3 cellspacing=0>";
lblCode.Text += "<tr>";
//循环读出一级栏目
for(int i=0; i < dv.Count; i++)
{
strLinkUrl = dv[i]["LinkUrl"].ToString().Trim();
strTitle = dv[i]["Title"].ToString().Trim();
//如果是半岛权威十大直营(官方)网站，加粗及改变其单元格背景色，如果你的半岛权威十大直营(官方)网站不是 default.aspx，则修改为你的半岛权威十大直营(官方)网站,xml 中也要修改
if(strLinkUrl.Equals("default.aspx"))
{
lblCode.Text += "<td class=Cn12Gray>|</td>";
//改变半岛权威十大直营(官方)网站单元格背景的颜色，该颜色用 css中bgGray1 定义。
lblCode.Text += "<td class=bgGray1>";
//半岛权威十大直营(官方)网站指定的链接
; lblCode.Text += "<a href=" + strLinkUrl + " class=navPad>";
; //加粗半岛权威十大直营(官方)网站两个字
; lblCode.Text += "<strong>" + strTitle + "</strong>";
lblCode.Text += "</a>";
lblCode.Text += "</td>";
; }
; else
; ; {
lblCode.Text += "<td class=Cn12Gray>|</td>";
lblCode.Text += "<td>";
lblCode.Text += "<a href=" + strLinkUrl + " class=navPad>";
; lblCode.Text += strTitle;
lblCode.Text += "</a>";
lblCode.Text += "</td>";
}
}
lblCode.Text += "</tr></table>";
//显示二级栏目
lblCode.Text += "</td></tr>";
; //一级栏目 html 代码到这里结束--------------------------
; //显示二级栏目，由于访问半岛权威十大直营(官方)网站时二级栏目为空，所以此行高度调小，并且无内容显示
lblCode.Text += "<tr><td height=10 class=bgGray1>";
; lblCode.Text += "</td></tr>";
lblCode.Text += "</table>";
//显示当前位置为半岛权威十大直营(官方)网站
lblPosition.Text = "";
lblPosition.Text += "<table width=100% ; border=0 cellspacing=0 cellpadding=6><tr><td class=Cn12BlackStrong>";
//如果在“当前位置”前不想要图片，把<img src=images/icon_alert.gif width=16 height=16 align=absbottom>去掉就行了
; lblPosition.Text += "<img src=images/icon_alert.gif width=16 height=16 align=absbottom>当前位置:<a href=default.aspx>半岛权威十大直营(官方)网站</a>";
; lblPosition.Text += "</td></tr></table>";
; }
方法2：重新显示一级栏目
该方法是点击除了“半岛权威十大直营(官方)网站”这一链接以外的一级栏目时调用的，实现的效果为重新显示一级栏目，加粗当前点击的一级栏目名称，并改变其单元格背景颜色。同时显示属于该一级栏目的二级栏目。方法命名为：showFirstMenuByFile(strNowViewFile)，传入的参数为当前浏览的文件名称。代码如下：
public void showFirstMenuByFile(string strNowViewFile)
{
//读取所有 Parents 为 root 的记录
DataView dv = ReadXmlDataView("HeadMenu.xml","Parents = root","OrderID asc");
//保存栏目的链接地址
string strLinkUrl;
//保存栏目名称
; string strTitle;
if(dv.Count > 0)
{
lblCode.Text = "";
; //生成表格
lblCode.Text = "<table width=100% border=0 align=center cellpadding=0 cellspacing=0 class=Cn12Black>";
lblCode.Text += "<tr><td width=100% height=3 class=bgGray></td></tr>";
lblCode.Text += "<tr><td class=bgGray>";
lblCode.Text += "<table height=30 border=0 cellpadding=3 cellspacing=0>";
lblCode.Text += "<tr>";
for(int i=0; i < dv.Count; i++)
{
strLinkUrl = dv[i]["LinkUrl"].ToString().Trim();
strTitle = dv[i]["Title"].ToString().Trim();
//如果读出来的栏目名称为当前访问的一级栏目的名称，加粗并改变其单元格背景色
if(strLinkUrl.Equals(strNowViewFile))
{
lblCode.Text += "<td class=Cn12Gray>|</td>";
lblCode.Text += "<td class=bgGray1>";
lblCode.Text += "<a href=" + strLinkUrl + " class=navPad>";
lblCode.Text += "<strong>" + strTitle + "</strong>";
lblCode.Text += "</a>";
lblCode.Text += "</td>";
;
//改变当前位置-------------------------------------
lblPosition.Text = "";
lblPosition.Text += "<table width=100% border=0 cellspacing=0 cellpadding=6><;tr><td class=Cn12BlackStrong>";
lblPosition.Text += "<img src=images/icon_alert.gif width=16 height=16 align=absbottom>当前位置:<a href=default.aspx>半岛权威十大直营(官方)网站</a>";
lblPosition.Text += " >> <a href=" + strLinkUrl + ">" + strTitle + "</a>";
lblPosition.Text += "</td></tr></table>";
}
; else
{
; lblCode.Text += "<td class=Cn12Gray>|</td>";
lblCode.Text += "<td>";
lblCode.Text += "<a href=" + strLinkUrl + " class=navPad>";
lblCode.Text += strTitle;
; lblCode.Text += "</a>";
lblCode.Text += "</td>";
}
; }
lblCode.Text += "</tr></table>";
; //一级栏目 html 代码到这里结束
lblCode.Text += "</td></tr>";
}
}
方法3：显示属于当前访问的一级栏目的二级栏目
该方法只显示一级栏目下的二级栏目，并不需要实现加粗和改变单元格背景这效果。该方法命名为：showSecondMenu(strNowViewFile)。代码如下：
public void showSecondMenu(string strNowViewFile)
{ ;
//根据传入的当前该问的文件查找当前访问的栏目名称 ;
DataView dvNowMenu = ReadXmlDataView("HeadMenu.xml","LinkUrl = " + strNowViewFile + "","OrderID asc");
//当前访问的栏目名称
string strTitle = dvNowMenu[0]["Title"].ToString();
;
; //读取所有属于该栏目的二级栏
DataView dvSecond = ReadXmlDataView("HeadMenu.xml","Parents = " + strTitle + "","OrderID asc");
; ; if(dvSecond.Count > 0)
; {
//输出二级栏目
lblCode.Text += "<tr>";
lblCode.Text += "<td height=30 class=bgGray1>";
for(int i=0; i < dvSecond.Count; i++)
{
//如果读出来的那条记录的链接地址是当前访问的文件，加粗当前访问的栏目名称并在前面加上·符号
if(dvSecond[i]["LinkUrl"].ToString().Trim().Equals(strNowViewFile))
{ ;
lblCode.Text += " ·<a href=" + dvSecond[i]["LinkUrl"].ToString().Trim() + ">";
lblCode.Text += "<strong>" + dvSecond[i]["Title"].ToString().Trim() + "</strong>";
lblCode.Text += "</a>";
//改变当前位置值，重新显示一级栏目的方法已经显示了当前的一级栏目位置，这里加上当前所在的二级栏目的位置 ; ;
; lblPosition.Text += " >> <a href=" + dvSecond[i]["LinkUrl"].ToString().Trim() + ">" + strTitle + "</a>";
//到这里当前位置的表格显示已完成，刚好和重新显示一级栏目方法里的当前位置的表格代码接起来
; lblPosition.Text += "</span></td></tr></table>";
}
else
{
lblCode.Text += " <a href=" + dvSecond[i]["LinkUrl"].ToString().Trim() + ">";
lblCode.Text += dvSecond[i]["Title"].ToString().Trim();
lblCode.Text += "</a>";
; }
}
lblCode.Text += "</td>";
lblCode.Text += "</tr>";
lblCode.Text += "</table>";
}
}
方法4：访问二级栏目的时候重新显示一级栏目
该方法是访问二级栏目时调用的，访问二级栏目的时候，其父级栏目需要加粗并改变单元格背景。该方法命令为：showFirstMenuBySecondFile(strNowViewFile)。由于该方法与 showFirstMenuByFile()方法大同小异，这里就不详细介绍了。具体可以查看源代码。
方法5：访问二级栏目的时候显示二级栏目
该方法是访问二级栏目的时候调用的，用来显示所有二级栏目，加粗当前访问的二级栏目，并改变当前位置，方法命名为：showSecondMenuByGrade(strNowViewFile)。该方法与 showSecondMenu()方法也是大同小异，所以也不详细介绍了。
接下来只要在 Page_Load 事件中通过显示或隐藏一级栏目和二级栏目就能达到图上的效果。Page_Load 事件的代码如下：
private void Page_Load(object sender, System.EventArgs e)
{
; // 在此处放置用户代码以初始化页面
if(!Page.IsPostBack)
{
;
//先根据地址栏的地址获取访问的文件，如：default.aspx
//获得url的相对路径
; string strRequestUrl = Request.Url.AbsolutePath.ToString().Trim();
//获得当前访问的文件名
string strNowViewFile = strRequestUrl.Substring((strRequestUrl.LastIndexOf(@"/") + 1)).Trim();
; //根据取得的访问文件查找其对应的记录，以判断当前访问一级栏目还是二级栏目
; //读取当前访问文件名对应的那条信息
; DataView dv = ReadXmlDataView("HeadMenu.xml","LinkUrl = " + strNowViewFile + "","OrderID asc");
; //当前访问栏目的上级栏目名称
; string strParent = dv[0]["Parents"].ToString().Trim();
//如果访问的是半岛权威十大直营(官方)网站
if(strNowViewFile.Equals("default.aspx") || strNowViewFile == null)
{
//显示所有一级栏目
showFirstMenu();
; }
//如果访问的是一级栏目，并且不是半岛权威十大直营(官方)网站 ;
else if(strParent.Equals("root"))
{
//重新显示一级栏目
showFirstMenuByFile(strNowViewFile);
; //读取所有属于该一级栏目的二级栏目
showSecondMenu(strNowViewFile);
}
//否则当前访问的就是二级栏目
else
; {
//显示一级栏目，同时加粗二级栏目所属的一级栏目，并改变该一级栏目的单元格背景
showFirstMenuBySecondFile(strNowViewFile);
//显示二级栏目，加粗并在当前访问的二级栏目名称前加。符号
; showSecondMenuByGrade(strNowViewFile);
}
}
}
以上就是顶部导航自定义控件的核心部份了，看完了后是不是觉得很简单？由于写的时候是为了应付项目的需要，因此匆匆忙忙就完工了，大家如果发现什么BUG，或是有什么好的意见可以联系我。控件的具体用法请看压缩包内的说明。
标签：
本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@wqylolg.cn
文章转载自：网络转载
半岛权威十大直营(官方)网站 
255次
半岛权威十大直营(官方)网站相关的文章 
微信
在线咨询
渝公网安备
50010702500608号
客服热线