AJAX ControlToolkit学习日志-TextBoxWatermarkExtender(28)

         TextBoxWatermarkExtender用于对TextBox添加水印效果。

下面请看一个示例：

1)在VS2005中新建一个ASP.NET AJAX-Enabeld Web Project项目工程，命名为TextBoxWatermarkExtender1。

2)在Default.aspx中添加两个TextBox，分别用于输入FirstName 和LastName。然后对每个TextBox添加一个TextBoxWatermarkExtender控件，用于添加水印效果。

代码如下：

1        FirstName:  
2        <asp:TextBox ID="txtFirstName" runat="server" CssClass="unwatermarked"></asp:TextBox>&nbsp;
3        <cc1:textboxwatermarkextender id="TextBoxWatermarkExtender1" runat="server" targetcontrolid="txtFirstName" WatermarkCssClass="watermarked" WatermarkText="please input the first name"></cc1:textboxwatermarkextender>
4        <br />
5        LastName: &nbsp;
6        <asp:TextBox ID="txtLastName" runat="server" CssClass="unwatermarked"></asp:TextBox>
7        <cc1:textboxwatermarkextender id="TextBoxWatermarkExtender2" runat="server" targetcontrolid="txtLastName" WatermarkCssClass="watermarked" WatermarkText="please input the last name"></cc1:textboxwatermarkextender>
8        <br />

属性说明：

         TargetControlID：该控件的目标关联控件。
         WatermarkCssClass：产生水印效果的css样式。
         WatermarkText：有水印效果时，水印上的文本。
         
3)要看到水印效果的关键的css样式。

代码如下：

1        .watermarked {}{
2            height:20px;
3            width:150px;
4            padding:2px 0 0 2px;
5            border:1px solid #BEBEBE;
6            background-color:#F0F8FF;
7            color:gray;
8        }    

4)在页面上添加一个UpdatePanel控件，在该控件中添加一个Button和Label，用于显示用户的输入。

代码如下：

1        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
2            <ContentTemplate>
3                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="提交" />
4                <br />
5                <br />
6                <asp:Label ID="message" runat="server"></asp:Label>
7            </ContentTemplate>
8        </asp:UpdatePanel>

Button按钮的处理代码：

            this.message.Text = "欢迎你：" + this.txtFirstName.Text + " " + this.txtLastName.Text;

5)按下CTRL+F5,在浏览器里查看效果。

效果图如下：