ASP.NET组件编程step by step

事先声明：本文只适合对组件编程感兴趣的初、中级程序员，如果您对组件编程很牛X了，您可以略过此地。欢迎各位指导并发表意见和建议。

事情的起因（纯粹为了增强文章的趣味性）

我对电影一向不感冒，最近网上、电视上《十面埋伏》的广告和评论扑天盖地，加上张艺谋在中央电视台还搞了个晚会，专门宣传该影片，不免也蠢蠢欲动起来。我没有去电影院看电影的习惯，所以如果网上有就到网上看了。恰巧一日QQ聊天时，一个群里的会员发了个链接，说是可以下载《十面埋伏》，我试了一下，果然，速度还不错，有70多K的速度，100多M的东东很快就下完了（是不是我特别容易满足？）。可是效果不太好，颜色基本上没有了，像过去的黑白电影，还不清晰，不过免费的东西就这样了，将就一下啦。

看了十几分钟，终于看不下去了，都是打打杀杀，三个主要人物都出场了，没有帅哥也没有美女，看得我头晕眼花直打盹。为了防止见周公，鼠标在我手里不安份起来，我用的播放器是为了看这个电影刚下载的realplay10的，这可是头一次见，以前都用8.0的，界面没新版的好看（虽然我并不觉得好看，笨笨的），所以想看看有些什么功能，最后，我打开了下面的界面：

咦，我一看那个蓝色的背景挺有趣的啊，“名称”标签和文件框组合成一个复合控件，背景颜色还可以变化，有点创意，效果也不错，那我也做一个啊，哈哈，有时候一个想法就是这样无意中产生的。

基础知识

在ASP.net中做一个复合控件不是很难了，但是如果是刚刚接触的话，可能还是需要指点一下方向，所以不妨在这里啰嗦一下，高手们莫怪。

Javascript：当今最流行的客户端脚本语言，如果要做出特效来他最有能耐。

CSS：级联样式表，用于设置元素的样式。

DHTML：动态HTML，和浏览器交互会用到。

System.Web.UI.WebControls.WebControl：在ASP.NET中自定义控件的基类，我们可能会重写他的一些方法，常用的有：

CreateChildControls（）：给予控件创建内定子控件的机会，预设情况OnPreRender（）方法会调用此方法要求该控件创建其子控件，别一种情况则是由FindControl（）方法调用。

OnPreRender()：触发PreRender事件，在绘制控件之前发生。

Render()：绘制控件。

AddAttributesToRender()：向标签中添加HTML样式或属性。

另外，还有一个方法：EnsureChildControls（），该方法用于确定服务器控控件是否包含子控件，如果不包含，则创建子控件，在设计阶段起作用。

其他的慢慢去看啦，这几个是我们的例子中会用到的。

最终效果

先看看效果，这样心中才有明确的目标。

没有任何鼠标动作鼠标移到控件上鼠标移出后还原

怎么样？效果挺炫吧？（我在自夸呢）

跟我一步一步来

现在，请听我的指令：喜欢这个效果的站左边，不喜欢这个效果或者极为不屑的站右边。好了，右边的朋友请关闭您的浏览器继续您喜欢的网上之旅，左边的朋友请跟我来：

1、我们先完成效果部分，也就是编写javascript脚本。我的方法是写一个HTML文件，试验脚本的正确性：

<HTML>

<HEAD>

var OldColor;

function mouseover(ctrl,color)

{

OldColor = ctrl.style.backgroundColor;

ctrl.style.color = "#ffffff";

ctrl.style.backgroundColor = color;

}

function mouseout(ctrl)

{

ctrl.style.backgroundColor = OldColor;

ctrl.style.color = "#000000";

}

</script>

</HEAD>

<BODY>

<tr >

</tr>

</table>

</BODY>

</HTML>

新建一个文本文件，将这段代码复制过去，然后将文件的扩展名改为.html，用IE打开，是不是看到了想要的效果？

2、前期工作准备完成了，接下来打开VS.NET IDE，新建一个项目，选择Visual C#项目（别问我要VB.net的代码，我不会），在右边列表中选择“WEB控件库”，输入项目名称：LabelTextBox。

3、把自动生成的代码删除，只留下一个类的框架，像下面这样（命名空间自定）：

using System;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.ComponentModel;

using System.Drawing;

namespace LzhTextBpx

{

public class LabelTextbox : System.Web.UI.WebControls.WebControl

{

}

4、上面看到的效果其实是一个一行两列的表格，我们把表格的border属性设成0，所以看不出来了，其中左边单元格放标签，右边单元格放文本框，所以，我们要用代码生成这个表格。用到的类有：

a) Table：表示表格

b) TableRow：表示表格行

c) TableCell：表示表格中的单元格

注意：一个表格可以有多个表格行，一个表格行中可以放置多个单元格

生成代码如下：

//定义一个表对象

Table t = new Table();

//添加一行

TableRow tr = new TableRow();

//添加两个单元格

TableCell tc1 = new TableCell();

TableCell tc2 = new TableCell();

//将控件添加到Controls集中.

tc1.Controls.Add(label);

tc2.Controls.Add(textBox);

tr.Controls.Add(tc1);

tr.Controls.Add(tc2);

t.Controls.Add(tr);

this.Controls.Add(t);

我们还要响应表格的鼠标移入移出事件，背景色的变化就是在这里触发的，下面的代码完成此事：

//添加鼠标事件

t.Attributes.Add("onmouseover","mouseover(this,'" + "#" + R + G + B + "')");

t.Attributes.Add("onmouseout","mouseout(this)");

Attributes表示表格的属性集，Add()方法用于添加一个新的属性。

顺便把表格中的字体也设置一下：

//添加样式,用来控制字体

t.Style.Add("font-size","10pt");

看到上面的R、G、B三个变量了吗？这三个变量是某种颜色的十六进制的字符串表示。使用如下的方法对颜色进行分解：

//以下将颜色值转化成十六进制表示

string R,G,B;

R = (Convert.ToInt32(this._backgroundColor.R)).ToString("X");

G = (Convert.ToInt32(this._backgroundColor.G)).ToString("X");

B = (Convert.ToInt32(this._backgroundColor.B)).ToString("X");

其中_backgroundColor是自定义属性。

这一步的全部代码如下：

private void CreateControls()//创建控件以及设置控件的相关属性

{

//以下将颜色值转化成十六进制表示

string R,G,B;

R = (Convert.ToInt32(this._backgroundColor.R)).ToString("X");

G = (Convert.ToInt32(this._backgroundColor.G)).ToString("X");

B = (Convert.ToInt32(this._backgroundColor.B)).ToString("X");

//定义一个表对象

Table t = new Table();

//添加鼠标事件

t.Attributes.Add("onmouseover","ltmouseover(this,'" + "#" + R + G + B + "')");

t.Attributes.Add("onmouseout","ltmouseout(this)");

//添加样式,用来控制字体

t.Style.Add("font-size","10pt");

//添加一行

TableRow tr = new TableRow();

//添加两个单元格

TableCell tc1 = new TableCell();

TableCell tc2 = new TableCell();

//将控件添加到Controls集中.

tc1.Controls.Add(label);

tc2.Controls.Add(textBox);

tr.Controls.Add(tc1);

tr.Controls.Add(tc2);

t.Controls.Add(tr);

this.Controls.Add(t);

}

5、本控件向外提供了三个属性，backgroundColor 表示鼠标移入控件的背景颜色，labelString 为标签内文本，textString 为文本框内容。定义如下：

private Label label = new Label();//创建一个标签

private TextBox textBox = new TextBox();//创建一个文本框

private Color _backgroundColor;//鼠标移入的背景颜色

public Color backgroundColor

{

get

{

if(_backgroundColor == Color.Empty)

return Color.Blue;

return _backgroundColor;

}

set

{

_backgroundColor = value;

}

public string labelString

{

get

{

return label.Text;

}

set

{

label.Text = value;

}

public string textString

{

get

{

return textBox.Text;

}

set

{

textBox.Text = value;

}

6、这一步需要重写 CreateChildControls() 方法，该方法会自动被调用，用来生成子控件。

protected override void CreateChildControls()

{

this.EnsureChildControls();//如果子控件没有创建,则创建

base.CreateChildControls ();//调用方法

CreateControls();

}

7、将第一步的脚本存到一个常量中：

private const string MOUSE_SCRIPT = //用来触发鼠标事件的脚本

"<script language=javascript>\n" +

"var OldColor;\n" +

"function ltmouseover(ctrl,color)\n" + //当鼠标移入时,调用该方法,ctrl为表格,color为要改变的颜色值

"{\n" +

"OldColor = ctrl.style.backgroundColor;\n" + //记录下原来的文档背景颜色

"ctrl.style.color = '#ffffff';\n" +//将字体颜色改为白色

"ctrl.style.backgroundColor = color;\n" + //更改表格背景颜色

"}\n" +

"function ltmouseout(ctrl)\n" + //鼠标移出时调用 ,参数同上

"{\n" +

"ctrl.style.backgroundColor = OldColor;\n" + //还原背景颜色

"ctrl.style.color = '#000000';" + //将字体颜色还原成黑色

"}\n" +

"</script>\n";

重写OnPreRender()方法将该脚本输出到浏览器，考虑到同一页面可能会有多个该控件的情况，此时并不需要每个控件都生成一段脚本，而是所有控件共享这段脚本，所以，我们要用Page.IsClientScriptBlockRegistered（）判断该脚本是否已经输出，如果输出，就不需要再次输出了。

protected override void OnPreRender(EventArgs e)

{

//将脚本输出到页面中.

if(!Page.IsClientScriptBlockRegistered("mousescript")) //防止重复输出.

{

Page.RegisterClientScriptBlock("mousescript",MOUSE_SCRIPT);

}

base.OnPreRender (e);

}

控件的使用

使用控件显然比创建控件简单得多，下面讲一下该控件的使用方法（适合初学者）：

将该项目编译后，会生成一个叫LabelTextbox.dll的程序集。

1、创建一个测试项目，打开工具箱，点击右键，选择“添加/移除项”，如下图：

2、弹出“自定义工具箱”，选择“.net FramWork组件”选项卡，点击“浏览”，在LabelTextBox工程目录下找到“LabelTextbox.dll”程序集，如图：

3、确定后，在工具箱中出现该控件的图标，如下图：

4、直接将该控件拖到WEB窗体就能使用了。

本程序调试环境：Windows2000 Server、MS.NET2003。