CODEWITHSUNDEEP
c#asp.net.netajaxcontroltoolkit
Kaz Miller
Kaz Miller

Reputation: 979

How to set a method that hides a ModalPopupExtender when a button is clicked?

I have this modal:

<asp:ModalPopupExtender runat="server" ID="popUp" TargetControlID="btn1" PopupControlID="pnlP" BackgroundCssClass="modalBackground" DropShadow="true" />

With this updatePanel:

<asp:UpdatePanel ID="pnlP" runat="server" Width="600" Height="650">
    <ContentTemplate>
        <asp:Label Text="Hola" runat="server" />
        <asp:Button ID="btnCerrarPopUp" runat="server" OnClick="ocultarModal" Text="Adios!" />
    </ContentTemplate>
</asp:UpdatePanel>

What I´m trying to do is to create a unic method that hides a ModalPopupExtender when a button inside the panel showed by the ModalPopupExtender is clicked, so if I have "N" ModalPopupExtender with a button that hides it I will always call the same method no matter which ModalPopupExtender -> panel -> button is clicked.

How can I identify which ModalPopupExtender should hide?

protected void ocultarModal(Object sender, EventArgs e)
{
    // Identify which ModalPopupExtender should hide
    // thatModal.Hide();
}

Remmember that I have a lot of ModalPopupExtender that show a panel that has a button that must call the same method to hide that ModalPopupExtender.

Help please.

Upvotes: 1

Views: 2083

Answers (2)

rdmptn
rdmptn

Reputation: 5603

Consider using JavaScript. The popup element ends with the _foregroundElement suffix, so you can easily get it with jQuery (ends with ID selector for an element that is a parent of the button).

Then, strip away the _foregroundElement part and use $find(theRemainingPartOfTheString)

WIth this, you have a reference to the client-side object of the control, regardless of its actual ID or buton.

Then, call its hide() method and you are done. Removing the postback will make your page faster too :).

Upvotes: 1

EduardoFernandes
EduardoFernandes

Reputation: 3449

Instead of using the OnClick, use the OnCommand, passing the Modal Identifier as a command argument. Then, in the Code-Behind, retrive the argument from the OnCommand event and close the modal using the appropriate ModalPopupExtender. Below is an example:

<asp:ModalPopupExtender runat="server" ID="popUp1" TargetControlID="btn1" PopupControlID="pnlP" BackgroundCssClass="modalBackground" DropShadow="true" />


<asp:UpdatePanel ID="pnlP" runat="server" Width="600" Height="650">
    <ContentTemplate>
        <asp:Label Text="Hola" runat="server" />
        <asp:Button ID="btnCerrarPopUp" runat="server" OnCommand="ocultarModalCommand" CommandArgument="popUp1" Text="Adios!" />
    </ContentTemplate>
</asp:UpdatePanel>

You can see above the modal popup extender and the update panel for the Modal 1. Here instead of using OnClick, OnCommand was used, and as its CommandArgumkent, the id of the modal popup extender was set: "popUp1".

How, have a look at the listener below:

protected void ocultarModalCommand(Object sender, CommandEventArgs e)
{
    // Identify which ModalPopupExtender should hide
    String extenderId = (String) e.CommandArgument;
    // hide popup 1
    if (extenderId.equals("popUp1") {
        popUp1.Hide();
    } else if (extender.equals("popUp2") {
        // hide popup2
    }
    // check all other modals

}

Above the command listener gets the name of the extender, which is set in the Command Argument. Based on that, it knows which Modal to close.

Moreover, you can do something fancier with the listener, like the code below:

protected void ocultarModalCommand(Object sender, CommandEventArgs e)
{
    // Identify which ModalPopupExtender should hide
    String extenderId = (String) e.CommandArgument;
    // get the control based on its id
    ModalPopupExtender extender = (MOdalPopupExtender) FindControl(extenderId);
    if (extender != null)
    {
        extender.Hide();
    }
}

In the code above, you find the extender based on the Id set in the Command Argument. However, if the Id is wrongly set, null will be returned and nothing will be hidden. This code has the huge advantage of being much smaller than the previous one.

There you have it, a single event which can close all your Modals.

Upvotes: 1

Related Questions