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" %>
<!-- This update panel is vital else the codebehind cannot show the modal dialog -->
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<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>
<!-- The button with the code behind -->
<asp:Button ID="FindAddressButton" runat="server" Text="Find Address" CausesValidation="false" OnClick="FindAddress_Click" />
<!-- The modal panel -->
<asp:Panel ID="ModalPanel" runat="server" CssClass="modalPopup" >
<!-- Inside we have a user control -->
<cc2:AddressList ID="AddressList" runat="server" />
</asp:Panel>
<!-- We have to have a dummy control to hold the start event we handle in code behind -->
<asp:Button ID="MpeFakeTarget" runat="server" CausesValidation="False" Style="display: none" />
<!-- We have to use the long name for the cancel button as we have a user control-->
<cc1:ModalPopupExtender ID="MPE" runat="server" TargetControlID="MpeFakeTarget"
PopupControlID="ModalPanel" DropShadow="true" CancelControlID="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$AddressList$CancelButton"
BackgroundCssClass="modalBackground" />
</ContentTemplate>
</asp:UpdatePanel>