使用 jquery 对话框删除 gridview 行

Question

一切正常，只是删除行时没有发生回发。我在 OnRowDeleting 和 OnRowDataBound 中放置了一个调试器中断唯一的区别是您没有 Ajax 更新面板和脚本管理器。下面是 Gridview 的图像。当我点击确定按钮时没有任何反应。

下面是我在新页面上的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="SidePanelGridViewTest.WebForm3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:IdDatabase %>" 
                    SelectCommand="SELECT TOP 5 ProductID, ProductName FROM [TableA]">
</asp:SqlDataSource>
            <asp:ScriptManager ID="scMan" runat="server"></asp:ScriptManager>
 <asp:UpdatePanel ID="updPnl" runat="server" UpdateMode="Always">
            <ContentTemplate>

<asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="ProductID" DataSourceID="SqlDataSource1" OnRowDeleting="OnRowDeleting"  OnRowDataBound="OnRowDataBound" >
    <Columns>
        <asp:BoundField DataField="ProductID" HeaderText="ProductID" 
            InsertVisible="False" ReadOnly="True"  />
        <asp:BoundField DataField="ProductName" HeaderText="ProductName"
             />
         <asp:TemplateField ShowHeader="False" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" ItemStyle-Width="150px" ControlStyle-CssClass="ss-row" >
                        <ItemTemplate>
                              <asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png" ToolTip="Click To Delete" AlternateText="Click To delete" OnClientClick="myclick(this.id);return false;"/>
                              <asp:Button ID="MyDelete" runat="server" Text="del" CommandName="MyDelete" CommandArgument='<%# Eval("ProductID") %>' style="display:none"/>

                       </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    </asp:GridView>
 </ContentTemplate>
     </asp:UpdatePanel>
           
        </div>
        <div id ="mydialog" style="display:none" runat="server">
              <h2>Do you really want to delete?</h2>
        </div>
        <script>
    function myclick(mycontrolid) {
        var mydiv = $('#mydialog');

        mydiv.dialog({
            autoOpen: false, modal: true, title: 'Delete?', width: '25%',
            position: { my: 'top', at: 'top+150' },
            buttons: {
                'ok': function () {
                    vbtns = '#' + mycontrolid.replace('imgbtnDelete', 'MyDelete');
                    $(vbtns).click();
                },
                'cancel': function () {
                    mydiv.dialog('close');
                }
            }
        });
        mydiv.dialog('open');
    }

</script>



    </form>
</body>
</html>

下面是网格视图的图像：

当我在删除弹出窗口中单击“确定”按钮时。不会发生回发。我在 OnRowDeleting 和 OnRowDataBound 上都有调试器中断。当我开始运行代码时，调试器在 OnRowDataBound 上中断，但是单击弹出窗口中的“确定”按钮不会导致回发。

下面是背后的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace SidePanelGridViewTest
{
    public partial class WebForm3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void OnRowDeleting(object sender, GridViewDeleteEventArgs e)
        {
            int index = Convert.ToInt32(e.RowIndex);


        }

        protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
        {
            string x = "Test";

        }
    }
}

Answer 1

好吧，我要咬人了

原因是我经历了这个，工作示例太可怕了——超越痛苦！！

所以，让我们来解决这个问题。

首先，不像 JavaScript (js)“警告”或“确认”？

大多数网络内容（包括 jQuery.UI）不会停止，也不会阻止代码。

这意味着我们的“图像”按钮“点击”不能用于 return true 或 false，因为我们的对话框不等待。因此，我们必须获得对话框的结果，然后运行删除按钮代码。

以上给出？

那么最简单的就是在该网格中放置一个隐藏的删除按钮。然后我们 jQuery.UI 为我们“点击”那个删除按钮。

jQuery.ui 期望在 jQuery selector 上“操作”。这意味着 $(“请 select 这件事”)

通常是一些控件或按钮，但对于对话框，最常见的是放置在页面上的 div（并隐藏它 --- 仅供参考：请注意我们如何隐藏 jQuery.UI 对话框“div”以及我们如何使用 style="display:none") 隐藏删除按钮。

所以，让我们添加我们的删除按钮 – 在图像按钮的正下方（顺便说一下，您可以在此处使用 asp.net 按钮 – 您不仅限于图像按钮）。

因此，图像按钮的唯一工作是现在调用我们的 jquery 对话框 – 但它不能运行我们的服务器端删除代码。

所以，让我们添加删除按钮。

我们将删除内容从图像按钮移至此按钮。

所以，我们现在有了这个：

<asp:TemplateField>
    <ItemTemplate>
        <asp:ImageButton ID="imgbtnDelete" runat="server"
           ImageUrl="~/Images/delete1.png" ToolTip="Click To Delete"
           AlternateText="Click To delete"
           OnClientClick="myclick(this.id);return false;"
        />

    <asp:Button ID="MyDelete" runat="server" Text="del" 
           CommandName="MyDelete"
           CommandArgument='<%# Eval("CartID") %>' 
           style="display:none"/>

  </ItemTemplate>
</asp:TemplateField>

因此，我们将 RETURN 为 false，并且不会让该图像按钮服务器端单击运行，或执行 post-back。

所以，改变图像按钮（调用我们简单的js函数。

注意我们如何将功能和信息移动到隐藏的“我的删除”按钮。

仅供参考：请记住，在网格视图中，commandName 在这里具有特殊含义。所以，如果我们同时填写 CommandName 和 CommandArgument，那么 GridView 的“行命令”事件就会触发！！！

看起来你现在无论如何都在这样做（使用行命令）。

这是脚本 + 标记：

</asp:GridView>   ---- end of your gridview

<div id ="mydialog" style="display:none" runat="server">
     <h2>Do you really want to delete?</h2>
</div>

<script>
   function myclick(mycontrolid) {
      var mydiv = $('#mydialog');

      mydiv.dialog({
         autoOpen: false, modal: true, title: 'Delete?', width: '25%',
         position: { my: 'top', at: 'top+150' },
          buttons: {
             'ok': function () {
              vbtns = '#' + mycontrolid.replace('imgbtnDelete', 'MyDelete');
              $(vbtns).click();
              },
              'cancel': function () {
                        mydiv.dialog('close');
               }
          }
       });
       mydiv.dialog('open');
    }

</script>

这就是你所需要的（删除你拥有的其他“初始化”js 垃圾）。

结果应如下所示：

以上是实现此功能所需的最少代码。有十几种不同的方法可以做到这一点。不过上面是我觉得挺简单的。

所以，我已经提出了上述建议，因为我们在 js 中对我们的删除按钮执行了“click()”，因此您在命令行事件中的现有代码存根可以保留在原位，因为您无疑拥有现在。（因此此处建议的解决方案考虑了您现有的设置）。

最后的衡量标准是什么？我们的删除命令将如下所示：

Protected Sub GridView1_RowCommand(sender As Object, e As GridViewCommandEventArgs) Handles GridView1.RowCommand

    If e.CommandName = "MyDelete" Then

        Using cmdSQL As New SqlCommand("DELETE FROM tblHotels where ID = " & e.CommandArgument,
                    New SqlConnection(My.Settings.Test3))
            cmdSQL.Connection.Open()
            cmdSQL.ExecuteNonQuery()
        End Using

        LoadGrid()    ' re-load the grid
    End If
End Sub

请注意，您可能确实调用了代码以在第一个 post 上加载网格（而不是额外的 post 后退，但如上所示，当您删除时，您需要重新加载网格，因为它确实有一个视图状态，并且没有重新加载网格视图，那么删除的行将保留在视图中。

编辑：----------------

看起来 posted 代码不包含 jQuery.UI。

您需要 jQuery，还需要 jQuery.UI。它们是两个独立的库。

此外，jQuery.UI 还需要一个样式 sheet，并且它必须放在 jQuery.UI 引用之前。

屏幕截图和工作测试代码，从 asp.net 网络表单页面中的“正文”标记开始，如下所示：

<body>
<form id="form1" runat="server">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
                <asp:BoundField DataField="HotelName" HeaderText="HotelName" SortExpression="HotelName" />
                <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Button ID="Button2" runat="server" Text="Button" 
                            OnClientClick="myclick(this.id);return false;"
                           />

                        <asp:Button ID="MyDelete" runat="server" Text="Button3" 
                            CommandName="MyDelete"
                            CommandArgument='<%# Eval("ID") %>' 
                            style="display:none"/>

                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

        <div id ="mydialog" style="display:none" runat="server">
            <h2>Do you really want to delete?</h2>
        </div>

    <script>

        function myclick(mycontrolid) {

            var mydiv = $('#mydialog');

            mydiv.dialog({
                autoOpen: false, modal: true, title: 'Delete?', width: '25%',
                position: { my: 'top', at: 'top+150' },
                buttons: {
                    'ok': function () {
                        vbtns = '#' + mycontrolid.replace('Button2', 'MyDelete');
                        $(vbtns).click();
                    },
                    'cancel': function () {
                        mydiv.dialog('close');
                    }
                }
            });
            mydiv.dialog('open');
        }

    </script>
</form>
</body>

请注意，我确实将 jQuery 和 jQuery.UI 脚本引用放在了表单标签内，但用户通常会将引用放在“head”标签内。

但为了便于 posting - 我在“表单”标签中包含了 jQuery 和 jQuery.UI 引用。

使用 jquery 对话框删除 gridview 行

gridview row delete with jquery dialog

c#

asp.net

webforms

jquery-ui