分享
 
 
 

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

王朝asp·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

在一个.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上调试运行。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有