Previous | Home | Next |
- This Control attached to an ASP.NET TextBox control to get "watermark" behavior on the web Page.
- Purpose of this control to provide more information to user.
Properties
- TargetControlID, Control ID.
- WatermarkText, The text to show when the control has no value
- WatermarkCssClass, The CSS class to apply to the TextBox.
Step 1: Drag ScriptManager Control and add a two Text Box . Click on First Text Box and click on Add Extender.

Step 2: Above process is repeat for the Second Text Box (Same as above). Add a button and Two Label on page for show the text which user enter in Text Box. Paste the Below code on button Click (Default.aspx.cs).
protected void Button1_Click(object sender, EventArgs e) { Label1.Text = "Hello!!!!" + "" +TextBox1.Text.ToString(); Label2.Text = "" + TextBox2.Text.ToString(); }
The Design Code (Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs" Inherits="_Default" %> <%@ 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>Untitled Page</title> <style type="text/css"> .style2 { width: 100%; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server" style="top: 86px; left: 10px; position: absolute; height: 22px; width:223px"></asp:TextBox> <asp:TextBox ID="TextBox2" runat="server" style="top: 138px; left: 9px; position: absolute; height: 21px; width: 225px"></asp:TextBox> <cc1:TextBoxWatermarkExtender ID="TextBox2_TextBoxWatermarkExtender" runat="server" Enabled="True" TargetControlID="TextBox2" WatermarkText="Enter Your Second Name.."> </cc1:TextBoxWatermarkExtender> <asp:Button ID="Button1" runat="server" style="top: 134px; left: 294px; position: absolute; height: 26px; width: 56px" Text="Submit" onclick="Button1_Click" /> </div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <asp:Label ID="Label1" runat="server"></asp:Label> <asp:Label ID="Label2" runat="server"></asp:Label> </form> </body> </html>
Step 3: Debug the Application. Output Will Be:

Enter text in Textbox.

Previous | Home | Next |