views:

323

answers:

1

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).

+1  A: 

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.

Tommy
Thanks for your answer ! The mix between TargetControlID and PopupControlID was a typo, but thanks for correcting it. I like Method 2, but why do we need step 1. and 2. ?
Wookai
In my experience, the modalPopup likes to have a targetControlID. I have had compilation errors without it. So steps 1 and 2 for method 1, I create a hidden control that does nothing but make the modalPopup happy during compililation :) It could also have been a limitation of the earlier AJAX toolkit as well...
Tommy
ah - those are easy to get mixed up aren't they? I meant it likes to have a popUpControlID....etc etc etc
Tommy