您的位置：首页 > 编程语言 > ASP

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

2008-02-25 10:06 751 查看

第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文件也不能定制，该如何解决呢？请听下回分解。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航