?
Solved

Create Multiple ModalPopupExtenders Dynamically in C#

Posted on 2009-04-07
2
Medium Priority
?
3,262 Views
Last Modified: 2012-05-06
Hello,

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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";
 
            this.Panel1.Controls.Add(modalPop);
 
            this.Panel1.Controls.Add(btnNew);
        }
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <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" />
            </asp:Panel>
        </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Open in new window

0
Comment
Question by:suchandsuch
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 14

Accepted Solution

by:
GiftsonDJohn earned 2000 total points
ID: 24094247
Hi,

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.
0
 
LVL 1

Author Closing Comment

by:suchandsuch
ID: 31567808
Fantastic - thanks Giftson - I didn't even see the Javascript error.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…
In this video, Percona Director of Solution Engineering Jon Tobin discusses the function and features of Percona Server for MongoDB. How Percona can help Percona can help you determine if Percona Server for MongoDB is the right solution for …
Suggested Courses
Course of the Month9 days, 13 hours left to enroll

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question