本文通过实现一个服务端控件来讲解一下控件开发，该控件的功能如下：
1.显示服务端时间，并不停更新
2.通过手动点击刷新按钮以AJAX获取服务端最新时间
3.能拖动
4.能记住在页面上的位置，页面回传后位置不变
5.能配置一个定时时间，一到这个时间，自动回传触发用户自定义的事件，
首先新建一个类库项目HampWebControl，再新建一个类叫TipTime1，继承WebControl类。如果不是从已有控件中继承，一般就继承WebControl类，它是所有ASP.NET服务端控件的基类。
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="" src="/uploadfile/201301/6/8A185215813.png" />
我们编译这个项目，再新建一个网站项目，引用HampWebControl项目，新建页面，在工具箱中拖一个TipTime1控件到页面上。
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="" src="/uploadfile/201301/6/0E185220821.png" />
我们运行该页面，就会发现HTML代码如下：
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="" src="/uploadfile/201301/6/22185220705.png" />
就是说默认是呈现成一个span标签，可以通过重载WebControl基类的TagKey属性来改变。
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="" src="/uploadfile/201301/6/DA185220498.png" />
这样呈现在页面上就是个DIV。 HtmlTextWriterTag是个枚举，包含了很多HTML标签。
WebControl基类的Render用来呈现内容，重载它便可以往页面上呈现任何自定义的标签。
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="" src="/uploadfile/201301/6/5D185221199.png" />
这样在页面上就显示了一个a标签，如下图所示：
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="" src="/uploadfile/201301/6/3C185224867.png" />
注意看，这时a标签是在DIV外面，如何将它放到DIV里面呢？这就要重载WebControl基类的RenderContents方法
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="" src="/uploadfile/201301/6/B2185225921.png" />
这样这个a标签就在div里面了，如下图所示：
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="" src="/uploadfile/201301/6/AE185225958.png" />
接下来为最外围的DIV加一些样式，重载基类的AddAttributesToRender方法
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="" src="/uploadfile/201301/6/0F185225575.png" />
这里有两种写法，利用HtmlTextWriterStyle枚举或者直接写CSS属性名。
到这里大家了解了自定义控件如何呈现在页面上。我们再新建一个类TipTime2，把依旧重载TagKey为DIV，然后重载RenderContents，显示一个span标签与一个input标签。
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="" src="/uploadfile/201301/6/17185225539.png" />
这样页面上显示了当前服务端的时间与一个按钮，如图所示：
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="" src="/uploadfile/201301/6/00185225543.png" />
接下来我们来让用户可以配置按钮上的文字，为类TipTime2增加一个Text属性：
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="" src="/uploadfile/201301/6/3B185225164.png" />
同时将呈现按钮的代码改成：
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="" src="/uploadfile/201301/6/6D185230974.png" />
这样Text属性便出现在设计视图的属性窗
