Controlling a Ajax Control ModalPopupExtender from Code behind

author Richard Fennell calendar Sep 2, 2008 · 2 min read · Uncategorised  ·
Share on: linkedin copy

I have had a nightmare getting this going.

Adding the ModalPopupExtender to a form is easy, you drop it on and tell it the two required controls parameters

  • PopupControlID="MyModalPanel"
  • TargetControlID="ButtonToLoadIt"

And it just works fine, but is triggered by a client side click of the Target Control.

If you want to do some server side code behind first you are meant to set the

  • TargetControlID to a fake control that is visible on form e.g. "FakeButtonToLoadIt" IT IS VITAL THIS CONTROL IS VISIBLE AND HENCE RENDERED, but the control  can be effectively hidden via CSS styling with something like Style="display: none"
  • In the code behind after your own processing you are just meant to call this.MPE.Show(); where MPE is the ID of your extender

Well this did not work for me. If I clicked my fake control (when it was not hidden obviously) it all worked by the server side call just displayed my panel where it was in the underlying HTML flow - the extension never kicked in.

After too many hours of fiddling and reading posts I found the answer. IT IS ALSO VITAL that the whole set of panel, extension and all associated controls are inside an UpdatePanel. If any are not it just does not work - this appears not to have been the case in older versions of the Ajax control toolkit and hence web sites give incorrect instructions.

So it should look something like

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register TagPrefix="cc2" TagName="AddressList" Src="~/SelectAddressControl.ascx" %>

<asp:UpdatePanel runat="server" ID="UpdatePanel1">

     <asp:ScriptManager ID="ScriptManager1" runat="server">
     </asp:ScriptManager>
     <asp:Label ID="LabelPostcode" runat="server" Text="Postcode" AssociatedControlID="Postcode"></asp:Label>
     <asp:TextBox ID="Postcode" runat="server" MaxLength="9"></asp:TextBox>

   
    <asp:Button ID="FindAddressButton" runat="server" Text="Find Address" CausesValidation="false" OnClick="FindAddress_Click" />
     

   <asp:Panel ID="ModalPanel" runat="server" CssClass="modalPopup" >
       
        <cc2:AddressList ID="AddressList" runat="server" />
   </asp:Panel>  
            <asp:Button ID="MpeFakeTarget" runat="server" CausesValidation="False" Style="display: none" />

 
            <cc1:ModalPopupExtender ID="MPE" runat="server" TargetControlID="MpeFakeTarget"
                PopupControlID="ModalPanel" DropShadow="true" CancelControlID="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$AddressList$CancelButton"
                BackgroundCssClass="modalBackground"  />
       
    </asp:UpdatePanel>