ValidatorCalloutExtender
ValidatorCalloutExtender is an asp.net ajax control toolkit's extender control. ValidatorCalloutExtender
control enhances the functionality of existing asp.net validators.
The following asp.net ajax example code demonstrate us how can we use ValidatorCalloutExtender control. in this code
we created a TextBox control and a RequiredFieldValidor control. the RequiredFieldValidator control ensure that
the TextBox is a required field in the web form. we places a ValidatorCalloutExtender control to enhance the
RequiredFieldValidator control. when someone submit the form without inputting TextBox value the ValidatorCalloutExtender
show the error message in callout that was defined by the RequiredFieldValidator ErrorMessage property.
ValidatorCalloutExtender control's have the following properties those are TargetControlID, Width, CssClass, HighlightCssClass,
WarningIconImageUrl, CloseImageUrl and Animations.
ValidatorCalloutExtender control's TargetControlID property specify the asp.net validation server control that we want to extend.
Width property set the callout width.
WarningIconImageUrl property allow us to use a custom image icon for warning and CloseImageUrl allow to set a
custom close image.
Animations property allow us to apply generic animations for ValidatorCalloutExtender control. OnShow allow to play
animation each time the validation popup is displayed and OnHide allow to play animation each time the validation popup
is hidden.
asp.net developers can change the default design of ValidatorCalloutExtender's validation callout using CssClass and
HighlightCssClass property. HighlightCssClass property allow us to apply css style to invalid field.
UsingValidatorCalloutExtender.aspx
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "You submitted name: " + TextBox1.Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Ajax ValidatorCalloutExtender - How to use ValidatorCalloutExtender in asp.net ajax</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color:Green; font-style:italic;">Ajax Control Toolkit Example: Using ValidatorCalloutExtender</h2>
<hr width="575" align="left" color="LawnGreen" />
<asp:ScriptManager
ID="ScriptManager1"
runat="server"
>
</asp:ScriptManager>
<cc1:ValidatorCalloutExtender
ID="ValidatorCalloutExtender1"
runat="server"
TargetControlID="RequiredFieldValidator1"
>
</cc1:ValidatorCalloutExtender>
<asp:Label
ID="Label1"
runat="server"
ForeColor="Salmon"
Font-Size="Large"
Font-Names="Comic Sans MS"
>
</asp:Label>
<br /><br />
<asp:Label
ID="Label2"
runat="server"
Text="Name"
Font-Bold="true"
ForeColor="DeepPink"
>
</asp:Label>
<asp:TextBox
ID="TextBox1"
runat="server"
>
</asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1"
runat="server"
ControlToValidate="TextBox1"
ErrorMessage="Input your name!"
Display="None"
>
</asp:RequiredFieldValidator>
<br /><br />
<asp:Button
ID="Button1"
runat="server"
Text="Submit Name"
Height="40"
Font-Bold="true"
ForeColor="DeepPink"
OnClick="Button1_Click"
/>
</div>
</form>
</body>
</html>
