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

【问题标题】：How to fire OnClick event in nested panels with ModalPopupExtender?如何使用 ModalPopupExtender 在嵌套面板中触发 OnClick 事件？
【发布时间】：2015-07-01 13:08:08
【问题描述】：

我有以下场景：

UpdatePanel1 -> UpdatePanel2 -> UpdatePanel3:

在它里面我有一个GridView 和以下列定义：

<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>

点击后，ModalPopupExtender 应该会打开，但首先我需要检索点击行的边界字段。

JS函数：

function PopulateEditTransValuesMDPP(id) {

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

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

    btPopupLoad.click();
}

以下是与GridView 位于同一UpdatePanel 中的其余HTML 代码：

<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>
(...)

问题描述： 一切正常，除了btPopupLoad 的OnClick 事件（服务器端事件）没有被触发！

我让OnClick 事件被触发的唯一方法是在其定义中设置UseSubmitBehaviour="false"，但这会导致回发和ModalPopup 消失。所以基本上我希望OnClick Event 被触发，同时保持ModalPopup 仍然打开。

请帮忙？

【问题讨论】：

标签： javascript c# asp.net updatepanel modalpopupextender

【解决方案1】：

我自己想出来的，所以如果有人遇到这个问题，这对我来说就是这样：

代替

<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>

（无论如何都使用一种奇怪的方式打开模式弹出窗口）只需这样做：

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();
    }
}

我所做的基本上是替换使用隐藏按钮或标签的整个 hacky 方式，并使用 @987654327 的 RowCommand 事件的 CommandName 和 CommandArguments 直接通过单击按钮来提示模态弹出窗口@。

【讨论】：