Search code examples
asp.netmodalpopupextendercontentplaceholder

How to have a link in one placeholder open a ModalPopup in a different placeholder?

I have a page with different placeholders. In one of them, I have a link that I want to open a modal popup in a second placeholder (using the ajaxtoolkit ModalPopupExtender) :

<asp:Content ID="content1" ContentPlaceHolderID="placeholder1" Runat="Server">
   <asp:LinkButton ID="link" runat="server" Text="Popup link" />
</asp:Content>

<asp:Content ID="content2" ContentPlaceHolderID="placeholder2" Runat="Server">
   <asp:Panel ID="panel" runat="server" Text="Popup content" />
   <ajaxToolkit:ModalPopupExtender ID="popup" runat="sever"
      TargetControlID="link"
      PopupControlID="panel"
      />
</asp:Content>

When doing as above, it fires me an exception, saying that popup cannot find link (which I understand, because they are in two different placeholders).

How can I make this work ? I can think of something find FindControl in the code behind, but I don't really like to use this function, as it is pretty computationally expensive (especially with my nested layout).

Solution

  • One issue is that your TargetControlID and PopupControlIDs are reversed. TargetControlID is the ID of the item that you want to 'Modal Pop', in your case that would be Panel1. The PopupControlID is the ID of the control that would trigger the ModalPopup, in your case that would be "Link"

    But you still have a few options if that doesn't work, I have fired a modal located in a different update panel before using the method below. Though not the exact same issue, this workaround may help you (I am assuming you have a script manager on your page).

    1. Create a hidden element in Content2 with ID="hiddenLink"
    2. Set your ModalExtender PopupControlID="hiddenLink"

    3. In the codeBehind for "link" in content1, add an onClick event with the following

      ModalPopup1.show()

    4. If you are using updatePanels, this will cause the ModalPopup to display in AJAX fashion without page refresh.But you would still get a full postback worht of data between the client and the server.

    Method 2, you could use a javascript function to show to Modal as well. Add a behaviorID="MyModal1" (or whatever you want to call it) to your Modalpopup definition. Then change your link: 

    <asp:LinkButton ID="link" runat="server" Text="Popup link" OnClientClick="$get('MyModal1').show(); return false;"/>

    Note: The return false in the above example prevents the .NET page from performing a postback.