Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique for interactive websites. With AJAX help we can develop web applications and retrieve a small amount of data from a web server. AJAX consists of a different type of technology.

ValidatorCallOutExtender Control

ValidatorCallout is an ASP.NET AJAX extender that enhances the functionality of existing ASP.NET validators. When we use this control add an input field and a validator control then add the ValidatorCallout and set its TargetControlID property to reference the validator control for the AJAX application.

Property

Step 1 : Open Visual Studio 2010.

dr1.gif

Step 2 : Go to Solution Explorer and right-click.

dr2.gif

Step 3 : Go to Default.aspx page and click on the [Design] option and drag the control from the Toolbox.

EnableState

Step 4 : Now go to Default.aspx page[Source] option and define the Scriptmanager property EnableState as "True".

<asp:ScriptManager ID="ScriptManager1" runat="server" EnableViewState ="true">
 </asp:ScriptManager>

ContentTemplate

Step 5 : Now drag UpdatePanel control from Toolbox and define a Trigger for the Validator control.

Trigger and ContentTemplate

<asp:UpdatePanel runat="server" ID="up1">
 <ContentTemplate>
 <asp:Label id="lblMessage" runat="server" />
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
 </Triggers>
 </asp:UpdatePanel>

 Regular Expression Validator

Step 6 : Now go to Default.aspx page; define RequireFieldValidator for the missing field.

Code :

<asp:RequiredFieldValidator runat="server" ID="Req"
 ControlToValidate="NameTextBox"
 Display="None"
 ErrorMessage="<b> Missing Field</b><br />A name is required." />

 Run Time Change Callout Validator :

Step 7 : Go to Defualt.aspx page and define the validator for the run time application.

Code :

<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="Req"
 HighlightCssClass="validatorCalloutHighlight" >
Step 8 : Now click on Default.aspx.cs file and write a code.

Code :

using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.UI;
 using System.Web.UI.WebControls;
 public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
lblMessage.Text = string.Format("Thanks {0}, we'll give you a call at {1}.", NameTextBox.Text, PhoneNumberTextBox.Text);
}
}

 Step 9 : Go to Default.aspx page option and write a code.

Code :

<title></title>
</head>
<body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server" EnableViewState ="true">
 </asp:ScriptManager>
 <div>
 <b>ValidatorCallout Demonstration</b><br />
 <table>
 <tr>
 <td>Name:</td>
 <td><asp:TextBox runat="server" ID="NameTextBox"
 BorderStyle="solid" BorderWidth="1px" BorderColor="#a9a9a9" /></td>
 </tr>
 <tr>
 <td>Phone Number:</td>
 <td><asp:TextBox runat="server" ID="PhoneNumberTextBox"
 BorderStyle="solid" BorderWidth="1px" BorderColor="#a9a9a9" /></td>
 </tr>
 </table>
 <br />
 <asp:RequiredFieldValidator runat="server" ID="Req"
 ControlToValidate="NameTextBox"
 Display="None"
 ErrorMessage="<b> Missing Field</b><br />A name is required." />
 <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="Req"
 HighlightCssClass="validatorCalloutHighlight" >
 </asp:ValidatorCalloutExtender>
 <asp:RequiredFieldValidator runat="server" ID="PNReq"
 ControlToValidate="PhoneNumberTextBox"
 Display="None"
 ErrorMessage="<b>Required Field Missing</b><br />A phone number is required.<div style='margin-top:5px;padding:5px;border:1px solid #e9e9e9;background-color:white;'><b>Other Options:</b><br /><a href='javascript:alert("No phone number available in
profile.");'>Extract from Profile</a></div>" />
 <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" TargetControlID="PNReq"
 HighlightCssClass="validatorCalloutHighlight"
 Width="350px" >
 </asp:ValidatorCalloutExtender>
 <asp:RegularExpressionValidator runat="server" ID="PNRegEx"
 ControlToValidate="PhoneNumberTextBox"
 Display="None"
 ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"
 ErrorMessage="<b>Invalid Field</b><br />Please enter a phone number in the format:<br />(###) ###-####" />
 <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" runat="server" TargetControlID="PNRegEx"
 HighlightCssClass="validatorCalloutHighlight">
 </asp:ValidatorCalloutExtender>
 <asp:Button ID="Button1" runat="server" Text="Submit"
onclick="Button1_Click" /><br /><br />
 <asp:UpdatePanel runat="server" ID="up1">
 <ContentTemplate>
 <asp:Label id="lblMessage" runat="server" />
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
 </Triggers>
 </asp:UpdatePanel>
 </div>
 </form>
 </body>

 Step 10 : Now run the application by Pressing F5.

val10.gif

Step 11: When we define the name, Phone number and click on the Submit button then following message shows.

val11.gif

Resource

AJAX Text Box Watermark Extender