模态弹出控件不触发原始按钮单击事件

Question

也许我不了解它是如何完全起作用的，但是我所拥有的是一个带有imagebutton和modalpopup的gridview自定义模板。 在页面下方，我的弹出面板处于隐藏状态。 当我单击我的图像按钮时，面板显示出来，然后单击“ btnModalCancelAll”，它开始逐步执​​行将页面变量从0设置为1的方法，但是问题出在它不会继续到原始的gridview图像单击事件不知道为什么。 以下是我的模板字段和弹出面板。

<asp:TemplateField>
                    <ItemTemplate>
                      <asp:ImageButton ID="ImageButtonCancelResv" runat="server" Width="20" Height="20px" ImageUrl="~/Images/Delete.png"  OnClick="ImageButtonCancelResv_Click" />
                          <asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="ImageButtonCancelResv" PopupControlID="pnlModalPanel" CancelControlID="btnModalCancel"></asp:ModalPopupExtender> 
                        <br />
                        <asp:Label ID="Label1" runat="server" Text="Cancel"></asp:Label>

                 </ItemTemplate>

 <asp:Panel ID="pnlModalPanel" CssClass="modalBackground" runat="server" Style="display:none">
    <asp:UpdatePanel runat="server" ID="updatePanelPopUp">
    <ContentTemplate>

            <div id="modalWrap">
             <asp:Label ID="lblAreyousure" runat="server" Text="Are you sure you want to do that?"></asp:Label>
             <div id="divhr1" class="horizontalRule" runat="server"></div>
            <div id="divCancelSummaryAll">
                   <asp:Label ID="lblEntireFamily" runat="server" Text="Cancel all family reservations from this event date."></asp:Label><br />
                   <asp:Label ID="lblSummaryDeleteAll" runat="server" Text=""></asp:Label><br />
                 <asp:Button ID="btnModalDeleteAll" runat="server" CssClass="modalButton" Text="Cancel all Family" OnClick="btnModalDeleteAll_Click" />
            </div>
            <div id="divCancelSummaryOne">
                  <asp:Label ID="Label2" runat="server" Text="Cancel selected child reservation from this event date."></asp:Label><br />
                 <asp:Label ID="lblSummaryDeleteOne" runat="server" Text=""></asp:Label><br />
                 <asp:Button ID="btnModalDeleteOne" runat="server" CssClass="modalButton" Text="Cancel this Child" OnClick="btnModalDeleteOne_Click" />
            </div>
         <br />

            <asp:Button ID="btnModalCancel" runat="server" Text="Cancel" />
           </div>
    </ContentTemplate>
</asp:UpdatePanel>
    </asp:Panel>

Answer 1

我建议您创建另一个按钮，并将其用作模式弹出窗口的TargetControlID。 您可以通过将其显示设置为“无”来隐藏此按钮。 这将只是一个虚拟按钮，以便您的代码进行编译。

现在，当您单击按钮"ImageButtonCancelResv" ，它将运行方法OnClick="ImageButtonCancelResv_Click"中的代码，在此方法的结尾，您可以添加命令以显示弹出窗口：

mpe.Show();

示例代码：

protected void ImageButtonCancelResv_Click(object sender, EventArgs e)
{
            //Do something here when button is clicked

             mpe.Show();
}

接着

  <asp:TemplateField>
        <ItemTemplate>
          <asp:ImageButton ID="ImageButtonCancelResv" runat="server" Width="20" Height="20px" ImageUrl="~/Images/Delete.png"  OnClick="ImageButtonCancelResv_Click" />
   <div style="display: none">
        <asp:Button ID="btnModalStatusHidden" runat="server" />
    </div>
    <asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnModalStatusHidden" PopupControlID="pnlModalPanel" CancelControlID="btnModalCancel"></asp:ModalPopupExtender> 
<br />
  <asp:Label ID="Label1" runat="server" Text="Cancel"></asp:Label>
</ItemTemplate>