第3回 自制导航控件
做了这么些Hello Wrold，已经出现审美疲劳，下面来点新鲜的东西，制作一个相对较综合的控件。比如我们制作网站时有一组链接需要放在一起，很多时候我们使用静态网页直接把这些链接呈现在浏览器内，这个方法并不好，能不能把链接名称和URL放在数据库内，自动生成一个模块容纳这些链接呢？当然，如果使用数据库的话，各位的机子上可能没有安装数据库，所以这里使用了XML来存储这些链接，以方便大家运行这个程序。另外，紧跟潮流，使内容和显示分离，我们使用CSS定制外观。虽然使用到了其他技术，但效果感觉还是不错的，下面就来制作这个控件。
首先建立XML文件存储链接，在虚拟目录下新建一个“linksList.xml”，输入代码如下：
例3-1代码1：linksList.xml代码
<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.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代码
{
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代码
<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代码
<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代码
{
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文件也不能定制，该如何解决呢？请听下回分解。