使用jquery对话框删除网格视图行
除了在我删除行时没有发生回发之外，一切都运行正常。我在OnRowDeleting和OnRowDataBound中放了一个调试器中断，惟一的区别是没有Ajax update面板和script Manger。下面是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";
}
}
}回答 1
Stack Overflow用户
发布于 2021-01-14 13:57:24
好了，我要咬人了。
原因是我经历了这些，工作的例子是可怕的-超越了痛苦！！
所以，让我们一起来解决这个问题。
首先，与JavaScript (js)的“警报”或“确认”不同？
包括jQuery.UI在内的大多数web应用程序都不会停止，也不会阻止代码。
这意味着我们的“image”按钮“on click”不能用来返回true或false，因为我们的对话框不需要等待。因此，我们必须获得对话框的结果，然后运行删除按钮代码。
上面给出的？
然后，最简单的方法就是在该网格中放置一个隐藏的删除按钮。然后我们让jQuery.UI为我们“点击”那个删除按钮。
jQuery.ui期望在jQuery选择器上“操作”。这意味着$(“请选择这个东西”)
通常是一些控件或按钮，但对于对话框，最常见的是你放在页面上的div (并隐藏它-仅供参考:注意我们如何隐藏jQuery.UI对话框"div“以及如何用style=”display:none“隐藏删除按钮)。
因此，让我们添加我们的删除按钮--就在图像按钮的正下方(顺便说一句，你可以在这里使用asp.net按钮--你并不局限于图像按钮)。
所以，图像按钮的唯一工作就是调用我们的jquery对话框--但是它不能运行我们的服务器端删除代码。
因此，让我们添加delete按钮。
我们将删除内容从图像按钮移动到此按钮。
所以，我们现在有了这个：
<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，且不会让图像按钮在服务器端单击run，或执行回发。
因此，更改图像按钮(以调用我们简单的js函数。
请注意，我们是如何将特性和信息移动到隐藏的"my delete“按钮的。
仅供参考:请记住，在网格视图中，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中对delete按钮执行了“click()”，因此您在on-command row事件中的现有代码存根可以保留在适当的位置，就像您现在所拥有的一样。(因此，这里建议的解决方案考虑到了您现有的设置)。
最后的好办法是什么？我们的delete命令将如下所示：
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 web表单页面中的"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.UI”标签中包含了jQuery，ad jQuery.UI引用。
https://stackoverflow.com/questions/65690602
复制相似问题
腾讯云开发者
