如何解决使用 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";
}
}
}
解决方法
好的，我要咬一口了。
原因是我经历了这一切，工作示例非常可怕 - 超越痛苦！！
那么，让我们解决这个问题。
首先，不像 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()”，因此您在命令行事件中现有的代码存根可以保留在原地，因为您现在无疑拥有它. （因此这里建议的解决方案会考虑您现有的设置）。
最后的好措施是什么？我们的删除命令将如下所示：
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,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 引用。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
