Reader Level:
ARTICLE

ValidatorCallOutExtender Control in AJAX

Posted by Davin Martyn Articles | AJAX January 16, 2012
In this article you will learn about ValidatorCallOutExtender Control in AJAX using ASP.NET.
  • 0
  • 0
  • 31965

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
dr1.gif

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

  • Select Add->New Item
  • Select WebForm
  • Default.aspx page open
dr2.gif

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(&quot;No phone number available in
profile.&quot;);'>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

COMMENT USING

Trending up