C# 使用jquery对话框删除gridview行_C#_Asp.net_Jquery Ui_Webforms

C# 使用jquery对话框删除gridview行

c# asp.net jquery-ui

C# 使用jquery对话框删除gridview行,c#,asp.net,jquery-ui,webforms,C#,Asp.net,Jquery Ui,Webforms,除了删除该行时不会发生回发之外，一切都正常。我在OnRowDeleting和OnRowDataBound中放置了一个调试器中断唯一的区别是没有Ajax更新面板和脚本管理器。下面是Gridview的图像。单击“确定”按钮时不会发生任何事情以下是我在新页面上的代码： <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherit

除了删除该行时不会发生回发之外，一切都正常。我在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>

好的，我要咬了

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

那么，让我们来完成这个

首先，不同于JavaScript js的“警报”或“确认”

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

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

如上所述

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

ui期望在jQuery选择器上“操作”。这意味着$“请选择此项”

通常这是一些控件或按钮，但对于对话框，最常见的情况是您在页面上放置一个div并将其隐藏供参考：注意我们是如何隐藏jQuery.UI对话框div的，以及我们是如何使用style=display:none隐藏delete按钮的

所以，让我们添加我们的删除按钮–在图像按钮的正下方，顺便说一下，您可以在这里使用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>

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

编辑：--------

发布的代码似乎不包含jQuery.UI

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

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

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

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

<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、ad jQuery.UI引用。

谢谢您的解释。让我试试这个，我会给你回复的。给我几小时，我试图实现你的代码，但当我点击del按钮或点击删除时，什么都没有发生。我对我的帖子进行了更改，还发布了我看到的图片。作为测试，然后在网格之外，简单地放置一个平面，然后弹出一个测试对话框。事实上，创建一个空白网页-删除一个按钮，添加div，然后测试并尝试jQuery.UI对话框。我必须假设您运行了一些测试代码，并使jQuery.UI正常工作。只有在您有了一个带有简单按钮和jQuery.UI对话框的简单测试页面之后，才可以使用网格在该页面上进行相同的尝试。如前所述，大多数（如果不是全部的话）web代码不会阻塞或等待。因此，您不能弹出jQuery.UI对话框并获取返回值。你必须弹出对话框，然后根据用户的选择运行代码看看你有什么？您需要同时包含jQuery和jQuery.ui。脚本引用中缺少jQuery.ui。现在还不清楚你为什么要使用手机版本。我将从一个干净的测试网页开始——简单的按钮、简单的div和弹出对话框的简单脚本。在你在一个有网格和各种各样东西的复杂页面上疯狂工作之前，让它工作起来。我会把手机里的东西都扔了，直到你第一次打开一个干净简单的页面并开始运行。所以，只要看看您所拥有的，您缺少的jQuery.UI引用。我会把我的满分贴在这里。谢谢你的帮助。除了删除行时没有发生回发之外，其他一切都正常。我在原始帖子中发布了我的更新代码和图片。

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

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