ModalPopupExtender 未在 ASP.NET gridview 图像按钮单击中触发答案

【问题标题】：ModalPopupExtender is not triggered in ASP.NET gridview image button clickModalPopupExtender 未在 ASP.NET gridview 图像按钮单击中触发
【发布时间】：2014-09-12 15:12:33
【问题描述】：

我正在尝试为用户显示带有确认消息的 AJAX 弹出窗口，但是当用户单击按钮时，会自动转到按钮单击事件而不显示消息。这就是我所拥有的：

<asp:GridView ID="GridView1" OnRowCommand="GridView1_RowCommand">
   <Columns>
      <asp:TemplateField ItemStyle-HorizontalAlign="Center">
         <ItemTemplate>
            <asp:ImageButton ID="imgButton1" RowIndex='<%# Eval("PostingID") %>' CommandName="Archive" CommandArgument='<%# Eval("PostingID") %>' runat="server" ImageUrl="/images/a.png" />
            <asp:Panel ID="pnlConfirm" runat="server" CssClass="modalPanel" Style="display: none; height:160px; border-color:#B6B6B4;">
               <div>
                  <table class="featrEmpDivLoginPopup" style="height:160px; width:460px;" cellspacing="0" cellpadding="0">
                     <tr>
                        <td id="divClose" runat="server" class="topimglhs533 hedding1" style="height:30px; background-color:#d3d8d2;">
                           Message 
                        </td>
                     </tr>
                     <tr>
                        <td>
                           <div id="jsAlert1_popupBody" style="position: absolute; font-family: Verdana,Arial; font-size: 9pt; padding: 2px; text-align: left; background-color: rgb(255, 255, 255); color: black; top: 34px; width: 450px; left: 1px;">
                              <div style="padding-top:20px; padding-bottom:5px; text-align:center;">Are you sure you want to Archive this posting?<br></div>
                           </div>
                        </td>
                     </tr>
                     <tr>
                        <td style="width:100px; margin-top:5px; text-align:center;">
                           <asp:ImageButton ID="btnUpdate" CommandName="Archive" ImageUrl="~/Images/btnarchive.jpg" runat="server" />
                           <asp:ImageButton ID="btnCancel" ImageUrl="~/Images/cancel2.jpg" runat="server" />
                        </td>
                     </tr>
                  </table>
               </div>
            </asp:Panel>
            <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="imgButton1" PopupControlID="pnlConfirm"
               CancelControlID="btnCancel" BackgroundCssClass="modalBg" DropShadow="false"></ajaxToolkit:ModalPopupExtender>
            <!-- PANEL -->
         </ItemTemplate>
      </asp:TemplateField>
   </Columns>
</asp:GridView>

所以我希望当用户单击 imgButton1 时会显示弹出窗口，但它会立即在后面的代码中转到事件。

这段代码有什么问题吗？

添加说明

在 Firebug 中，我可以在 ScriptResource.axd 中看到这两个错误：

这可能与我的问题有关吗？

添加了更好的图片：

【问题讨论】：

是否将OnClientCLick="return false; 添加到“ImageButton (imgButton1)”帮助中？
@DennisR 没有回发发生，但也没有显示弹出窗口。谢谢
你能给我们展示一些你的imagebutton点击事件的cs代码吗？

标签： c# asp.net gridview asp.net-ajax modalpopupextender

【解决方案1】：

我认为在网格中跟随“imgButton1”，因此无法将“imgButton1”放入 ModalPopupExtender。

如果您愿意，可以执行以下步骤 1. 添加带有假目标控件的 ModalPopupExtender

<ajax:ModalPopupExtender ID="lnkEditPopup" TargetControlID="hfo" DropShadow="true"
    BackgroundCssClass="modalBackground" PopupControlID="pAddEditApprover" runat="server">
</ajax:ModalPopupExtender>

<%-- START : Fake Controler for ModalPopupExtender --%>
<asp:HiddenField ID="hfo" runat="server" />
<%-- END : Fake Controler for ModalPopupExtender --%>

在网格视图中使用项目命令

 <asp:GridView ID="gv" runat="server"OnSelectedIndexChanging="gv_SelectedIndexChanging">
    <Columns>
     <asp:CommandField 
SelectImageUrl="~/Styles/images/info-group.png" 
ButtonType="Image" 
ShowSelectButton="true"  
AccessibleHeaderText="Edit" /> ... // rest of grid data

.cs 文件中的 3 个

 protected void gridApprover_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
 {
  lnkEditPopup.Show();
  }

试试这个对我有用的

【讨论】：

【解决方案2】：

我认为问题是当您单击图像按钮事件时不会触发，因此为了解决这个问题，我认为您应该从图像按钮事件调用弹出扩展器。

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnCancel"
    TargetControlID="FakeHiddenField" PopupControlID="Panel4" PopupDragHandleControlID="PopupHeader"
    Drag="true" BackgroundCssClass="ModalPopupBG">
</asp:ModalPopupExtender>

然后转到.cs中的图像按钮事件（方法）并在那里编写此代码

protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
    {

        this.ModalPopupExtender1.Show();
    }

试试这个，它会为你工作

【讨论】：

【解决方案3】：

如果你只是想得到一个确认，如果他想存档这个帖子，你为什么不使用 JavaScript？

OnClientClick="if (!confirm('Are you sure you want delete?')) return false;"

这会发出 JavaScript 警报，让您有机会检查用户想要什么。

<asp:ImageButton ID="imgButton1" RowIndex='<%# Eval("PostingID") %>' OnClientClick="if (!confirm('Are you sure you want delete?')) return false;" CommandName="Archive" CommandArgument='<%# Eval("PostingID") %>' runat="server" ImageUrl="/images/a.png" />

【讨论】：

【解决方案4】：

我建议问题在于 imgButton1、pnlConfirm 和 ModalPopupExtender1 位于您的 GridView 的一行内。 GridView 考虑到它将有多行。这意味着您不能通过它们各自的 ID 直接引用控件。

你也可以这样做：

创建一个继承自 DataControlField 的控件 - 以便能够将其添加到您的行中......
在控件内部创建一个ImageButton。
为图片按钮的OnClientClick 事件添加消息。
在任何 GridView` 中使用您的新控件。

这里有一些示例代码：

public class GridDeleteButton : DataControlField, IDisposable
{
    private ImageButton button;
    public event ImageClickEventHandler Click;

    public override void InitializeCell(DataControlFieldCell cell, DataControlCellType cellType, DataControlRowState rowState, int rowIndex)
    {
        button = new ImageButton
                 {
                     ImageUrl = "...",
                     CommandName = "Delete",
                     OnClientClick = @"return confirm('Are you sure?');"
                 };

        if (Click != null) button.Click += Click;

        cell.Controls.Add(button);
    }

    protected override DataControlField CreateField()
    {
    }

    public void Dispose()
    {
        if (button != null) button.Dispose();
    }
}

【讨论】：

【解决方案5】：

问题是我的页面没有带有 ContentTemplate 的 UpdatePanel。一旦我将它们放置到位，问题就解决了。

【讨论】：