如何使用ModalPopupExtender在嵌套面板中触发OnClick事件？

Question

I have the following scenario:

UpdatePanel1 -> UpdatePanel2 -> UpdatePanel3 :

Inside it I have a GridView with a following column definition:

<ItemTemplate>
    <asp:ImageButton ID="img_btnEdit" runat="server" AlternateText="Edit" 
        CausesValidation="false" Height="15px" OnClientClick='<%#Eval("TranValueId", "PopulateEditTransValuesMDPP({0}); return false;") %>' 
        ImageUrl="~/Images/document_edit.png" Width="15px" />
</ItemTemplate> 

When clicked, a ModalPopupExtender should open, but first I need to retrieve the boundfield of the clicked row.

JS function:

function PopulateEditTransValuesMDPP(id) {

    var btPopupLoad = document.getElementById('<%= btPopupLoad.ClientID %>');
    var hdnlblModalPopuphelper = document.getElementById('<%= hdnlblModalPopuphelper.ClientID %>');

    if (id != null) {
        hdnlblModalPopuphelper.innerHTML = id;
    }

    btPopupLoad.click();
}

Here is the rest of the HTML code that resides in the same UpdatePanel as the GridView :

<asp:Label ID="hdnlblModalPopuphelper" runat="server" Text="" style="display:none;"></asp:Label> 
<asp:Button ID="btPopupLoad" runat="server" Text="Load" OnClick="btPopupLoad_Click" style="display:none;"  /> 
<ajaxToolkit:ModalPopupExtender ID="modppOpen" runat="server" TargetControlID="btPopupLoad" 
    PopupControlID="pnlModPPDefaultValueEditing"  BackgroundCssClass="modalBackground" OkControlID="btnCloseModalPopup"
    DropShadow="true" />
<asp:Panel ID="pnlModPPDefaultValueEditing" runat="server" CssClass="aspnetForm" Width="80%"> 
<asp:UpdatePanel ID="updpanEditDefaultValue" runat="server" UpdateMode="Conditional">
    <Triggers> 
        <asp:AsyncPostBackTrigger ControlID="btnSaveEditingTransValueDefaultValue" />
    </Triggers>
(...)

Problem Description: Everything works fine, except that the OnClick Event (the server side event) of the btPopupLoad is not triggered!

The only way I made the OnClick event to get fired was by setting the UseSubmitBehaviour="false" in its definition but that's causing a postback and the ModalPopup dissapears. So basically I want the OnClick Event to be triggered and in the same time keep the ModalPopup still opened.

Help, please?

Answer 1

I figured it out by myself so if anyone ever runs into this, this is how it worked for me:

Instead of

<ItemTemplate>
    <asp:ImageButton ID="img_btnEdit" runat="server" AlternateText="Edit" 
        CausesValidation="false" Height="15px" OnClientClick='<%#Eval("TranValueId", "PopulateEditTransValuesMDPP({0}); return false;") %>' 
        ImageUrl="~/Images/document_edit.png" Width="15px" />
</ItemTemplate> 

(which uses a hacky way of opening a modal popup anyway) just do this:

HTML

<asp:ImageButton ID="img_btnEdit" runat="server" AlternateText="Edit" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" CommandName="Editing"  
CausesValidation="false" Height="15px" 
ImageUrl="~/Images/document_edit.png" Width="15px" />

C#:

protected void gvTransValues_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "Editing")
    {
        int index = Convert.ToInt32(e.CommandArgument);
        GridViewRow row = gvTransValues.Rows[index];

        //do whatever you need here

        modppOpen.Show();
    }
}

What I basically did was to replace the whole hacky way of using hidden buttons or labels and just prompt the modalpopup straight from the click of the button using CommandName and CommandArguments of the RowCommand event of the gridview .