AJAX Toolkit Modal Popup won't appear

Question

Hi,

I'm having some trouble calling a modal popup from server side. So, I set the modalpopupextender's targetcontrolID to a hidden label. Then in the codebehind from a button's click, I try to add this.modalpopup.show(); Unfortunately, the modal popup doesn't appear when this happens. I can see the code get executed, but nothing shows.

Here's my ASP. minus the opening < for the button and popupextender, because for some reason those lines won't display.

<asp:Button CssClass="Button" ID="button" runat="server" Text="Button" AccessKey="m" meta:resourcekey="buttonResource1" OnClick="button_Click" /> 

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="forpopup"
            PopupControlID="PopupPanel" BackgroundCssClass="modalBackground" />

       <asp:Label ID="forpopup" runat="server" Visible="False"></asp:Label>

        <asp:panel id="PopupPanel" runat="server" BorderStyle="Groove" BorderColor="black" BorderWidth="3px" BackColor="AliceBlue" Height="200px" Width="200px" style="display: none">

            <asp:Label ID="lblPopup" runat="server" Text="popup!"></asp:Label><br />
            <br />
            <asp:DropDownList ID="ddlData" runat="server">
            </asp:DropDownList><br />
            <br />

            <asp:Button ID="btnPopupOK" runat="server" Text="Ok" />
            <asp:Button ID="btnPopupCancel" runat="server" Text="Cancel" />
        </asp:panel>

and here is my codebehind

    protected void button_Click(object sender, EventArgs e)
    {
        this.mpe.Show();
    }

Answer 1

I typically add any kind of extenders after the buttons/panels/controls they are going to modify. I haven't seen anything directly in the guides about the controls that state they have to go this way, but I've run into too many issues when I put the extenders before the controls.

Try putting the extender after the panel and button(s) in question and see if that fixes things.

Answer 2

According to the ASP.NET AJAX ModalPopup documentation

TargetControlID is the ID of the element that activates the modal popup.

In your sample code, TargetControlID is set to a Label ID="forpopup", yet in the code-behind you are attempting to show the ModalPopup using a click event handler for Button ID="button".

Have you tried changing the TargetControlID to "button" and seeing if the ModalPopup appears?

A couple of notes

• What is the purpose of using Label ID="forpopup" for the TargetControlID?
• Label ID="forpopup" will not be rendered in HTML on the client.

EDIT:

Demo code to show use-

aspx content page

<asp:Content ID="Content1" ContentPlaceHolderID="Main" runat="server">    
  <asp:Button ID="btnShow" runat="server" Text="Open ModalPopup" />     

  <ajaxToolkit:ModalPopupExtender runat="server" ID="modal" BackgroundCssClass="darken" 
  CancelControlID="btnCancel" PopupControlID="pnl" TargetControlID="btnShow" />

  <asp:Panel ID="pnl" runat="server" style="width:55%;display:none;">
        <h1>You can now see me!</h1>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
        culpa qui officia deserunt mollit anim id est laborum."</p>
        <asp:Button ID="btnCancel" runat="server" Text="Close" />
  </asp:Panel>
</asp:Content>

code-behind

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        btnShow.Click += new EventHandler(btnShow_Click);
    }

    protected void btnShow_Click(object sender, EventArgs e)
    {
        modal.Show();
    }

Answer 3

I agree with Dillie-O, I think you will need an update panel in there if you are invoking it from the Serverside:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
  <asp:panel id="PopupPanel" runat="server" BorderStyle="Groove" BorderColor="black" BorderWidth="3px" BackColor="AliceBlue" Height="200px" Width="200px" style="display: none">
    ...
  </asp:panel>
</ContentTemplate>
</asp:UpdatePanel>

then

protected void button_Click(object sender, EventArgs e)
{
    this.mpe.Show();
    UpdatePanel1.Update();
}

Answer 4

I had a similar problem.. I was setting the targetcontrolid of the extender to a hidden button and trying to fire the Show() event in server side code. It wasn't being displayed even though the code was getting hit. I discovered that the problem was that I was hiding the hidden button using "visible = false" which doesn't render the control to the page. I changed it to "style='display:none'" and it started working. Try changing your target control to a hidden button and make sure it's getting rendered (just not shown) and maybe it will work.

Answer 5

Please set the BehaviourID attribute of ModalPopupExtender to some value, then you will be able to show and hide the modal popup.