CODEWITHSUNDEEP
javascriptasp.netajaxpostbackmodalpopupextender
Jean-François Beaulieu
Jean-François Beaulieu

Reputation: 4445

Preventing ModalPopupExtender from closing during/after PostBack

How do I prevent my asp:ModalPopupExtender from closing after or during a postback to the server??

Here is my code:

JAVASCRIPT

// Confirm popup Ok button
function OnOk() {
    $('#confirmPopup').hide();
    ClickSaveButton();      // does a postback
    ShowGridPopup();
}

ASP.NET AJAX

    <asp:ModalPopupExtender BehaviorID="confirmPopup" ID="confirmPopup" runat="server"
        TargetControlID="butConfirm" PopupControlID="ConfirmView" BackgroundCssClass="modalBackground"
        OnOkScript="OnOk();" OnCancelScript="OnCancel();"
        OkControlID="yesButton" CancelControlID="noButton">
    </asp:ModalPopupExtender>

No matter if I call ShowGridPopup() before or after the postback method ClickSaveButton(), the popup still dissapears. How can I prevent this?

EDIT

Here is the code for the ShowGridPopup() and ClickSaveButton()

function ShowGridPopup() {
    if (getID() == "Popup1") {
        ShowGridPopup1();
    } else if (getID() == "Popup2") {
        ShowGridPopup2();
    }
}

function ClickSaveButton() {
    var _id = $('a[id$="butSave"]').attr("ID");
    __doPostBack(_id.replace("_", "$"), '');
}

Upvotes: 4

Views: 23775

Answers (3)

Bengi Besceli
Bengi Besceli

Reputation: 3748

You should use UpdatePanel, so the ModalPopupExtender won't be hidden after postback. See this example below :

Aspx:

<body> 
    <form id="form1" runat="server"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager> 
    <div> 
        <asp:UpdatePanel ID="udpOutterUpdatePanel" runat="server"> 
             <ContentTemplate> 

                 <asp:Button ID="ButtonShow" runat="server" Text="Show Popup" OnClick="ButtonShow_Click" />                 


                <input id="dummy" type="button" style="display: none" runat="server" /> 
                <ajaxToolkit:ModalPopupExtender runat="server" 
                        ID="mpeThePopup" 
                        TargetControlID="dummy" 
                        PopupControlID="pnlModalPopUpPanel" 
                        BackgroundCssClass="modalBackground"                        
                        DropShadow="true"/>
                 <asp:Panel ID="pnlModalPopUpPanel" runat="server" CssClass="modalPopup"> 
                    <asp:UpdatePanel ID="udpInnerUpdatePanel" runat="Server" UpdateMode="Conditional"> 
                        <ContentTemplate> 
                            Message
                            <asp:Button ID="ButtonClose" runat="server" Text="Close Popup" OnClick="ButtonClose_Click" />                                                                  
                        </ContentTemplate>       
                    </asp:UpdatePanel> 
                 </asp:Panel> 

            </ContentTemplate> 
        </asp:UpdatePanel> 
    </div> 
    </form> 
</body>

Code behind : 

    protected void ButtonShow_Click(object sender, EventArgs e)
    {
        //Show ModalPopup               

        mpeThePopup.Show(); 
    }
    protected void ButtonClose_Click(object sender, EventArgs e)
    {
        //Hide ModalPopup

        mpeThePopup.Hide();
    }

Upvotes: 9

ZahidKakar
ZahidKakar

Reputation: 212

Use, ModalPopupExtender1.Show() with update panel to avoid the whole page refresh. This has worked perfectly for me.

Upvotes: 2

Jean-Fran&#231;ois Beaulieu
Jean-Fran&#231;ois Beaulieu

Reputation: 4445

I have found a way to by pass this, here is my solution: You have to create a new HiddenField controller from the server-side in ASP that will be used to store the ID of the ModalPopupExtender that you want to show after postback, it is set to null if there is no popup to be shown.

<!-- Grid Popup ID: to obtain the grid popup ID from server-side -->
<asp:HiddenField id="gridPopupID" runat="server" value="" />

Next, we need to set the ID to the HiddenField before we use the save event

// Confirm popup Ok button
function OnOk() {
    $('#confirmPopup').hide();                          // hides the current confirmation popup
    $("#<%= gridPopupID.ClientID %>").val(getID());     // set the ID to the hiddenField.
    ClickSaveButton();                                  // simulates the click of the save button
}

Now, in the code behind, all we need to do is check the value of the HiddenField text field and we can just do a .Show() on the correct popup accordingly.

Protected Sub OnSaveAssociation(ByVal sender As Object, ByVal e As EventArgs) Handles butSaveAssociation.Click

' ommited code: save changes to back end

            ' determine which popup to show
            Dim _id As String = gridPopupID.Value
            Select Case _id
                Case "Popup1"
                    gridPopup1.Show()
                    gridPopupID.Value = Nothing
                Case "Popup2"
                    gridPopup2.Show()
                    gridPopupID.Value = Nothing
            End Select

End Sub

Upvotes: 1

Related Questions