gridview 行删除确认框

Question

我需要在 Gridview 删除上显示删除构造框。 使用 OnClientClick 确认框，我展示了一个简单的 Internet 探索框，用于确认删除。 是否可以为此展示一个精美的盒子。 下面是我的 JavaScript 代码存在于 gridview 代码中：

OnClientClick="return DeleteItem();"

下面是我的 Gridview

<asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" DataKeyNames="CartID" AllowPaging="false" PageSize="5"  GridLines="None"  OnRowDataBound="grdShoppingCart_RowDataBound" OnRowDeleting="grdShoppingCart_RowDeleting">
                <Columns>
                    
                    <asp:BoundField DataField="CartID" Visible="false" HeaderText="CartID" />
                    <asp:BoundField DataField="item" HeaderText="Item" HeaderStyle-Font-Bold="true" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="250px" ControlStyle-CssClass="ss-row"    />
<ItemTemplate>
                             <asp:ImageButton  ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png"  title='Remove' CommandName="delete" OnClientClick="return DeleteItem();"  />    
</ItemTemplate>
                        </asp:TemplateField>
                </Columns>
</asp:GridView>

这是我的 Javascript function：

<script type="text/javascript">
    function DeleteItem() {
        if (confirm("Delete this Location?")) {
            return true;
        } else {
            return false;
        }
    }
</script>
      

上面的代码显示了这个确认 window：

我想展示这样的东西：

任何帮助将不胜感激。

Answer 1

无法将 css 添加到confirm框中。 您可以实现自己的 JavaScript 弹出窗口。

或者，有许多插件可以做到这一点。 最流行的 JQuery 插件之一是JQuery UI 对话框https://jqueryui.com/dialog/#modal-confirmation

作为将 JQuery UI 对话框与 ASP.NET Gridview 集成的说明，请尝试以下操作：

<asp:ImageButton  ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png"  title='Remove' CommandName="delete" class="button-delete" /> 

• 您不需要OnClientClick="return DeleteItem();"
• css class 可用作 onclick 事件的参考。

JavaScript：

$(function() {
    // Create click handler
    $('.ui-search-result-table').on('click', 'button-delete', function(e) {
        e.preventDefault($(this)); // $(this) should be a reference to imgbtnDelete
        showDialog();
    });

    // Create the dialog popup
    function showDialog(button) {
        $("#dialog-confirm").dialog({
            resizable: false,
            height: "auto",
            width: 400,
            modal: true,
            buttons: {
                "Remove": function() {
                    $(button).click(); // This should click imgbtnDelete
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        });
    }
});

HTML 用于弹出

<div style="display: none;">
    <div id="dialog-confirm" title="Remove Item?">
      <p>Are you sure you want to remove this item?</p>
    </div>
</div>

注意：此示例仅用于说明目的。 您需要尝试使用您的解决方案才能使其正常工作。