好贷网好贷款

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

发布时间:2016-12-4 9:52:38 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"用Asp.net制作顶部导航控件",主要涉及到用Asp.net制作顶部导航控件方面的内容,对于用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。 //创建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 += "&nbsp;&nbsp;·<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 += "&nbsp;&nbsp;<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,或是有什么好的意见可以联系我。控件的具体用法请看压缩包内的说明。

上一篇:西安
下一篇:第10章:类型检查

相关文章

相关评论