Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

AJAX Text Box Watermark Extender

Article:
Viewed:  1508 
Posted On:  19/07/2012 22:05:05 
This article shows how to use two new AJAX Controls, TextBoxWatermarkExtender and ValidatorCalloutExtender in ASP.NET 3.5. 

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.

TextBoxWatermarkExtender

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.

ValidatorCalloutExtender

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.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%>
<!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>AJAX :: TextBoxWatermarkExtender</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <table cellpadding="0" cellspacing="0" width="50%" align="center">
                <tr>
                    <td>
                        <div>
                            <table cellspacing="3" width="50%" align="center" style="margin: 0px 5px 0px 5px;">

                                <tr>
                                    <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" />

                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

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

1.JPG

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.

2.JPG

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us