ASP.NET学习系列（五）开始控件之旅之TextBox及其Ajax扩展控件

      TextBox既可以用于用户输入，也可以用于只读文本显示。TextBox可以通过TextMode属性设置成单行、多行输入或者充当密码输入框，隐藏输入文本。TextMode接受三个输入值：
SingleLine：显示单行输入；
MultiLine：显示多行输入，会让包含的文本自动换行；
Password：屏蔽文本的单行输入框。
当容纳的文本超出控件长度时，文本开始处会滚动到该框的左边。

看一个简单示例：

代码

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " TextBoxDemo1.aspx.cs "  Inherits = " TextBoxDemo1 "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title ></ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
         < asp:TextBox  ID ="TextBox1"  TextMode ="SingleLine"  
        runat ="server" ></ asp:TextBox >
         < br  />
         < asp:TextBox  ID ="TextBox2"  TextMode ="MultiLine"
            runat ="server" ></ asp:TextBox >
         < br  />
         < asp:TextBox  ID ="TextBox3"   TextMode ="Password"  
            runat ="server" ></ asp:TextBox >
         < br  />     
         < asp:TextBox  ID ="TextBox4"   TextMode ="SingleLine"  
        Text ="there is a so long long long string!"
        runat ="server" ></ asp:TextBox >
     </ div >
     </ form >
</ body >
</ html >

 

 运行效果：

TextBox有一些属性可以控制自身的显示特征和行为。
AutoPostBack：确定在TextBox上的内容变化时，是否立即回发。
AutoCompleteType:用于关联TextBox控件和AutoComplete类。
Columns：指定显示的列数。
MaxLength：指定允许输入字符数的最大值，默认值为0，表示不强制限定最大值。
ReadOnly：指定是否为只读状态。
Rows：多行文本中限制的行数，默认值为0，表示不限制最大值。
TabIndex：用于指定TextBox控件的Tab顺序。
Focus:把初始表单焦点定位到此TextBox控件上。
Wrap：在TextMode设置为MultiLine时，指示是否自动换行。
ValidationGroup：指定验证组。
TextChanged：在TextBox控件内容变化时在服务器端引发

再来一个充分说明问题的示例：

 

代码

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " TextBoxDemo2.aspx.cs "  Inherits = " TextBoxDemo2 "   %>

<% @ Register assembly = " AjaxControlToolkit "  namespace = " AjaxControlToolkit "  tagprefix = " cc1 "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title ></ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
         < asp:Label  ID ="Label1"  runat ="server"  AssociatedControlID ="TextBox1"  
        Text ="Your Name:" ></ asp:Label >
        
         < asp:TextBox  AutoPostBack ="true"    AutoCompleteType ="LastName"
        ID ="TextBox1"  runat ="server"  ontextchanged ="TextBox1_TextChanged"   ></ asp:TextBox >
         < br  />
         < asp:Label  ID ="Label2"  runat ="server"  Text ="Your Name:" ></ asp:Label >
         < br  />
         < asp:TextBox  ID ="TextBox2"  TextMode ="MultiLine"  Wrap ="true"
         runat ="server" ></ asp:TextBox >
     </ div >
     </ form >
</ body >
</ html >

 

 效果图：

TextBox的Ajax扩展程序
TextBox虽然可以满足一般的输入要求，但很难满足现在网页的特殊需要。比如，一个需要输入日期的输入框，用户则样

确定需要的输入格式。Ajax控件工具包提供了一些TextBox的扩展程序控件，满足了多数的特殊需求，使网页设计更加得

心应手，丰富多彩。下面看一下它们都有哪些独到之处。
    1、Autocomplete:它可以根据已经添加到TextBox控件的文本，为TextBox提供一个可能值的显示列表。该列表是通过查询后台的Web服务来生成。
    2、Calendar：在TextBox获得焦点时，弹出一个标准的Calendar控件。
属性：
Animated：值为True时，日历以动画方式弹出；为FALSE时，日历直接显示。默认为false。
CssClass：指定日历显示的CSS样式。
FirstDayOfWeek:指定日历中显示的每周的第一天以星期几显示。
Format：文本框中日期的显示格式。
PopupButtonID：必须点击此ID指定的按钮才能显示日历。
    3、FilteredTextBox：允许你指定一个可能添加到文本框的字符列表，不在列表中的字符不允许显示在该TextBox中。
属性：

TargetControlID - 需要具有“过滤”功能的 TextBox控件ID
FilterType - 被约束的方式，包括： Numbers, LowercaseLetters,UppercaseLetters, 和 Custom； 可以采用逗号(,)

进行组合。 如果指定了 Custom，那么 ValidChars 属性将被用于指定有效的字符。
FilterMode - 采用的约束模式，可以是 ValidChars (默认) 或者 InvalidChars。如果被设置为 InvalidChars，那么

FilterType 必须被设置为Custom；如果被设ValidChars，那么 FilterType 必须包含 Custom。
ValidChars - 一个用字符串表示的有效字符集合，如果没有在 FilterType 设置了Custom，那么该设置将会被忽略。
InvalidChars - 一个用字符串表示的非法字符集合，如果没有在 FilterType 设置了Custom ，那么该设置将会被忽略。
FilterInterval - 一个用整数标示的产生“过滤”时间间隔，用毫秒表示，默认为250（毫秒）。
    4、MaskedEditExtender：指定了一个要添加到文本框中的字符串格式。
属性：
TargetControlID：需要进行格式设定的TextBox控件。
       Mask：TextBox控件中的格式。
       OnFocusCssClass：当TextBox得到焦点时使用的css样式。
       OnValidCssClass：当TextBox中输入无效字符时使用的css样式。
       MessageValidatorTip：当TextBox进行信息输入时是否有提示。值为True，则有提示；值为False，则没有提示。
       MaskType：TextBox中输入的字符进行验证的类型。有Date,Number,Time。
    5、NumericUpDown：该控件向TextBox的一侧添加了“up”和“down”两个按钮，用于增加或减少输入框中数字的大小。
属性：
       TargetControlID：该控件的目标作用控件。
       Width：该控件加上目标TextBox控件的宽度，要是不设定将看不到TextBox控件。
       RefValues：该控件中使用的一个字符串列，用于在TextBox中递增递减。
       ServiceUpPath：调用增加值的web方法时的路径。
       ServiceDownPath：调用减少值的web方法时的路径。
       ServiceUpMethod：调用增加值的web方法。
       ServiceDownMethod：调用减少值的web方法。
       TargetButtonUpID：自定义的增加值的控件按钮。
       TargetButtonDownID：自定义的减少值的控件按钮。

    6、PasswordStrength：对控件输入密码的情况提供反馈信息，用户可以知道输入的密码的安全强度。
属性：
DisplayPosition：提示的信息的位置。
StrengthIndicatorType：强度信息提示方式，有文本和进度条StrengthIndicatorType="Text|BarIndicator"
PreferredPasswordLength：密码的长度
PrefixText：用文本方式时开头的文字，PrefixText="Strength:"
TextCssClass： 用文本方时文字的CSS样式。
MinimumNumericCharacters： 密码中最少要包含的数字数量
MinimumSymbolCharacters： 密码中最好要包含的符号数量（*，#）
RequiresUpperAndLowerCaseCharacters：是否需要区分大小写
TextStrengthDescriptions： 文本方式时的文字提示信息，TextStrengthDescriptions="弱;中;强"
BarIndicatorCssClass：进度条的CSS样式
BarBorderCssClass： 进度条边框的CSS样式
HelpStatusLabelID： 帮助提示信息的Lable控件ID
        
    7、PopupControl：允许你把其他控件或控件组关联到一个文本框上，让文本框输入的值输入更简单。
    8、Slider：它定义了一个TextBox控件允许设定的数值范围，然后会有一个运行用户拖动的滑块图，用户拖动到的值

会替换掉文本框中的值。
属性：
BoundControlID： 绑定的控件(TextBox或其他)
Decimals： 小数的位数
EnalbeHandleAnimation： 是否允许以动画表示用户拖动
HandleCssClass： Slider 拖动点的 Css 样式
HandleImageUrl： 以图片表示 Slider 拖动点的图片路径指向 
Lenth： 滑动条的长度
Maximum： 最大限度
Minimum： 最小限度
Orientation： 设置方位
RailCssClass： Slider 控件轨迹的 Css 样式 
RaiseChangeOnlyOnMouseUp： 如果设置为 True 只有当拖动的结束的时候，也就是鼠标按键被放开的时候才触发页面其

值变换事件。
Steps： 步长

    9、TextBoxWatermark：用于在控件中显示提示文本信息，该信息在用户没有输入时是可见的。一旦用户点击，水印

马上就会消失。
属性：
TargetControlID： 需要“水印”化的 TextBox 控件 ID
WatermarkText： 当 TextBox 呈现“水印”形式的时候，显示的提示信息
WatermarkCssClass： 当 TextBox 呈现“水印”形式的时候，采用的 Css 表现样式
最后，看一个囊括所有扩展控件的例子：

 

 

代码

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " TextBoxWithAjax.aspx.cs "  Inherits = " TextBoxWithAjax "   %>

<% @ Register assembly = " AjaxControlToolkit "  namespace = " AjaxControlToolkit "  tagprefix = " cc1 "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
< style  type ="text/css" > @import url(StyleSheet.css); </ style >
     < title ></ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
     < asp:ScriptManager  ID ="ScriptManager1"  runat ="server"   />
         < asp:TextBox  ID ="TextBox1"  runat ="server" ></ asp:TextBox >
         < cc1:CalendarExtender  ID ="TextBox1_CalendarExtender"  runat ="server"  
            Enabled ="True"  TargetControlID ="TextBox1" >
         </ cc1:CalendarExtender >
         < br  />
         < asp:TextBox  ID ="TextBox2"  runat ="server" ></ asp:TextBox >
         < cc1:FilteredTextBoxExtender  ID ="TextBox2_FilteredTextBoxExtender"  
            runat ="server"  Enabled ="True"  TargetControlID ="TextBox2"  
            FilterType ="Custom, Numbers"
                ValidChars ="+-=/*()."   >
         </ cc1:FilteredTextBoxExtender >
         < br  />
         < asp:TextBox  ID ="TextBox3"  runat ="server" ></ asp:TextBox >
         < cc1:MaskedEditExtender  ID ="TextBox3_MaskedEditExtender"  runat ="server"  
              ErrorTooltipEnabled ="true"   Enabled ="True"  Mask ="99/99/9999"  MaskType ="DateTime"
            TargetControlID ="TextBox3" >
         </ cc1:MaskedEditExtender >
         < br  />
         < asp:TextBox  ID ="TextBox4"  runat ="server" ></ asp:TextBox >
         < cc1:NumericUpDownExtender  ID ="TextBox4_NumericUpDownExtender"  runat ="server"  
            Enabled ="True"  Maximum ="100"  
            Minimum ="10"   
             Step ="10"  
            TargetControlID ="TextBox4"  Width ="150" >
         </ cc1:NumericUpDownExtender >
         < br  />
         < asp:TextBox  ID ="TextBox5"  runat ="server" ></ asp:TextBox >
         < cc1:PasswordStrength  ID ="TextBox5_PasswordStrength"  runat ="server"  
         DisplayPosition ="RightSide"  StrengthIndicatorType ="Text"
         MinimumNumericCharacters ="3"  TextStrengthDescriptions ="弱;中;强"   
         PreferredPasswordLength ="8"
            Enabled ="True"  TargetControlID ="TextBox5" >
         </ cc1:PasswordStrength >
         < br  />
         < asp:TextBox  ID ="SliderBound"  runat ="server"  Width ="100"   />
         < asp:TextBox  ID ="TextBox6"  runat ="server" ></ asp:TextBox >
         < cc1:SliderExtender  ID ="TextBox6_SliderExtender"  runat ="server"  Enabled ="True"  
            Maximum ="100"  Minimum ="0"  Steps ="11"  TargetControlID ="TextBox6"   Length ="100"
             BoundControlID ="SliderBound"
              >
         </ cc1:SliderExtender >
         < br  />
         < asp:TextBox  ID ="TextBox7"  runat ="server" ></ asp:TextBox >
         < cc1:TextBoxWatermarkExtender  ID ="TextBox7_TextBoxWatermarkExtender"  
            runat ="server"  Enabled ="True"  TargetControlID ="TextBox7"
            WatermarkText ="please input anything."  WatermarkCssClass ="watermark"   >
         </ cc1:TextBoxWatermarkExtender >
         < br  />
         < br  />
         < br  />
        
     </ div >
     </ form >
</ body >
</ html >

 

 

最有成就感的效果图： 

   

 

 

转载于:https://www.cnblogs.com/yangqk/archive/2010/03/09/1682081.html