why does Modalpopup close on postback?

ads: Watch Indian TV Serials Online

I thought modalpopup control is very easy to use but it’s not.  It took me whole day to figure it out why ModalPopup Extender closes down during page postback.

You should have to keep following things in mind when you use ModalPopup Extender (or to keep ModalPopup displayed while postback happens).

1) ModalPopupExtender should not be inside the UpdatePanel.  That means if you have UpdatePanel around the entire page (having that your ModalPopup control is inside your main UpdatePanel), you should have to move your ModalPopup control out of the update panel.

Wrong:

<form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="server" ID="st" />

    <!-- Note: UpdatePanel is around the entire content of the page -->
    <asp:UpdatePanel runat="server" ID="test">
        <ContentTemplate>

            <asp:Button ID="X3" runat="server" Text="open popup" OnClick="Button1_Click" />

            <ajaxToolkit:ModalPopupExtender runat="server" ID="mpePreview" TargetControlID="btnNULL"
                PopupControlID="divPreview" CancelControlID="btnX">
            </ajaxToolkit:ModalPopupExtender>
            <div class="mpe" runat="server" id="divPreview" style="display: none;">
                <UC:ModalPopupUserControl runat="server" ID="tst" />
                <asp:LinkButton runat="server" ValidationGroup="none" ID="btnX" Text="close" CssClass="close"></asp:LinkButton>
            </div>
            <asp:Button ID="btnNULL" Style="display: none" runat="server" />

        </ContentTemplate>
    </asp:UpdatePanel>

    </form>

Correct:

<form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="server" ID="st" />

    <!-- UpdatePanel  -->
    <asp:UpdatePanel runat="server" ID="test">
        <ContentTemplate>
            <asp:Button ID="X3" runat="server" Text="open popup" OnClick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>

    <!-- ModalPopupExtender should be outside of the UpdatePanel. -->
    <ajaxToolkit:ModalPopupExtender runat="server" ID="mpePreview" TargetControlID="btnNULL"
        PopupControlID="divPreview" CancelControlID="btnX">
    </ajaxToolkit:ModalPopupExtender>

    <div class="mpe" runat="server" id="divPreview" style="display: none;">
        <UC:ModalPopupUserControl runat="server" ID="tst" />
        <asp:LinkButton runat="server" ValidationGroup="none" ID="btnX" Text="close" CssClass="close"></asp:LinkButton>
    </div>

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

    </form>

2) ModalPopup content should be inside UpdatePanel.  I said ModalPopup content NOT ModalPopup control that means you need to put UpdatePanel inside the control that you specify to PopupControlID property of the ModalPopupExtender.   Again… UpdatePanel should be inside not around that control.

<form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="server" ID="st" />
    <!-- UpdatePanel  -->
    <asp:UpdatePanel runat="server" ID="test">
        <ContentTemplate>
            <asp:Button ID="X3" runat="server" Text="open popup" OnClick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>

    <!-- ModalPopupExtender should be outside of the UpdatePanel. -->
    <ajaxToolkit:ModalPopupExtender runat="server" ID="mpePreview" TargetControlID="btnNULL"
        PopupControlID="divPreview" CancelControlID="btnX">
    </ajaxToolkit:ModalPopupExtender>

    <div class="mpe" runat="server" id="divPreview" style="display: none;">
        <!-- UpdatePanel should be here NOT around the above div tag.
            This is the actual content of the ModalPopup.-->
        <asp:UpdatePanel runat="server" ID="UpdatePanel1">
            <ContentTemplate>
                <UC:ModalPopupUserControl runat="server" ID="tst" />
                <asp:LinkButton runat="server" ValidationGroup="none" ID="btnX" Text="close" CssClass="close"></asp:LinkButton>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

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

    </form>

3) For any reason if you CAN”T do what I have suggested in #1, you have to call a method to show modal popup control in code behind file during each post back.

ModalPopupExtenderID.Show();

Hope this helps you.  If this post really helps you, please click the Google +1 button to show it really helps you save your time.

Posted in Microsoft Technology Tagged with: ,
12 comments on “why does Modalpopup close on postback?
  1. Adrian Lupu says:

    Good job :)

  2. smitha says:

    I tried this method and it is working but if i put validation controls, the modal pop is not showing up.

  3. jasonHall says:

    Very nice job! The update panel is a very simple solution to exactly what I needed. This allowed me to handle an event on the popup control that sets the visibility of other objects on my popup control. Thanks!

  4. Brent V says:

    The last tip was one that worked for me! I couldn’t get the other ones to work right without a build error so maybe I did something wrong.

  5. hmmm says:

    thaaaaaaanks :)

  6. Paulo Ortins says:

    Thanx man, you helped me a lot.

  7. Michael says:

    Nice post. I have been searching for a week for a fix on a popup that I have. Unfortunately I have to have an updatepanel around my ModualPopUp because I have tabs that control the what info is shown. I would make the tabs link to a different page except there is some validation in all the panels. So I created a control that shows the tabs and just turns the panels on and off when the user clicks them.

    I have a pop up showing when a user updates a textbox. this works great just like all the others on this page. Except this popup needs to have a form with some dropdown lists. The first one is static but depending on the selection of that one control it should do a partial postback and update the other dropdown list.

    My problems are. Its not hitting the SelectedIndexChange Method. and the popup does not disappear but renders in the lower left hand corner of the screen. Almost as if it know to close but knows not to close as well.

    I have searched and searched. but have not came up with a fix

  8. Michael says:

    I just wanted to let you know. After 2 weeks of working on this you can have the popup inside of an updatepanel.

    You may need to set ChildrenAsTriggers=”false” in the first one and then in the second set it to true. If it is set to false you have to have updateMode set to Conditional

  9. Dheeraj says:

    thanks a lot man…..amazing work…:)

  10. Shobha M says:

    I had been looking for this from quite a time, its just amazing solution, thanks a lot :)

  11. Rangga says:

    It’s not working in Chrome.. Pliss Help, any suggest??

  12. Alexandre says:

    Thank’s a lot, worked for me!!!

Ads