Click here to Skip to main content
Click here to Skip to main content
Go to top

Programmatically Controlling Ajax Validator Callouts Using User Controls

, 18 Oct 2009
Rate this:
Please Sign up or sign in to vote.
An article on Ajax ValidatorCalloutExtender

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

  • 13th October, 2009: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sunil Preetham
Software Developer Proteans Software Solutions Pvt Ltd.
India India
I am working for Proteans Software Solutions since 3.5 years. Proteans is a leading Outsourced Product Development Company. We partner with ISVs, SaaS companies, Internet businesses & software R&D organizations of Fortune 1000 companies and provide them complete software lifecycle services from software product engineering, sustenance, pre-sales support, professional services and technical support.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 18 Oct 2009
Article Copyright 2009 by Sunil Preetham
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid