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

现在的位置: 首页 > 综合 > 正文

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

2013年10月24日 ⁄ 综合 ⁄ 共 11558字 ⁄ 字号小中大 ⁄ 评论关闭

一、效果简介

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

//创建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>";

【上篇】java语法
【下篇】突然发现，已经好久没更新blog了…

作者: minima

该日志由 minima 于11年前发表在综合分类下，最后更新于 2013年10月24日.
转载请注明: 用Asp.net制作顶部导航控件 | 学步园 +复制链接

抱歉!评论已关闭.

学步园