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:
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.
