User Id :    Password :      New Member   Forgot Password  
AJAX Text Box Watermark Extender
Description This article shows how to use two new AJAX Controls, TextBoxWatermarkExtender and ValidatorCalloutExtender in ASP.NET 3.5.   No. of Views     5153
  Rating     0
Author Rahul Saxena   Posted On     09 Aug 2011
Tags ASP.NET,Ajax,.NET Frameworks,Ajax Control    

Sample Code   Download Code

In this article, I am going to show two AJAX Control - TextBoxWatermarkExtender and ValidatorCalloutExtender. We use error validation control, now by using AJAX we can use these controls in a very attractive way.

Here are the brief descriptions of these two controls.


This Ajax control attached to Textbox control to get WaterMark behavior. When a Textbox control is empty it display Watermark text.To attach TextBoxWatermarkExtender to TextBox, set TargetControlId of TextBoxWatermarkExtender to particular TextBox. Here, I set TargetControlID of twFirstname to txtFirstname and set WatermarkText for txtFirstname.


This Ajax control enhances the functionality of existing ASP.NET validators. To use this control, add an input field and a validator control as you normally would. Then add the ValidatorCallout and set its TargetControlID property to reference the validator control.

The following code of ASP.NET page shows how to use both of these controls.

<asp:ScriptManager ID="ScriptManager1" runat="server">



            <table cellpadding="0" cellspacing="0" width="50%" align="center">




                            <table cellspacing="3" width="50%" align="center" style="margin: 0px 5px 0px 5px;">


                                    <td align="center" style="font-weight: bold;">

                                        <asp:TextBox ID="txtFirstname" runat="server" />

                                        <asp:RequiredFieldValidator ID="rfvFirstname" runat="server" ErrorMessage="Enter Your First Name"

                                            ControlToValidate="txtFirstname" Display="None" ValidationGroup="vgCheck" />

                                        <ajaxToolkit:TextBoxWatermarkExtender ID="twFname" runat="server" TargetControlID="txtFirstname"

                                            WatermarkText="Enter Your First Name" />

                                        <ajaxToolkit:ValidatorCalloutExtender ID="vcFname" runat="server" TargetControlID="rfvFirstname" />

                                        <br />

                                        <asp:Button ID="btnSubmit" runat="server" Text="Submit" ValidationGroup="vgCheck" />










When I run the application, you will see output like following:



If I click on Submit button without entering name in text box then error message will show in a attractive way. We can design this more by using CSS class.



About Author

About Author Rahul shows great interests in working with Microsoft technologies. He specializes in the implementation of DataBase & Graphics. His area of expertise includes: C#, ASP.NET,ADO.NET,Windows Forms & Web Services. He hails from background , Master's in Computer Application. With programming he loves photography, traveling and reading books. Rahul Saxena
No Photo
Country India
Company N/A
Home Page N/A

Rate this article

Rating options from poor, fair, good, very good to excelent.  


Write your comment here.
Verification Code