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.
- JavaScript
- XML
- Asynchronous Call to the server
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
- TargetControlID
- ServicePath
- HightLightCssClass
Step 1 : Open Visual Studio 2010.
- Go to File->New->WebSite
- Select ASP.NET Empty WebSite
Step 2 : Go to Solution Explorer and
right-click.
- Select Add->New Item
- Select WebForm
- Default.aspx page open
Step 3 : Go to Default.aspx page and
click on the [Design] option and drag the control from the Toolbox.
- Drag ScriptManager control, Button, RequireField Validator, TextBox
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.
Step 11: When we define the name, Phone
number and click on the Submit button then following message shows.
Resource