用ASP.NET创建自定义文本框

在一个.net的应用程序中使用自己创建的控件可以大大增强应用程序的功能，你可以在原有控件的基础上加入想要的属性和行为，甚至创建自定义的控件。在asp.net中，我们更可以往一些控件中增加一些客户端的javascript功能，减少每次在提交页面时将数据返回给服务器的次数 ，从而提高程序的功能和效率。在这篇文章中，我们将看下，如何用asp.net创建一个自定义的文本框控件，当焦点在该文本框控件上及离开控件时，文本框控件的背景颜色会随之改变。这个控件将包含如下的功能：
　　1) 当用户在文本框输入数据时，文本框的背景颜色以预先设定的颜色显示，当用户的输入焦点离开文本框时，能恢复原来文本框的背景颜色。

　　2）可以在vs.net的设计期间，改变该自定义控件的各项属性。

　　下面我们开始一步步创建该控件。首先，创建一个空的vs.net解决方案，增加一个asp.net工程(命名为webapplication)和一个web控件库工程（命名为controlib）。将asp.net工程中的webform1.aspx重新命名为container.aspx;将web控件库工程中的webcustomercontrol1.cs重新命名为pimpedouttextbox.cs。


　　接着，往pimpedouttextbox类中添加代码。因为这是个web控件库，vs.net已经引入相关的类库。由于我们这个应用将会用到颜色方面的功能，所以引入绘图类。

using system.drawing;
　　再用如下的代码替换原来预定义的代码。

line 1: [assembly: tagprefix ( "controllib" , "lib" )]
line 2: namespace controllib
line 3: {
line 4: [defaultproperty( "backcoloron" ),
line 5: toolboxdata( "<{0}:pimpedouttextbox runat=server></{0}:pimpedouttextbox>" )]
line 6: public class pimpedouttextbox : system.web.ui.webcontrols.textbox
line 7: {
　　在一开始，增加了assembly属性，其目的是，当在vs.net中拖拉该控件时，vs.net会自动添加tagprefix的控件标记。在pimedouttexbox类中，增加了几个属性：defaultproperty和toolboxdata.defaultproperty中的属性backcoloron的含义是，当把该控件从vs.net的工具箱拖拉到设计器时，该控件中被默认选定的属性。toolboxdata属性是和[assembly:tagprefix]属性相关，用来表明该控件是如何从html视图中产生的。这些属性将在下文详细讲解。

　　最后，在第6行，注意 public class pimpedouttextbox : system.web.ui.webcontrols.textbox 一句，其中表明这个控件是比原来的文本框控件增加了新的行为。总的来说，我们创建的这个控件依然是一个文本框控件，只不过是继承了原有文本框控件的属性和行为，并且有自己的新的属性而已。



　　下一步，将给pimedouttextbox控件新增两个属性。其中，我们设想,当用户在文本框中输入或者文本框获得焦点时，文本框的颜色有变化，所以命名新的属性backcoloron；当控件失去焦点时，文本框的颜色命名为backcoloroff。

line 1: private color _coloff;
line 2: [category( "appearance" ), description( "the background color when the control loses focus" )]
line 3: public color backcoloroff
line 4: {
line 5: get{return _coloff;}
line 6: set{_coloff = value
line 7: }
line 8: private color _colon;
line 9: [category( "appearance" ), description( "the background color when the control has the focus" )]
line 10: public color backcoloron
line 11: {
line 12: get{return _colon; }
line 13: set{_colon = value;}
line 14: }
　　上面的代码，是典型的对属性的赋值和存取的语句了，相信大家都很熟悉了。要提及一点的是，第2行和第9行的category和descriptiton属性，是该控件的属性窗口中，对backcoloron和backcoloroff两个属性的一个描述。注意，我们使用了color类，这样比较方便，可以用vs.net自带的颜色选择器，而不用输入颜色的十六进制值。

　　接着，下面是比较重要的部分。在这个新的控件， 我们将用重载一个addattributestorender()的方法输出新的内容到浏览器中。其中，将加入对客户端的onfocus和onblur事件的响应。另外，要注意的是，当在vs.net创建该控件时，会自动调用该方法，所以我们可以在设计期间对其中的属性进行设置。

line 1: protected override void addattributestorender( htmltextwriter writer )
line 2: {
line 3: base.addattributestorender( writer );
line 4: //only add the client-side javascript for design mode or ie
line 5: if( indesignmode() || system.web.httpcontext.current.request.browser.type.indexof( "ie" ) > -1 )
line 6: {
line 7: writer.addattribute( "onfocus", "javascript:this.style.backgroundcolor='" + colortranslator.tohtml( _colon ) + "';" );
line 8: if( _coloff.equals( color.empty ) )
line 9: {
line 10: _coloff = this.backcolor;
line 11: }
line 12: writer.addattribute( "onblur", "javascript:this.style.backgroundcolor='" + colortranslator.tohtml( coloff ) + "';" );
line 13: }
line 14: }
　　其中第3行的目的是，调用基类，继承原有的文本框的属性。addattributestorender的方法使用htmltextwriter流作为参数。在第9，第12行，分别通过调用html文本流的addattribute方法增加其客户端的输出。其中传入了两个参数，第一个参数是html的属性，第二个是属性对应的值。它们经过浏览器输出后，变为<input type="text" onblur="javascript...">的形式。

　　因为浏览器使用的是十六进制的颜色，所以我们采用colortranslator类去将.net的颜色类型转换为浏览器中能识别的颜色类型（第7和第12行）。在第8行，先检查_coloroff属性是否没被赋值，如果没赋值，则backcoloroff的颜色设置为原来文本框的背景色。

　　而在第5行，我们检查浏览器的类型是否支持onfocus和onblur事件，并且由于想在vs.net的设计时就能对控件的属性进行改变，所以增加了一个判断的函数indesignmode:

line 1: private bool indesignmode()
line 2: {
line 3: bool blnout = false;
line 4: if( object.referenceequals( system.web.httpcontext.current, null ) )
line 5: {
line 6: blnout = true;
line 7: }
line 8: else
line 9: {
line 10: blnout = false;
line 11: }
line 12: return blnout;
line 13: }
　　在上面代码的第4行，通过判断如果httpcontext实例是否为null,如果为null的话，则证明当前是处于vs.net的设计模式下，没响应http请求。接下来，我们测试一下所做的控件。


　　首先，我们编译做好的控件工程，之后，我们在asp.net的工程中，加入刚做好的控件。方法是，鼠标右键点击webapplication中的增加引用，其中选择刚才编译好的控件库目录中的dll文件即可。再在vs.net的工具箱中，同样增加新的项，选择刚做好的控件库目录中的dll,这时，你会发现在工具箱中多了刚才做的pimedouttextbox。



　　接着，从工具箱中将我们做的控件拖拉到页面中来。注意，这个时候该控件的属性页中，会自动定位在backcoloron属性中。这是因为之前我们设置了defaultproperty属性。同时注意该属性下的说明文字，这是因为设置了description属性。再切换到html视图中去，你会看到

<%@ register tagprefix="lib" namespace="controllib" assembly="controllib" %>
　　这是由于之前对

[assembly: tagprefix ( "controllib" , "lib" )]
　　的定义而产生的。

　　再切换回设计视图，将该文本框控件的颜色设置为灰色，会发现同时backcoloroff也同样设置为同样的颜色了，因为之前backcoloroff是没有被赋值的。再改变文本框的背景色，这是会发现backcoloroff的值没变化了，因为这个时候backcoloroff的值已经不是空值了（具体可以再看上文的代码）。接下来，将文本框的背景颜色设置为除白色外的任一种颜色，运行程序。结果时，当该文本框控件获得焦点时，文本框的颜色以backcoloron的颜色显示，当文本框失去焦点时，文本框的颜色以backcoloroff显示。

　　如果你想对客户端的代码进行单步跟踪，可以将debugger;加入到要调试的javascript语句中去，如

javascript:debugger;this.style.backgroundcolor='blue';
　　运行程序，则可以通过监视窗口监视相关的变量，如输入document.forms[0].all[1].name等。

　　以上只是简单介绍了asp.net中如何创建自定义的控件，相信读者会有所启发。程序可以在vs.net 2002,2003上调试运行。