In this article I will explain a simple tutorial with an example, how to implement ASP.Net AJAX TextBoxWatermarkExtender control of the ASP.Net Ajax Control Toolkit Library using C# and VB.Net.
The ASP.Net AJAX TextBoxWatermarkExtender control is used to apply Watermark Text to TextBoxes i.e. Displaying an Informative text when the TextBox is empty and hide it when user tries to type in the Text in TextBox.
 
 
Using the ASP.Net Ajax Control ToolKit TextBoxWatermarkExtender Control
1. Register the AJAX Control Toolkit Library after adding reference to your project.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
 
2. Drag an ASP.Net AJAX ToolkitScriptManager on the page.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
 
3. Then you need to add the ASP.Net AJAX TextBoxWatermarkExtender control next to each TextBox control which you want to set the Watermark feature.
 
There are three important properties:
1. TargetControlID – ID of the TextBox to which the ASP.Net AJAX TextBoxWatermarkExtender control is associated.
2. WatermarkText – The Watermarked text to be displayed when the TextBox is empty.
3. WatermarkCssClass – The CSS class for the Watermark Text. It is used to set the color and style for the Watermark Text.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        .Watermark
        {
            color:#AAA;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <table border="0" cellpadding="0" cellspacing="2">
        <tr>
            <td>
                Name:
            </td>
            <td>
                <asp:TextBox ID="txtName" runat="server" />
                <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="txtName"
                    WatermarkText="Enter Name." WatermarkCssClass="Watermark">
                </asp:TextBoxWatermarkExtender>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
 
 
Screenshot
Ajax Control ToolKit TextBoxWatermarkExtender Tutorial with example in ASP.Net
 
 
Demo
View Demo
 
 
Downloads
Download Code