我建议您只需将一个按钮放入 GV 并连接该按钮即可执行删除操作。
您可以将标准按钮或链接按钮放入网格中(没关系)。
但是,Linkbutton 很好,因为我们可以包含一个引导字形图标。
所以,让我们使用链接按钮
所以,用 GV 标记说:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CssClass="table table-hover" Width="50%"
DataKeyNames="ID">
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="HotelName" HeaderText="HotelName" />
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:LinkButton ID="cmdDelete" runat="server" CssClass="btn ">
<span aria-hidden="true" class="glyphicon glyphicon-trash"></span>
Delete
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
好的,我们加载网格的代码可以是:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
LoadGrid()
End If
End Sub
Sub LoadGrid()
Using conn As New SqlConnection(My.Settings.TEST4)
Using cmdSQL As New SqlCommand("SELECT * from tblHotels Order by HotelName ", conn)
conn.Open()
Dim rst As New DataTable
rst.Load(cmdSQL.ExecuteReader)
GridView1.DataSource = rst
GridView1.DataBind()
End Using
End Using
End Sub
我们现在有了这个:
好的,让我们连接服务器端的删除事件 - 所以我们输入标记 OnClick,intel-sense 将提供为按钮创建事件的选项
例如:选择像这样创建新事件:
好的,翻到后面的代码,我们连接删除事件
Protected Sub cmdDelete_Click(sender As Object, e As EventArgs)
Dim btn As LinkButton = sender
Dim gRow As GridViewRow = btn.NamingContainer
Dim PKID As Integer = GridView1.DataKeys(gRow.RowIndex).Item("ID")
Dim strSQL As String = "DELETE FROM tblHotels WHERE ID = " & PKID
Using conn As New SqlConnection(My.Settings.TEST4)
Using cmdSql As New SqlCommand(strSQL, conn)
conn.Open()
cmdSql.ExecuteNonQuery()
End Using
End Using
End Sub
注意我们如何使用 DataKeys。 DataKeys 非常好,因为它意味着 GV 将行 PK,但我们不必在 GV 标记中包含 PK 行。这不仅消除了将额外的 Eval("ID") 作为隐藏的 GV 列的需要,而且还增强了安全性 - 因为我们从不向 Web UI 显示、呈现、公开或提供 PK 值 - 这也消除了任何一种对脚本的黑客攻击,甚至试图弄乱数据库 PK 行 ID。
接下来,我们需要弹出确认对话框。正如我们所知,您可以向任何平面 jane asp .net 按钮(或链接按钮)添加 OnClientClick 事件。如果该事件返回 true,则发生按钮单击 - 如果返回 false,则服务器端按钮单击不会触发/运行后面的代码。
所以,最简单的设置可能是这样的:
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:LinkButton ID="cmdDelete" runat="server" CssClass="btn"
OnClick="cmdDelete_Click"
OnClientClick="return mydelprompt()" >
<span aria-hidden="true" class="glyphicon glyphicon-trash"></span>
Delete
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<script>
function mydelprompt() {
return confirm ("Delete this hotel?")
}
</script>
现在如果我们点击删除按钮,我们会得到:
现在,以上内容确实是您所需要的。但是我发现浏览器的内置“确认”或警报()框非常难看。 (为什么它们没有被清理干净,变得又漂亮又漂亮,这超出了我的范围!!!!)。
但是,我们可以假设我们有 jQuery,所以我建议添加 jQuery.UI,从那时起我们可以创建非常漂亮的自定义对话框,并使用它来代替 js 中的“confirm()” -看起来很业余。
那么,假设我们引入 jQuery.UI?那么,我们可以使用这个标记:
对于客户端,我们现在有这个:
OnClientClick="return mydelprompt(this)" >
我们的 js 函数(和我们的提示符 div)看起来像这样:
</asp:GridView>
<div id="mydeltext" style="display:none">
<h4><i>Delete this hotel</i></h4>
<h4><i>(can't be undone)</i></h4>
</div>
<script>
var mydelok = false
function mydelprompt(btn) {
if (mydelok) {
mydelok = false
return true
}
myDialog = $("#mydeltext")
myDialog.dialog({
title: "Confrim Hotel Delete",
modal: true,
appendTo: "form",
position: { my: "right top", at: "right bottom", of: btn },
buttons: {
Delete: function () {
myDialog.dialog('close')
mydelok = true
btn.click()
},
cancel: function () {
myDialog.dialog('close')
}
}
})
return false
}
</script>
现在我们得到了这个:
所以,总而言之,我们真的不需要 js 从行中“获取”或获取值,因为我们背后的 GV 代码实际上具有获取 PK 行值的能力。
但是,我想,我们仍然可能希望从 GV 行中获得一些价值 - 比如说我们想将酒店名称放在那个对话框中 - 好主意,因为用户可能会碰到他们的屏幕或触摸板 - 你有一个对话框提示,但在哪一行?
好的,在我的 GV 中,cells() 没有获得 id,但我们可以用这个标记替换酒店:
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:TemplateField HeaderText="Hotel Name">
<ItemTemplate>
<asp:Label ID="txtHotel" runat="server"
Text='<%# Eval("HotelName") %>' >
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:LinkButton ID="cmdDelete" runat="server" CssClass="btn"
OnClick="cmdDelete_Click"
OnClientClick="return mydelprompt(this)" >
<span aria-hidden="true" class="glyphicon glyphicon-trash"></span>
Delete
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
好的,我们把我们的“div”设计成这样:
<div id="mydeltext" style="display:none">
<h4><i>Delete this hotel (can't be undone)</i></h4>
Hotel to delete:
<br />
<asp:Label ID="txtHotelDel" runat="server" Text="" ClientIDMode="Static"></asp:Label>
</div>
<script>
var mydelok = false
function mydelprompt(btn) {
if (mydelok) {
mydelok = false
return true
}
var txtHotel = btn.getAttribute("ID").replace("cmdDelete","txtHotel")
$("#txtHotelDel").text($('#' + txtHotel).text())
myDialog = $("#mydeltext")
myDialog.dialog({
title: "Confrim Hotel Delete",
modal: true,
width: '350',
appendTo: "form",
closeText: "",
position: { my: 'center', at: 'center', of: window },
buttons: {
Delete: function () {
myDialog.dialog('close')
mydelok = true
btn.click()
},
cancel: function () {
myDialog.dialog('close')
}
}
})
return false
}
</script>
既然我们通过了按钮 click (this),那么我们只需将 cmdDelete 与 txtHotel 交换(替换),我们现在就有了酒店名称。
现在的结果是这样的:
所以上面显示了我们如何从客户端代码中的给定行中提取其他值。