Ajax ModalPopupExtender Postback and Web User Controls

First off yes, there are a ton of blog posts regarding how to cause a button click inside the ModalPopupExtender to execute server side code and almost all of them tell you correctly to remove the following two attributes, OkControlID and OnOkScript from the ModalPopupExtender declaration.

Where my blog entry differs is by scenario; What if we are dynamically loading user controls into the target panel for the ModalPopupExtender, what about a panel inside a ContentTemplate in a master pages scenario or what if we have an UpdatePanel? Luckily it all is pretty much the same, as long as  there is no OkControlID, OnOkScript or Cancel attributes defined the event will make it back to the server to try and find a delegate with the correct signature.

When you are loading user controls dynamically through the LoadControl() method you need to recreate that control and reload it during the OnInit or PreRender events in order for an event to be registered this also includes modal windows that have user controls within them that trigger events. 

Given the example markup below there is a modal window modalPop that uses panel pnlModalPopUp for it’s PopUpControlID. What you can also see is the TargetControlID is set to the hidden button btnHiddenForModal, this allows the modal window to remain hidden until an event occurs that signals a modal window display.

<asp:Content
    ID="Content2"
    ContentPlaceHolderID="ContentPlaceHolder2"
    Runat="Server">

        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>

        <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="100">
                <ProgressTemplate>
                    Loading....
                </ProgressTemplate>
        </asp:UpdateProgress>

        <asp:UpdatePanel ID="upPnlContent" runat="server" UpdateMode="Conditional">

            <ContentTemplate>

                <asp:PlaceHolder runat="server" ID="plContent">
                </asp:PlaceHolder>

                <asp:Panel ID="pnlModalPopup" runat="server"  Style="display:none">
                </asp:Panel>

                <ajax:ModalPopupExtender
                    runat="server"
                    ID="modalPop"
                    PopupControlID="pnlModalPopup"
                    TargetControlID="btnHiddenForModal"
                    BackgroundCssClass="GrayedOut"
                    DropShadow="true">
                </ajax:ModalPopupExtender> 

                <asp:Button ID="btnHiddenForModal" runat="server" Style="display:none" />

            </ContentTemplate> 

        </asp:UpdatePanel>

</asp:Content>

Now we load a control into the  panel pnlModalPopup using code behind.

 

// Control to be used inside the panel for the modal window

UserControl modalContent;

modalContent = new UserControl();

modalContent = (UserControl)LoadControl("PathToControl");

modalContent.ID = "modalControlID"; 

pnlModalPopup.Controls.Clear();

pnlModalPopup.Controls.Add(modalContent);

modalPop.Show();

HttpContext.Current.Session["CurrentModalControl"] = “yes”;

 

Imagine that the control modalContent contains buttons whose click event you want to catch server side to execute some sort of business logic. In order for this to happen you need to do reload the modal window into the panel again in order for the buttons event to make it to the server to be processed.

 

 protected override void OnInit(EventArgs e)

{

  if (HttpContext.Current.Session["CurrentModalControl"] == "yes")  {

// Control to be used inside the panel for the modal window

UserControl modalContent;

modalContent = new UserControl();

modalContent = (UserControl)LoadControl("PathToControl");

modalContent.ID = "modalControlID"; 

pnlModalPopup.Controls.Clear();

pnlModalPopup.Controls.Add(modalContent);

modalPop.Show();

}

}

And then within the user control that you are loading into the panel.

protected void btnOK_Click(object sender, EventArgs e)

{

  // Execute your server side code now that the buttons event signature can be found

}

 

 

Hope this helps someone!