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>

最有成就感的效果图：

posted on 2010-03-09 23:20 缠中说禅阅读(1742) 评论(0) 收藏举报