asp.net c# tutorials and examples code for web developers

How to use ValidatorCalloutExtender in asp.net ajax

ValidatorCalloutExtender in asp.net ajax
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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
Related asp.net examples