Programmatically Controlling Ajax Validator Callouts Using User Controls

• Download demo project - 821.19 KB
• Download source - 419.95 KB

Introduction

This article will help you when you are using ValidatorCalloutExtender to validate your controls. Sometimes validator callouts will not change their positions when scrolling parent control. In this situation, a better solution is to close all the validator callouts in a page. To do this, you should know the behavior ids of all the validator callouts. In this article, we are using custom user control which contains one text box, one required field validator and validator callout generated programmatically by tagging the required field validator's client id to its behaviour id to identify the callout to hide.

Using the Code

To start, we need to create a new web application project and then create a custom text box control.

//
// Custom text box control code looks like below (CustomTextBox.ascx)
//

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CustomTextBox.ascx.cs"
    Inherits="AjaxValidatorCallouts.UserControls.CustomTextBox" %>
<asp:TextBox ID="textBox" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator" 
    runat="server" ErrorMessage="Please enter any value!!."
    ControlToValidate="textBox" Display="None" 
    onprerender="RequiredFieldValidator_PreRender"></asp:RequiredFieldValidator>
<asp:PlaceHolder ID="validatorPlaceHolder" runat="server"></asp:PlaceHolder>

The user control contains a text box, required field validator and validator place holder.

Validator place holder is used to hold Ajax validator callout generated programmatically. Onprerender event of the RequiredFieldValidator calls the function CreateAjaxCallout(string controlID, string validatorClientID) to create the object of ValidatorCalloutExtender with specific behaviour id, i.e. "AjaxCallouts_" + RequiredFieldValidatorClientID. Finally the ValidatorCalloutExtender object is added to validatorPlaceHolder.

//
// Function CreateAjaxCallout
//

/// To Set Ajax callout for validators by using validators ID
private void CreateAjaxCallout(string controlID, string validatorClientID)
{
    ValidatorCalloutExtender valExtender = new ValidatorCalloutExtender();
    valExtender.TargetControlID = controlID;
    valExtender.BehaviorID = "AjaxCallouts_" + validatorClientID;
    valExtender.ID = controlID + "_ValExtender";
    valExtender.HighlightCssClass = "validatorCalloutHighlight";
    valExtender.Width = new Unit(250);
    validatorPlaceHolder.Controls.Add(valExtender);
}

We are done with creating a custom user control. Let us create a web page which uses custom text box controls. To use the user control, we need to register the control on a page as shown below:

<%@ Register Src="~/UserControls/CustomTextBox.ascx" 
	TagName="CustomTextBox" TagPrefix="uc1" %>

Creating page content...

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
    <uc1:CustomTextBox ID="CustomTextBox1" runat="server" />
    <br />
    <uc1:CustomTextBox ID="CustomTextBox2" runat="server" />
    <br />
    <uc1:CustomTextBox ID="CustomTextBox3" runat="server" />
    <br />
    <uc1:CustomTextBox ID="CustomTextBox4" runat="server" />
    <br />
    <uc1:CustomTextBox ID="CustomTextBox5" runat="server" />
    <br />
    <asp:Button ID="ButtonSubmit" runat="server" Text="Submit" />
    <input id="ButtonClear" onclick="HideCallouts()" type="button" value="Hide callout" />
</div>

In this page we have two button controls, one for validating page on submit and another one is to clear displayed validator callouts. The final step is to write a JavaScript function HideCallouts() which will identify the behaviour id of validator callout by searching page validators.

// JavaScript function to search all the displayed callouts to close
<script type="text/javascript" language="javascript">
    function HideCallouts() {
        for (i = 0; i < Page_Validators.length; i++) {
            var validatorID = Page_Validators[i].id;
            var popup = $find('AjaxCallouts_' + validatorID);
            if (popup) {
                popup.hide();
            }
        }
    }
</script>

History

• 13^th October, 2009: Initial version