Create Multiple ModalPopupExtenders Dynamically in C#


I am trying to create multiple buttons and associated modalpopupextenders, dynamically.  When I create only one button and one modalpopupextender, the popup works.  But when I try to create more than one button and more than one modalpopupextender, the buttons and popups don't work.

I'd very much appreciate any insights.  The code is below and can be tested just by pasting it into a new .aspx file.  To test the creation of multiple versus single sets of buttons and associated modalpopupextenders, just change the value of "numberOfButtonsAndModalPopups" on line 7 below.

 This code will work for " numberOfButtonsAndModalPopups = 1 ", but not for 2, 3, 4 or more...
Thanks in advance for any help!
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<script runat="server">    
    protected void Page_Load(object sender, EventArgs e)
        int numberOfButtonsAndModalPopups = 1;
        for (int i = 1; i <= numberOfButtonsAndModalPopups; i++)
            Button btnNew = new Button();
            btnNew.ID = "BtnPopup" + i.ToString();
            btnNew.Text = "Click Me to Show PopUp Number " + i.ToString();
            AjaxControlToolkit.ModalPopupExtender modalPop = new AjaxControlToolkit.ModalPopupExtender();
            modalPop.ID = "MpePopUp" + i.ToString();
            modalPop.PopupControlID = "ModalPanel";
            modalPop.TargetControlID = "BtnPopup" + i.ToString();
            modalPop.DropShadow = true;
            modalPop.CancelControlID = "btnCancel";
<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <asp:Panel ID="Panel1" runat="server"></asp:Panel>
            <asp:Panel ID="ModalPanel" runat="server" Style="display: none" BackColor="Gray">
                Dynamic ModalPopup!
                <asp:Button ID="btnCancel" runat="server" Text="Close Me" />

Open in new window

Who is Participating?
GiftsonDJohnConnect With a Mentor Commented:

The issue is because of the DropShadow behavior. Whenever you enable the DropShadow Property, the dom will initiate the Shadow behavior for the Modal Popup Panel. So when you enable multiple modal popup extenders for the same panel, it gets conflict and it is not able to initiate the shadow effect and will throw the following javascript error.

Sys.InvalidOperationException: Two components with the same id 'ModalPanel$DropShadowBehavior' can't be added to the application.

The above error states that already a behavior for DropShadow is added to the ModalPanel object. So another control can't create a shadow behavior for the same.

If you make DropShadow=false your code will work.
suchandsuchAuthor Commented:
Fantastic - thanks Giftson - I didn't even see the Javascript error.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.