How to use Ajax TextBoxWatermarkExtender example in asp.net

IntroductionIn this article i am going to explain with example How to Use/ Apply/ Implement TextBox Watermark Extender control of Ajax on the TextBox controls in asp.net using both C# and Vb.Net language.

Ajax TextBox Watermark Extender example in asp.net
Click on image to enlarge
Description: In previous articles i explained How to use Ajax PasswordStrength indicator example in asp.net for password field and Ajax TabContainer example to create multiple tabs/panels and Ajax ModalPopupExtender example to open login form in popup window and  Ajax Accordion example to create Vertical DropDown menu in asp.net and Ajax CascadingDropDown example in asp.net to Fill DropDownList with Countries,states and cities.
On the registration form there are fields like First Name, Last Name, DOB,and Address etc. Now the trend is to skip the labels for fields and write the label text inside the text fields with the help of TextBoxWatermarkExtender control provided by the Ajax. Label text display inside Text  fields and when you click inside text box to enter something, this text disappears. So you can  also use it as a guideline instruction  for instructing what to fill in the Text Box as shown in demo image.
 
  I have also implemented the RequiredFieldValidator validation control to ensure First Name, Last Name, DOB,and Address fields are not left blank and also RegularExpression control to validate Date to be in dd/mm/yyyy format in the Date of Birth field while submitting the form.

Below is the list of applicable properties of the TextBoxWatermarkExtender that you can set as per application requirement.

  • TargetControlID - The ID of the TextBox On which watermark is to be applied.
  • WatermarkText - The text to show when the textbox control is empty.
  • WatermarkCssClass - The CSS class to apply styles to the watermark text in the TextBox.
 Let's create an application to understand.

 Implementation: In the <Head> tag of the design page (.aspx) create the styles for the TextBoxWatermarkExtender as:


<style type="text/css">
    .watermarked
{
   background-color: #F7F6F3;
   border: solid 1px #808080;
   padding: 3px;
   color:Gray;
}

.unwatermarked
{
   border: solid 1px #808080;
   padding: 3px;
   color:Gray;
}
</style>

But It is always recommended to place all the styles in the CSS ( Cascade  Style sheet) so that they can be used anywhere in the project. So to add stylesheet in the website goto website menu and click Add New item.. -> Select StyleSheet.css.
  • In the Stylesheet.css paste the following
   .watermarked
{
   background-color: #F7F6F3;
   border: solid 1px #808080;
   padding: 3px;
   color:Gray;
}

.unwatermarked
{
   border: solid 1px #808080;
   padding: 3px;
   color:Gray;
}
 and save the file.
  • Now to use this StyleSheet we have to link this stylesheet with our design page (.aspx) . So in the <Head> tag add the line <link href="StyleSheet.css" rel="stylesheet" type="text/css" />.  
  • You can also drag the Stylesheet.css from the solution explorer to the <Head> tag. It will automatically create the <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> line.
In the <Form> tag place the ScriptManager control from the AJAX Extension category of the Visual Studio toolbox. Place a Label control from the standard category. Also place TextBoxWatermarkExtender control from the AjaxControlToolkit. If you have not installed the AjaxControlToolkit then read the article How to install AjaxControlToolkit in Visual Studio.

Source Code:

<fieldset style="width:320px;">
    <legend>Ajax TextBoxWatermark example in asp.net</legend>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <table width="100%">
     <tr>
    <td>
        <asp:TextBox ID="txtFirstName" runat="server" Width="200px" CssClass="unwatermarked"></asp:TextBox>
        <asp:TextBoxWatermarkExtender ID="txtWeFirstName"
        TargetControlID="txtFirstName"
        WatermarkText="Enter First Name Here"
        WatermarkCssClass="watermarked" runat="server">
        </asp:TextBoxWatermarkExtender><br />
        <asp:RequiredFieldValidator ID="rfvFirstName" runat="server"
            ErrorMessage="First Name can't be left blank"
            ControlToValidate="txtFirstName" SetFocusOnError="true" ForeColor="Red"
            Display="Dynamic"></asp:RequiredFieldValidator>
    </td>
         </tr>
          <tr>
    <td>
        <asp:TextBox ID="txtLastName" runat="server" Width="200px" CssClass="unwatermarked"></asp:TextBox>
        <asp:TextBoxWatermarkExtender ID="txtWeLastName"
         TargetControlID="txtLastName"
          WatermarkText="Enter Last Name Here"
           WatermarkCssClass="watermarked" runat="server">
        </asp:TextBoxWatermarkExtender><br />
        <asp:RequiredFieldValidator ID="rfvlastName" runat="server"
            ErrorMessage="Last Name can't be left blank"
            ControlToValidate="txtLastName" SetFocusOnError="true" ForeColor="Red"
            Display="Dynamic"></asp:RequiredFieldValidator>
    </td>
         </tr>
         <tr>
    <td>
        <asp:TextBox ID="txtDOB" runat="server" Width="200px" CssClass="unwatermarked"></asp:TextBox>
        <asp:TextBoxWatermarkExtender ID="txtWeDOB"
         TargetControlID="txtDOB"
          WatermarkText="Enter DOB(dd/mm/yyyy) Here"
           WatermarkCssClass="watermarked" runat="server">
        </asp:TextBoxWatermarkExtender><br />
        <asp:RequiredFieldValidator ID="rfvDOB" runat="server"
            ErrorMessage="DOB can't be left blank"
            ControlToValidate="txtDOB" SetFocusOnError="true" ForeColor="Red"
            Display="Dynamic"></asp:RequiredFieldValidator>
             <asp:RegularExpressionValidator ID="rgeDOB" runat="server"
            ControlToValidate="txtDOB" ErrorMessage="Please enter DOB in dd/mm/yyyy format"
            SetFocusOnError="True"           
            ValidationExpression="^(((0[1-9]|[12]\d|3[01])/(0[13578]|1[02])/((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)/(0[13456789]|1[012])/((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])/02/((19|[2-9]\d)\d{2}))|(29/02/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$"
            Display="Dynamic" ForeColor="Red"></asp:RegularExpressionValidator>
    </td>
         </tr>
   <tr>
    <td>
        <asp:TextBox ID="txtAddress" TextMode="MultiLine" runat="server" Width="295px" CssClass="unwatermarked"
            Rows="3"></asp:TextBox>
            <asp:TextBoxWatermarkExtender ID="txtWeAddress"
             TargetControlID="txtAddress"
              WatermarkText="Enter Your Address Here"
               WatermarkCssClass="watermarked" runat="server">
        </asp:TextBoxWatermarkExtender><br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
                ErrorMessage="Address can't be left blank"
            ControlToValidate="txtAddress" SetFocusOnError="true" ForeColor="Red"
            Display="Dynamic"></asp:RequiredFieldValidator>
    </td>
   </tr>
    <tr>
   <td>
       <asp:Label ID="lblStatus" runat="server" Text="" style="color: #006600"></asp:Label></td>
   </tr>
   <tr>
   <td>
       <asp:Button ID="btnSubmit" runat="server" Text="Submit"
           onclick="btnSubmit_Click" />
       <asp:Button ID="btnReset" runat="server" Text="Reset"
           onclick="btnReset_Click" CausesValidation="false" />
       </td>
   </tr>
    </table>
    </fieldset>    


Note: Have you noticed the line <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> added automatically next to the very first line in the design page. Actually it registers the Ajax Control on placing  TextBoxWatermarkExtender control on design page.

C#.Net Code to use Ajax TextBoxWatermarkExtender example in asp.net
  • In the code behind file (.aspx.cs) write the code as: 
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            Reset_Controls();
        }
    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
lblStatus.Text = "Hello " + txtFirstName.Text + " " + txtLastName.Text + "," + " DOB is : " + txtDOB.Text  + "," + " Address is :" + txtAddress.Text;       
    }
    protected void btnReset_Click(object sender, EventArgs e)
    {
        Reset_Controls();
    }

    private void Reset_Controls()
    {
        txtFirstName.Text = string.Empty;
        txtLastName.Text = string.Empty;
        txtAddress.Text = string.Empty;      
        txtDOB.Text = string.Empty;
        lblStatus.Text = string.Empty;
    }


VB.Net Code to use Ajax TextBoxWatermarkExtender example in asp.net
  • Design the form as mentioned above in the source code. But replace the line
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
           onclick="btnSubmit_Click" /> with the line <asp:Button ID="btnSubmit" runat="server" Text="Submit" /> and also replace the line <asp:Button ID="btnReset" runat="server" Text="Reset" onclick="btnReset_Click" CausesValidation="false" /> with the line
<asp:Button ID="btnReset" runat="server" Text="Reset"  CausesValidation="false" />

  • In the code be hind file(.aspx.vb) write the code as:
   Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Reset_Controls()
        End If
    End Sub

    Protected Sub btnSubmit_Click(sender As Object, e As System.EventArgs) Handles btnSubmit.Click
        lblStatus.Text = "Hello " + txtFirstName.Text & " " + txtLastName.Text & "," & " DOB is : " + txtDOB.Text & "," & " Address is :" + txtAddress.Text
    End Sub

    Protected Sub btnReset_Click(sender As Object, e As System.EventArgs) Handles btnReset.Click
        Reset_Controls()
    End Sub

    Private Sub Reset_Controls()
        txtFirstName.Text = String.Empty
        txtLastName.Text = String.Empty
        txtAddress.Text = String.Empty
        txtDOB.Text = String.Empty
        lblStatus.Text = String.Empty
    End Sub

Now over to you:
"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..