详解ASP.NET自定义控件开发实例

本文通过实现一个服务端控件来讲解一下控件开发，该控件的功能如下：

1.显示服务端时间，并不停更新

2.通过手动点击刷新按钮以AJAX获取服务端时间

3.能拖动

4.能记住在页面上的位置，页面回传后位置不变

5.能配置一个定时时间，一到这个时间，自动回传触发用户自定义的事件，

首先新建一个类库项目HampWebControl，再新建一个类叫TipTime1，继承WebControl类。如果不是从已有控件中继承，一般就继承WebControl类，它是所有ASP.NET服务端控件的基类。

我们编译这个项目，再新建一个网站项目，引用HampWebControl项目，新建页面，在工具箱中拖一个TipTime1控件到页面上。

我们运行该页面，就会发现HTML代码如下：

就是说默认是呈现成一个span标签，可以通过重载WebControl基类的TagKey属性来改变。

这样呈现在页面上就是个DIV。 HtmlTextWriterTag是个枚举，包含了很多HTML标签。

WebControl基类的Render用来呈现内容，重载它便可以往页面上呈现任何自定义的标签。

这样在页面上就显示了一个a标签，如下图所示：

注意看，这时a标签是在DIV外面，如何将它放到DIV里面呢？这就要重载WebControl基类的RenderContents方法

这样这个a标签就在div里面了，如下图所示：

接下来为最外围的DIV加一些样式，重载基类的AddAttributesToRender方法

这里有两种写法，利用HtmlTextWriterStyle枚举或者直接写CSS属性名。

到这里大家了解了自定义控件如何呈现在页面上。我们再新建一个类TipTime2，把依旧重载TagKey为DIV，然后重载RenderContents，显示一个span标签与一个input标签。

这样页面上显示了当前服务端的时间与一个按钮，如图所示：

接下来我们来让用户可以配置按钮上的文字，为类TipTime2增加一个Text属性：

同时将呈现按钮的代码改成：

这样Text属性便出现在设计视图的属性窗口。

修改Text的值，页面上按钮上的文本也跟着变了。注意Text属性是存储在ViewState中，这样保证了回发后值不会丢失。

现在的问题是时间不会变，我们得用javascript来改变它的值。新建一个JS文件TipTime2.js。

这里先要说明的是，项目中已有一个JS文件__WebControlBase.js，里面是一些公用的JS方法，比如绑定事件、获取控件坐标等，所有的方法都是

该方法的扩展方法：var HampWebControl=function(){ }

//停止事件冒泡 HampWebControl.prototype.StopBubble = function(e) { if (e && e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble = true; } }

这样可以减少全局变量，尽可能避免与其它js代码的变量重名。我将每个控件作为HampWebControl方法的一个扩展方法存在，同时每个控件对

应一个数组，用以存储页面上所有该控件的js对象。每个控件对应一个Refresh方法，用以重新绑定事件，这是为了解决回传后的问题。

现在控件呈现成HTML的结构是<div><span/><input/></div>，有3个标签，我们需要用3个变量来分别存储它们的DOM对象，方便以后操作。