【问题标题】:gridview row delete with jquery dialog使用 jquery 对话框删除 gridview 行
【发布时间】:2021-01-12 19:18:29
【问题描述】:

除了删除行时没有发生回发之外,一切正常。我在 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.net jquery-ui webforms


    【解决方案1】:

    好吧,我要咬了。

    原因是我经历了这个,而工作示例是可怕的——超越痛苦!!

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

    首先,不像 JavaScript (js) “警报”或“确认”?

    包括 jQuery.UI 在内的大多数 Web 内容不会停止,也不会阻止代码。

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

    上面给出的?

    最简单的方法是在该网格中放置一个隐藏的删除按钮。然后我们让我们的 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”事件就会触发!!!

    看起来你现在正在这样做(使用行命令)。

    这里是脚本+标记:

    </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 引用。

    【讨论】:

    • 感谢您的解释。让我试试这个,我会回复你的。给我几个小时
    • 我尝试实现您的代码,但当我单击 del 按钮或单击删除时没有任何反应。我对我的帖子进行了更改,并发布了我所看到的图像。
    • 作为测试,然后在网格之外,简单的放置一个平面 jane asp.net 按钮,然后弹出一个测试对话框。事实上创建一个空白网页 - 放下一个按钮,添加 div 并测试 + 尝试 jQuery.UI 对话框。我不得不假设您运行一些测试代码并让 jQuery.UI 正常工作。只有在你有一个简单的测试页面和一个简单的按钮和 jQuery.UI 对话框工作之后,然后在该页面上尝试相同的网格。如前所述,大多数(如果不是所有)网络代码都不会阻塞或等待。所以你不能弹出一个 jQuery.UI 对话框并获得一个返回值。您必须弹出对话框,然后根据用户选择运行代码
    • 只看你有什么?您需要同时包含 jQuery 和 jQuery.ui。您在脚本引用中缺少 jQuery.ui。而且不清楚您为什么使用移动版本。我将从一个干净的测试网页开始——简单的按钮、简单的“div”和一个弹出该对话框的简单脚本。在你在一个带有网格和各种东西的复杂页面上疯狂之前,先把它工作起来。我会转储移动设备,直到您第一次启动并运行一个干净的简单页面。所以,看看你所拥有的,你缺少 jQuery.UI 参考。我将在此处发布完整的标记。
    • 感谢您的帮助。一切正常,除了当我删除行时没有发生回发。我将更新后的代码与原始帖子中的图像一起发布。
    猜你喜欢
    • 2012-12-18
    • 2016-06-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-16
    • 2012-02-11
    • 1970-01-01
    • 2017-01-19
    相关资源
    最近更新 更多