AJAX ControlToolkit学习日志-TextBoxWatermarkExtender(28)
TextBoxWatermarkExtender用于对TextBox添加水印效果。
下面请看一个示例:
1)在VS2005中新建一个ASP.NET AJAX-Enabeld Web Project项目工程,命名为TextBoxWatermarkExtender1。
2)在Default.aspx中添加两个TextBox,分别用于输入FirstName 和LastName。然后对每个TextBox添加一个TextBoxWatermarkExtender控件,用于添加水印效果。
代码如下:
属性说明:
TargetControlID:该控件的目标关联控件。
WatermarkCssClass:产生水印效果的css样式。
WatermarkText:有水印效果时,水印上的文本。
3)要看到水印效果的关键的css样式。
代码如下:
4)在页面上添加一个UpdatePanel控件,在该控件中添加一个Button和Label,用于显示用户的输入。
代码如下:
Button按钮的处理代码:
this.message.Text = "欢迎你:" + this.txtFirstName.Text + " " + this.txtLastName.Text;
5)按下CTRL+F5,在浏览器里查看效果。
效果图如下:
下面请看一个示例:
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>
3
<cc1:textboxwatermarkextender id="TextBoxWatermarkExtender1" runat="server" targetcontrolid="txtFirstName" WatermarkCssClass="watermarked" WatermarkText="please input the first name"></cc1:textboxwatermarkextender>
4
<br />
5
LastName:
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 />
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
属性说明:
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
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Button按钮的处理代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5)按下CTRL+F5,在浏览器里查看效果。
效果图如下: