ModalPopupExtender 在 ASP.NET gridview 圖像按鈕單擊中未觸發

Question

我正在嘗試向用戶顯示帶有確認消息的 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 中看到這兩個錯誤：

這可能與我遇到的問題有關嗎？

添加了更好的圖片：

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

2. 在網格視圖中使用項目命令

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

試試這個對我有用的

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

試試這個，它會為你工作

Answer 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" />

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

Answer 5

問題是我沒有為頁面設置帶有 ContentTemplate 的 UpdatePanel。 一旦我將它們放置到位，問題就解決了。