当前位置导航:炫浪网>>网络学院>>网页制作>>ASP.NET教程

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

欢迎进入.NET社区论坛,与200万技术人员互动交流 >>进入  在一个.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: }

相关内容
赞助商链接