ASP.NET控件开发学习笔记--第3回 自制导航控件

 

第3回 自制导航控件

做了这么些Hello Wrold，已经出现审美疲劳，下面来点新鲜的东西，制作一个相对较综合的控件。比如我们制作网站时有一组链接需要放在一起，很多时候我们使用静态网页直接把这些链接呈现在浏览器内，这个方法并不好，能不能把链接名称和URL放在数据库内，自动生成一个模块容纳这些链接呢？当然，如果使用数据库的话，各位的机子上可能没有安装数据库，所以这里使用了XML来存储这些链接，以方便大家运行这个程序。另外，紧跟潮流，使内容和显示分离，我们使用CSS定制外观。虽然使用到了其他技术，但效果感觉还是不错的，下面就来制作这个控件。

首先建立XML文件存储链接，在虚拟目录下新建一个“linksList.xml”，输入代码如下：

例3-1代码1：linksList.xml代码

 

<? xml version="1.0" encoding="utf-8"  ?>
< MyLinks >
     < link >
         < name > 我的博客 </ name >
         < url > http://cgbluesky.blog.163.com/ </ url >
     </ link >
     < link >
         < name > 北京大学出版社第六事业部 </ name >
         < url > http://www.pup6.com/ebook.htm </ url >
     </ link >
     < link >
         < name > 网易学院 </ name >
         < url > http://tech.163.com/school/video/ </ url >
     </ link >
     < link >
         < name > eNet硅谷动力网络学院 </ name >
         < url > http://tech.163.com/school/video/ </ url >
     </ link >
     < link >
         < name > 细品人生 </ name >
         < url > http://blog.sina.com.cn/chanamy </ url >
     </ link >
</ MyLinks >

 

这里存储了一个link表，表有两个字段，第一个字段是name，表示链接名，第二个字段是url，表示链接地址。接下来制作控件，在App_Code文件夹下新建一个“linksList.cs”文件，输入代码如下：

例3-1代码2：linksList.cs代码

using  System;
using  System.Web.UI;
using  System.Data;
using  System.Data.OleDb;
[assembly:TagPrefix( " MyControl " ,  " CG " )]
namespace  MyControl
{
     public   class  LinksControl:Control
    {
         protected   override   void  Render(HtmlTextWriter writer)
        {
            writer.WriteLine( " <ul> " );
            writer.WriteLine( " <li id='caption'>我的导航控件</li> " );
             string  s;
            DataSet ds = new  DataSet();
            ds.ReadXml(Page.Server.MapPath( " linksList.xml " ));
             foreach (DataRow row  in  ds.Tables[ " link " ].Rows)
            {
                s = " <li><a href=' " ;
                s += row[ " url " ].ToString();
                s += " 'target='_blank'> " ;
                s += row[ " name " ].ToString();
                s += " </a></li> " ;
                writer.WriteLine(s);
            }
            writer.WriteLine( " </ul> " );
        }
    }
}

 

从这段代码可以看出，我们使用无序列表来显示这些链接，列表的第一项为导航条名称。这里使用DataSet来读取XML，使用非常方便。DataSet控件真是强悍，不但能装下整个数据库，还能如此方便地控制XML。这个控件所输出的列表素面朝天，并不是能让人满意，下面使用一个CSS来装饰它。在虚拟目录下新建一个“linkslist.css”文件，在其中输入如下代码：

例3-1代码3：linkslist.css代码

ul
{
    list-style-type : none ;
    margin : 5px ;
    padding : 2px ;
    border : 1px solid #DDDDDD ;
    width : 200px ;
    font : 12px 宋体,sans-serif ;
}
li
{
    background :  #DDDDDD ;
    margin : 0 ;
    border : 1px solid #fff ;
}
#caption
{
    color : #FFF ;
    background :  #663333 ;
    padding : 2px 10px ;
    font : bold ;
}
ul a:link, ul a:visited, ul a:hover, ul a:active
{
    color : #333 ;
    display : block ;
    padding : 2px 10px ;
    text-decoration : none ;
}
ul a:hover
{
    color : #FFF ;
    background : #666 ;
}

 

好！所有准备工作都做完了，下面调用控件来看看效果如何。在虚拟目录下新建一个“linkslist.aspx”文件，并输入如下代码：

例3-1代码4：linkslist.aspx代码

<% @Register TagPrefix = " CG "  Namespace = " MyControl "   %>
< html >
     < head >
         < title > Chapter 5: Background Images </ title >
         < link  rel ='Stylesheet'  media ="screen"  type ='text/css'  href ='linkslist.css'  />
     </ head >
     < body >
         < div  id ="container" >
         < CG:LinksControl  runat ="server"   />
         </ div >
     </ body >
</ html >

 

在浏览器中运行linkslist.aspx文件，效果如图3-1所示。很棒吧！

 

经过CSS的修饰，列表中的项看上去很象按钮，鼠标放上去时会自动改变颜色。为了演示使用这个控件好好处，我们更改XML文件，在里面多加一个链接：

例3-2代码1：linksList.xml代码

<? xml version="1.0" encoding="utf-8"  ?>
< MyLinks >
     < link >
         < name > 我的博客 </ name >
         < url > http://cgbluesky.blog.163.com/ </ url >
     </ link >
     < link >
         < name > 浪曦视频在线 </ name >
         < url > http://bbs.langsin.com/ </ url >
     </ link >
     < link >
         < name > 北京大学出版社第六事业部 </ name >
         < url > http://www.pup6.com/ebook.htm </ url >
     </ link >
     < link >
         < name > 网易学院 </ name >
         < url > http://tech.163.com/school/video/ </ url >
     </ link >
     < link >
         < name > eNet硅谷动力网络学院 </ name >
         < url > http://tech.163.com/school/video/ </ url >
     </ link >
     < link >
         < name > eNet细品人生 </ name >
         < url > http://blog.sina.com.cn/chanamy </ url >
     </ link >
</ MyLinks >

 

然后更改样式，修改linkslist.css代码如下：

例3-2代码2：linkslist.css代码

ul
{
    list-style-type : none ;
    margin : 5px ;
    padding : 1px ;
    border : 1px solid #333 ;
    width : 200px ;
    font : 12px 宋体,sans-serif ;
}
li
{
    background :  #ABD1BD ;
    margin : 0 ;
    border-left : 1px solid #fff ;
    border-top : 1px solid #fff ;
    border-right : 1px solid #aaa ;
    border-bottom : 1px solid #666 ;
}
#caption
{
    color : #FFF ;
    background :  #557A66 ;
    padding : 2px 10px ;
    font : bold ;
}
ul a:link, ul a:visited, ul a:hover, ul a:active
{
    color : #000 ;
    display : block ;
    padding : 2px 10px ;
    text-decoration : none ;
}
ul a:hover
{
    color : #FFF ;
    background : #147E46 ;
}

 

再次运行linkslist.aspx，效果如图3-2所示：

 

这一次，不但自动增加了一个链接，而且，控件的外观也改变了。但它还有一些缺点，比如导航条的标题栏内容不能定制，所读取的XML文件也不能定制，该如何解决呢？请听下回分解。