Ajax controltoolkit Learning Log-textboxwatermarkextender (28)

Textboxwatermarkextender is used to add watermarks to textbox.

See an example below:

1) Create an ASP. NET Ajax-enabeld web project in vs2005 and name it textboxwatermarkextender1.

2) Add two textbox in default. aspx for firstname and lastname respectively. Add a textboxwatermarkextender control to each textbox to add the watermark effect.

CodeAs follows:

1 Firstname: & Nbsp;
2 < ASP: textbox ID = "Txtfirstname" Runat = "Server" Cssclass = "Unwatermarked" > </ ASP: textbox > & Nbsp;
3 < C0: textboxwatermarkextender ID = "Textboxwatermarkextender1" Runat = "Server" Targetcontrolid = "Txtfirstname" Watermarkcssclass = "Watermarked" Watermarktext = "Please input the first name" > </ C0: textboxwatermarkextender >
4 < BR />
5 Lastname: & Nbsp;
6 < ASP: textbox ID = "Txtlastname" Runat = "Server" Cssclass = "Unwatermarked" > </ ASP: textbox >
7 < C0: textboxwatermarkextender ID = "Textboxwatermarkextender2" Runat = "Server" Targetcontrolid = "Txtlastname" Watermarkcssclass = "Watermarked" Watermarktext = "Please input the last name" > </ C0: textboxwatermarkextender >
8 < BR />

Attribute description:

Targetcontrolid: The target associated control of the control.
Watermarkcssclass: The CSS style that produces the watermark effect.
Watermarktext: The text on the watermark when the watermark effect is available.

3) The key CSS style to see the watermark effect.

The Code is as follows:

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) add an updatepanel control on the page and add a button and label to the control to display user input.

The Code is as follows: 1 < ASP: updatepanel ID = "Updatepanel1" Runat = "Server" >
2 < Contenttemplate >
3 < ASP: button ID = "Button1" Runat = "Server" Onclick = "Button#click" Text = "Submit"   />
4 < BR />
5 < BR />
6 < ASP: Label ID = "Message" Runat = "Server" > </ ASP: Label >
7 </ Contenttemplate >
8 </ ASP: updatepanel >

Code for processing the button: This . Message. Text =   " Welcome: "   +   This . Txtfirstname. Text +   "   "   +   This . Txtlastname. text;

5) press Ctrl + F5 to view the effect in the browser.

As follows: