ValidatorCallOutExtender Control in AJAX

Davin Martyn
Jan 17, 2012

122.2k
0
1
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

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.