彩票走势图

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

转帖|其它|编辑:郝浩|2010-09-20 10:45:06.000|阅读 639 次

概述:本文将介绍如何用Asp.net制作顶部导航控件,希望对大家有帮助。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

一、效果简介

  当点击一级栏目时(如彩票走势图),被点击的一级栏目的单元格背景色发生变色,如果该一级栏目下有二级栏目,则会在下一行显示出来,否则二级栏目这一行不会显示任何东西,但会占一定的高度。当点击二级栏目时,其所属的一级栏目单元格背景色发生变化,同时被点击的二级栏目名称会加粗,并在前方加一个号,表示现在正在访问该栏目。当前位置会随着栏目的变化而变化。为了让该控件更灵活,我用了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=&quot;
软件应用" 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
             &nbsp;       dv.Table = ds.Tables[0];
 &nbsp;         ;          //指定 DataView 中的数据的排序方式
      &nbsp;              dv.Sort = strSort;
 &nbsp;                   //指定 DataView 过滤数据条件,也就是进行筛选
 &nbsp;                   dv.RowFilter = strWhere;
       &nbsp;        &nbsp;    //返回 DataView
          &nbsp;          return dv;
    &nbsp;  &nbsp;             }

  现在已经可以读出栏目数据了,接下来要写五个方法来显示栏目,分别为:

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

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

public void showFirstMenu()
            &nbsp; {
                        &nbsp;                 //读取所有 Parentsroot 的记录(也就是所有一级栏目),升序排列,下同
   &nbsp;                 DataView dv = ReadXmlDataView("HeadMenu.xml","Parents = root","OrderID asc");
                &nbsp;    //保存从 xml 中读取出来的栏目的链接地址
                     string strLinkUrl;
 &nbsp;            &nbsp;      //保存读出来的栏目名称
           &nbsp;      &nbsp;  string strTitle;
  &nbsp;                  //判断是否有一级栏目
     &nbsp;               if(dv.Count > 0)
    &nbsp;                {
                          &nbsp; //先清空 label 的内容,防止上次生成的内容遗留下来
                            lblCode.Text = "";                           
                          &nbsp; //生成一级栏目表格-------------------------------
                      &nbsp;     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>";
                        &nbsp;   lblCode.Text += "<tr><td class=bgGray>";
                            lblCode.Text += "<table height=30  border=0 cellpadding=3 cellspacing=0>";
        &nbsp;   &nbsp;               lblCode.Text += "<tr>";
 
   &nbsp;                        //循环读出一级栏目
    &nbsp;                       for(int i=0; i < dv.Count; i++)
                            {                 ;               
        &nbsp;                  &nbsp;       strLinkUrl = dv[i]["LinkUrl"].ToString().Trim();
                                   strTitle = dv[i][";Title"].ToString().Trim();
&nbsp;                                  //如果是彩票走势图,加粗及改变其单元格背景色,如果你的彩票走势图不是 default.aspx,则修改为你的彩票走势图,xml 中也要修改
                                   if(strLinkUrl.Equals("default.aspx"))
  &nbsp;                                {
                                          lblCode.Text += "<td class=Cn12Gray>|</td>";
                 &nbsp;                        //改变彩票走势图单元格背景的颜色,该颜色用 cssbgGray1 定义。
        &nbsp;         &nbsp;                       lblCode.Text += "<td class=bgGray1>";
            ;                              //彩票走势图指定的链接
             &nbsp;                  ;          lblCode.Text += "<a href=" + strLinkUrl + " class=navPad>";
&nbsp;                               ;          //加粗彩票走势图两个字
                                          lblCode.Text += "<strong>" + strTitle + "&lt;/strong>";
                                      &nbsp;   lblCode.Text += "</a>";
                &nbsp;                         lblCode.Text += "</td>";
                       ;            }
                            &nbsp;      else
         &nbsp;                     &nbsp;   {
                                      &nbsp;   lblCode.Text += "<td class=Cn12Gray>|</td>";
                                          lblCode.Text += "<td>";
                                          lblCode.Text += "<a href=" + strLinkUrl + " class=navPad>";
                           ;               lblCode.Text += strTitle;
                           &nbsp;              lblCode.Text += "</a>";
                                      ;    lblCode.Text += "</td>";
    ;                               }
                ;            }
                            lblCode.Text += "</tr></table&gt;";
   &nbsp;                 &nbsp;      //显示二级栏目
                            lblCode.Text += "</td&gt;</tr>"; 
                     &nbsp;      //一级栏目 html 代码到这里结束--------------------------
 
         &nbsp;                  //显示二级栏目,由于访问彩票走势图时二级栏目为空,所以此行高度调小,并且无内容显示
         &nbsp;                  lblCode.Text += &quot;<tr><td height=10 class=bgGray1>";
    &nbsp;                       lblCode.Text += "</td></tr>";
   &nbsp;         ;               lblCode.Text += "</table>";
      &nbsp;                    
                   ;         //显示当前位置为彩票走势图       ;     
 
    &nbsp;                       lblPosition.Text = "";
                            lblPosition.Text += "<table width=100%  border=0 cellspacing=0 cellpadding=6><tr><td class=Cn12BlackStrong>";
   &nbsp;                        //如果在当前位置前不想要图片,把<img src=images/icon_alert.gif width=16 height=16 align=absbottom&gt;去掉就行了
                            lblPosition.Text += "<img src=images/icon_alert.gif width=16 height=16 align=absbottom>当前位置:<a href=default.aspx>彩票走势图</a>";
&nbsp;           ;                lblPosition.Text += "</td></tr></table>";
              }

方法2:重新显示一级栏目

  该方法是点击除了彩票走势图这一链接以外的一级栏目时调用的,实现的效果为重新显示一级栏目,加粗当前点击的一级栏目名称,并改变其单元格背景颜色。同时显示属于该一级栏目的二级栏目。方法命名为:showFirstMenuByFile(strNowViewFile),传入的参数为当前浏览的文件名称。代码如下:

public void showFirstMenuByFile(string strNowViewFile)
       ;     &nbsp; {
                &nbsp;    //读取所有 Parents root 的记录
                     DataView dv = ReadXmlDataView("HeadMenu.xml","Parents = root","OrderID asc");
           &nbsp;         //保存栏目的链接地址
                     string strLinkUrl;
                  &nbsp;  //保存栏目名称
 &nbsp;                   string strTitle;
 
            ;         if(dv.Count > 0)
                     {
            &nbsp;               lblCode.Text = "";
          &nbsp;                 //生成表格
                            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>";
                     &nbsp;      lblCode.Text += "<tr><td class=bgGray>";
          &nbsp;                 lblCode.Text += "<table height=30  border=0 cellpadding=3 cellspacing=0>";
&nbsp;                           lblCode.Text += "<tr>";
 
 &nbsp;                    ;      for(int i=0; i < dv.Count; i++)
        &nbsp;                   {
   ;  &nbsp;                             strLinkUrl = dv[i]["LinkUrl"].ToString().Trim();
         &nbsp;                   &nbsp;     strTitle = dv[i]["Title"].ToString().Trim();
 
                    ;               //如果读出来的栏目名称为当前访问的一级栏目的名称,加粗并改变其单元格背景色
             &nbsp;                ;     if(strLinkUrl.Equals(strNowViewFile))
           &nbsp;                 ;      {
                    &nbsp;                     lblCode.Text += "<td class=Cn12Gray>|</td>";
   &nbsp;                                      lblCode.Text += "<td class=bgGray1>";
       &nbsp;                                  lblCode.Text += "&lt;a href=" + strLinkUrl + " class=navPad>";
       &nbsp;                                  lblCode.Text += "<strong>" + strTitle + "</strong>";
 &nbsp;                                        lblCode.Text += "</a>";
                                        &nbsp; lblCode.Text += "</td>";
             &nbsp;                         ;  
                                          //改变当前位置-------------------------------------                                                          

                          &nbsp;      &nbsp;        lblPosition.Text = "";
             ;                             lblPosition.Text += "<table width=100%  border=0 cellspacing=0 cellpadding=6><tr><td class=Cn12BlackStrong>";
                         &nbsp;                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
            &nbsp;                      {
     &nbsp;                   &nbsp;                lblCode.Text += "<td class=Cn12Gray>|</td>";
   &nbsp;          ;                            lblCode.Text += "<td>";
           &nbsp;               &nbsp;              lblCode.Text += "<a href=" + strLinkUrl + " class=navPad>";
                       &nbsp;                  lblCode.Text += strTitle;
          ;                                lblCode.Text += "</a>";
                                          lblCode.Text += "</td>";
&nbsp;                                  }
                    &nbsp;       }
                            lblCode.Text += "</tr></table>";        &nbsp;   &nbsp;           
                        ;    //一级栏目 html 代码到这里结束
       &nbsp;                    lblCode.Text += "</td></tr>";
 ;                    }
              }

方法3:显示属于当前访问的一级栏目的二级栏目

  该方法只显示一级栏目下的二级栏目,并不需要实现加粗和改变单元格背景这效果。该方法命名为:showSecondMenu(strNowViewFile)。代码如下:

            &nbsp; public void showSecondMenu(string strNowViewFile)
              {             &nbsp;    
              &nbsp;      //根据传入的当前该问的文件查找当前访问的栏目名称                   
                     DataView dvNowMenu = ReadXmlDataView("HeadMenu.xml","LinkUrl = " + strNowViewFile + "","OrderID asc");         &nbsp;        
&nbsp;                    //当前访问的栏目名称
                  &nbsp;&nbsp; string strTitle = dvNowMenu[0]["Title"].ToString();
         &nbsp;        &nbsp; 
                     //读取所有属于该栏目的二级栏
                     DataView dvSecond = ReadXmlDataView("HeadMenu.xml&quot;,"Parents = " + strTitle + "","OrderID asc");                  
 
    &nbsp;                if(dvSecond.Count > 0)
                     {                     &nbsp;                 
                  ;    &nbsp;     //输出二级栏目    ;         &nbsp;
                    &nbsp;       lblCode.Text += "<tr>";
                            lblCode.Text += "<td height=30 class=bgGray1>";
 
           &nbsp;           &nbsp;    for(int i=0; i < dvSecond.Count; i++)
                        &nbsp;   {
                      &nbsp;    &nbsp;       //如果读出来的那条记录的链接地址是当前访问的文件,加粗当前访问的栏目名称并在前面加上·符号
                                   if(dvSecond[i]["LinkUrl"].ToString().Trim().Equals(strNowViewFile))
                                   {                 &nbsp;                     
    &nbsp;                                     lblCode.Text += "&nbsp;&nbsp;·<a href=" + dvSecond[i]["LinkUrl"].ToString().Trim() + ">";
                   &nbsp;         &nbsp;            lblCode.Text += "<strong>" + dvSecond[i]["Title"].ToString().Trim() + "</strong>";
                                          lblCode.Text += "</a>";
              &nbsp;                          
                                &nbsp;    //改变当前位置值,重新显示一级栏目的方法已经显示了当前的一级栏目位置,这里加上当前所在的二级栏目的位置       &nbsp;                                                          ;    
                     &nbsp;                    lblPosition.Text += " >> <a href=" + dvSecond[i]["LinkUrl"].ToString().Trim() + ">" + strTitle + "</a>";                                    
                        &nbsp;                 //到这里当前位置的表格显示已完成,刚好和重新显示一级栏目方法里的当前位置的表格代码接起来
                                          lblPosition.Text += "</span></td></tr></table>";
&nbsp;                 ;                 }
                 &nbsp;&nbsp;                else
                                   {               &nbsp;                       
                                          lblCode.Text += "&nbsp;&nbsp;<a href=" + dvSecond[i]["LinkUrl"].ToString().Trim() + ">";
                                          lblCode.Text += dvSecond[i]["Title"].ToString().Trim();
&nbsp;                                         lblCode.Text += "</a>";
                           &nbsp;       }
 ;                 &nbsp;         }
                            lblCode.Text += "</td>";;
     &nbsp;      ;                lblCode.Text += "</tr>";
       &nbsp;             &nbsp;      lblCode.Text += "</table>";           
     &nbsp;     &nbsp;         }
         &nbsp;    } 

方法4:访问二级栏目的时候重新显示一级栏目

  该方法是访问二级栏目时调用的,访问二级栏目的时候,其父级栏目需要加粗并改变单元格背景。该方法命令为:showFirstMenuBySecondFile(strNowViewFile)。由于该方法与 showFirstMenuByFile()方法大同小异,这里就不详细介绍了。具体可以查看源代码。

  方法5:访问二级栏目的时候显示二级栏目

  该方法是访问二级栏目的时候调用的,用来显示所有二级栏目,加粗当前访问的二级栏目,并改变当前位置,方法命名为:showSecondMenuByGrade(strNowViewFile)。该方法与 showSecondMenu()方法也是大同小异,所以也不详细介绍了。

  接下来只要在 Page_Load 事件中通过显示或隐藏一级栏目和二级栏目就能达到图上的效果。Page_Load 事件的代码如下:

              private void Page_Load(object sender, System.EventArgs e)
        &nbsp;     {
               &nbsp;     // 在此处放置用户代码以初始化页面
                     if(!Page.IsPostBack)
              &nbsp;      {
 ;                       &nbsp;  
                          &nbsp; //先根据地址栏的地址获取访问的文件,如:default.aspx  ;             &nbsp;         
 
               &nbsp;          &nbsp; //获得url的相对路径
                            string strRequestUrl = Request.Url.AbsolutePath.ToString().Trim();
    &nbsp;                       //获得当前访问的文件名
                    &nbsp;       string strNowViewFile = strRequestUrl.Substring((strRequestUrl.LastIndexOf(@"/") + 1)).Trim();
     &nbsp;                     
                            //根据取得的访问文件查找其对应的记录,以判断当前访问一级栏目还是二级栏目            &nbsp;     &nbsp;      
                 &nbsp;          //读取当前访问文件名对应的那条信息
         ;                   DataView dv = ReadXmlDataView("HeadMenu.xml","LinkUrl = " + strNowViewFile + "","OrderID asc");
  &nbsp;                         //当前访问栏目的上级栏目名称
                &nbsp;           string strParent = dv[0]["Parents"].ToString().Trim();
                &nbsp;        &nbsp; 
                 &nbsp;          //如果访问的是彩票走势图                      
 
           &nbsp;      &nbsp;         if(strNowViewFile.Equals("default.aspx") || strNowViewFile == null)
                  ;          {
                                   //显示所有一级栏目
                            &nbsp;      showFirstMenu();
   &nbsp;                &nbsp;       }
&nbsp;                 &nbsp; 
     ;                    &nbsp;  //如果访问的是一级栏目,并且不是彩票走势图         &nbsp;             
 
                 ;      &nbsp;    else if(strParent.Equals("root"))
                        ;&nbsp;   {                                
          &nbsp;                        //重新显示一级栏目        &nbsp;                    
                                   showFirstMenuByFile(strNowViewFile);
       &nbsp;                           //读取所有属于该一级栏目的二级栏目
   &nbsp;                               showSecondMenu(strNowViewFile);                           
                            }
     ;                      
                 &nbsp;      ;    //否则当前访问的就是二级栏目
 
                          &nbsp; else
        &nbsp;                &nbsp;  {
    ;                               //显示一级栏目,同时加粗二级栏目所属的一级栏目,并改变该一级栏目的单元格背景
                      &nbsp;            showFirstMenuBySecondFile(strNowViewFile);
                        &nbsp;          //显示二级栏目,加粗并在当前访问的二级栏目名称前加。符号
             &nbsp;              &nbsp;      showSecondMenuByGrade(strNowViewFile);
                            }
       &nbsp;           &nbsp; }
     &nbsp;        }

  以上就是顶部导航自定义控件的核心部份了,看完了后是不是觉得很简单?由于写的时候是为了应付项目的需要,因此匆匆忙忙就完工了,大家如果发现什么BUG,或是有什么好的意见可以联系我。控件的具体用法请看压缩包内的说明。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:网络转载

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP