Diary of a .NET Developer

December 25, 2011

ASP.NET AJAX ModalPopupExtender – Working with Validators

Filed under: AJAX, ASP.NET — Tags: , — ip3lee @ 11:38 am

Extending further from our previous example with the ASP.NET AJAX ModalPopupExtender, the lightbox may contain data input fields that require input validation.

When using validators with an ASP.NET AJAX ModalPopupExtender, there is one very important thing to keep in mind and that is the use of a ValidationGroup. The ValidationGroup ensures that only actions performed within lightbox only trigger the validators that are related to it and also ensures that they only fire when the relevant action is initiated.

See the source code below for an example of how the ValidationGroup is applied with the use of a RequiredFieldValidator:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ModalPopupExtendarWithPostback._Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
            background-color: #CCCCFF;
            filter: alpha(opacity=40);
            opacity: 0.5;
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        <asp:Button ID="Button1" runat="server" Text="Popup" OnClick="Button1_Click"></asp:Button>
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
            BackgroundCssClass="modalBackground" PopupControlID="Panel1">
        <asp:Panel ID="Panel1" runat="server">
                <asp:UpdatePanel ID="UpdatePanel1" runat="Server" UpdateMode="Conditional">
                        <asp:TextBox ID="TextBox1" runat="server" ValidationGroup="Popup"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator"
                            ControlToValidate="TextBox1" Display="Dynamic" SetFocusOnError="true" ValidationGroup="Popup"></asp:RequiredFieldValidator>
                        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                            <asp:ListItem Text="1" Value="1"></asp:ListItem>
                            <asp:ListItem Text="2" Value="2"></asp:ListItem>
                            <asp:ListItem Text="3" Value="3"></asp:ListItem>
                            <asp:ListItem Text="4" Value="4"></asp:ListItem>
                            <asp:ListItem Text="5" Value="5"></asp:ListItem>
                        <asp:Label ID="Label1" runat="server"></asp:Label>
                        <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
                <asp:Button ID="Button3" runat="server" Text="Save" OnClick="Button3_Click" ValidationGroup="Popup" />
                <asp:Button ID="Button2" runat="server" Text="Close" OnClick="Button2_Click" />


  1. This is by far the best validation in an ajax Modalpopup extender published in internet.

    Comment by Dave — June 18, 2013 @ 7:11 am

    • Glad it helped. Definitely not a lot of information on this readily available on the Internet.

      Comment by ip3lee — June 19, 2013 @ 9:32 pm

  2. Thank you. Simple and easy to use.

    Comment by Greg Davis — August 16, 2013 @ 8:18 am

  3. really nice sir …
    you can try another example of it here this is also very helpful…

    Comment by Shubh — December 6, 2013 @ 8:26 pm

  4. i tried it but ..its not working for me .. when i click Button3 its entering to the behind event without validiting .. can you help me please ?

    Comment by Imad Alami — May 10, 2015 @ 2:06 pm

    • @Imad, have you set up your Validation Groups on the controls with the same name? If you could post the code, it may help with diagnosing the issue.

      Comment by ip3lee — May 10, 2015 @ 9:44 pm

      • Thanks ip3lee for your repost ,
        even when I try to copy paste some of your it example does not work ca :


        it enter in btnValider-Click , without validating client

        Comment by Imad Alami — May 11, 2015 @ 2:02 am

      • @Imad – I’ve dug up the original source code and put in on github. Head over to https://github.com/ip3lee/diaryofadeveloper/tree/master/ModalPopupExtenderWithValidation and download the source code. I’ve added all dependencies and have verified that it is all working. You should hopefully be able to use it to debug and identify the differences with your implementation. Hope this helps.

        Comment by ip3lee — May 11, 2015 @ 10:17 pm

      • Popup

        Comment by Imad Alami — May 11, 2015 @ 2:04 am

  5. <%–



    Comment by Imad Alami — May 11, 2015 @ 2:16 am

  6. Bless you. This actually works!

    Comment by Melanie Peterson — November 11, 2015 @ 6:02 am

    • Glad you were able to make use of it.

      Comment by ip3lee — November 11, 2015 @ 8:37 am

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Blog at WordPress.com.

%d bloggers like this: