下面请看一个示例:
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 />
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 />
属性说明:
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 }
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 >
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,在浏览器里查看效果。
效果图如下: