时间戳

首页 > 解决方案 > 使用 jquery 对话框删除 gridview 行

c# - 使用 jquery 对话框删除 gridview 行

问题描述

一切正常，除了当我删除行时没有发生回发。我在 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>

下面是gridview的图像：

在此处输入图像描述

当我在删除弹出窗口中单击“确定”按钮时。回发不会发生。我在 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";

        }
    }
}

标签： c#asp.netjquery-uiwebforms

解决方案

好吧，我要咬了。

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

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

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

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

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

上面给出的？

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

jQuery.ui 期望在 jQuery 选择器上“操作”。这意味着 $(“请选择这个东西”)

通常是一些控件或按钮，但对于对话框，最常见的是您放置在页面上的 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>

因此，我们将返回 false 并且不让该图像按钮服务器端单击运行，或执行回发。

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

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

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

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

这是脚本+标记：

</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()”，因此您在 on-command 行事件中的现有代码存根可以保留在原位，因为您现在无疑拥有它。（因此这里建议的解决方案考虑了您现有的设置）。

最后的好措施？我们的删除命令将如下所示：

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

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

编辑： - - - - - - - -

看起来发布的代码不包括 jQuery.UI。

你既需要 jQuery，也需要 jQuery.UI。它们是两个独立的库。

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

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

<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”标记内。

但为了便于发布 - 我在“表单”标签中包含了 jQuery、广告 jQuery.UI 引用。

推荐阅读