为DataGrid添加确认删除的对话框

80酷酷网    80kuku.com

  datagrid|对话框在删除数据前进行确认是一个非常友好的做法。在本文里,我们就讨论利用TemplateColumn和Button服务端控件实现这种功能的方法。

DeleteIt.aspx

<% Page Language="vb" AutoEventWireup="false" Codebehind="DeleteIt.aspx.vb" Inherits="aspxWeb.DeleteIt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio .NET 7.0" name="GENERATOR">
<meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</HEAD>
<body>
<asp:label id="Label1" runat="Server"></asp:label>
<form runat="server" ID="Form1">
<asp:DataGrid id="myDataGrid" OnItemCreated="DataGrid_ItemCreated"
DataKeyField="Title" AutoGenerateColumns="False" runat="server">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:Button id="btnDelete" runat="Server"></asp:Button>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="Title"></asp:BoundColumn>
<asp:BoundColumn DataField="CreateDate" DataFormatString="{0:yyyy-M-d}"></asp:BoundColumn>
</Columns>
</asp:DataGrid>
</form>
</body>
</HTML>

后代码:DeleteIt.aspx.vb

Imports System.Web
Imports System.Collections
Imports System
Imports System.Data
Imports System.Data.OleDb
Imports System.Web.UI.WebControls

Public Class DeleteIt
Inherits System.Web.UI.Page
Protected WithEvents Label1 As System.Web.UI.WebControls.Label
Protected WithEvents myDataGrid As System.Web.UI.WebControls.DataGrid

#Region " Web 窗体设计器生成的代码 "

'该调用是 Web 窗体设计器所必需的。
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

End Sub

Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: 此方法调用是 Web 窗体设计器所必需的
'不要使用代码编辑器修改它。
InitializeComponent()
End Sub

#End Region

Sub Page_Load(ByVal Sender As Object, ByVal e As EventArgs) Handles MyBase.Load
myDataGrid.HeaderStyle.Font.Bold = True
myDataGrid.HeaderStyle.HorizontalAlign = HorizontalAlign.Center
myDataGrid.Columns(0).HeaderText = "操作"
myDataGrid.Columns(1).HeaderText = "标题"
myDataGrid.Columns(2).HeaderText = "发布日期"

If Not IsPostBack Then
Dim strCn As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("Test.mdb")
Dim strSql As String
strSql = "SELECT Top 15 objectGuid,Title,CreateDate FROM Document Order By CreateDate Desc"
Dim cn As New OleDbConnection(strCn)
cn.Open()
Dim cmd As New OleDbCommand(strSql, cn)

myDataGrid.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection)
myDataGrid.DataBind()
cmd.Dispose()
cmd = Nothing
cn.Close()
cn.Dispose()
cn = Nothing
End If
End Sub

Sub DataGrid_ItemCreated(ByVal Sender As Object, ByVal e As DataGridItemEventArgs)_
Handles myDataGrid.ItemCreated
Select Case e.Item.ItemType
Case ListItemType.Item, ListItemType.AlternatingItem, ListItemType.EditItem
Dim myDeleteButton As Button
myDeleteButton = e.Item.FindControl("btnDelete")
myDeleteButton.Text = "删除此行"
myDeleteButton.Attributes.Add("onclick", "return confirm('您真的要删除第 "_
+ e.Item.ItemIndex.ToString + " 行吗?');")
End Select
End Sub

Private Sub myDataGrid_ItemCommand(ByVal source As Object, _
ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)_
Handles myDataGrid.ItemCommand
Response.Write("您要删除的是:<font color=red>" + e.Item.Cells(1).Text + "</font>")
e.Item.BackColor = System.Drawing.Color.Ivory
End Sub
End Class



在DataGrid里添加确认删除的对话框,第二个办法就是利用ButtonColumn,这个办法与第一个方法不同的是:我们不能使用FindControl方法来引用Button控件,这是因为,我们不知道由ButtonColumn产生的每个Button控件的ID,我们这里可以使用TableCell来引用TableCell里的Button控件,一旦引用了Button控件,我们就可以用Attributes集合来添加Onclick事件。源代码如下:

DeleteIt2.aspx

<% Page Language="vb" AutoEventWireup="false" Codebehind="DeleteIt2.aspx.vb"
Inherits="aspxWeb.DeleteIt2"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>DeleteIt2</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:Label id="Label1" runat="server"></asp:Label>
<asp:DataGrid id="myDataGrid" OnItemCreated="DataGrid_ItemCreated" runat="server"
OnDeleteCommand="MyDataGrid_Delete" DataKeyField="Title" AutoGenerateColumns="False">
<Columns>
<asp:ButtonColumn CommandName="Delete" />
<asp:TemplateColumn>
<ItemTemplate>
<asp:Label runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Title") %>' />
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<ItemTemplate>
<asp:Label runat="server" Text='<%# DataBinder.Eval(Container.DataItem,_
"CreateDate","{0:yyyy-M-d}") %>' />
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</form>
</body>
</HTML>

DeleteIt2.aspx.vb

Imports System
Imports System.Web
Imports System.Data
Imports System.Data.OleDb
Imports System.Web.UI.WebControls

Public Class DeleteIt2
Inherits System.Web.UI.Page
Protected WithEvents Label1 As System.Web.UI.WebControls.Label
Protected WithEvents myDataGrid As System.Web.UI.WebControls.DataGrid

#Region " Web 窗体设计器生成的代码 "

'该调用是 Web 窗体设计器所必需的。
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

End Sub

Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs)_
Handles MyBase.Init
'CODEGEN: 此方法调用是 Web 窗体设计器所必需的
'不要使用代码编辑器修改它。
InitializeComponent()
End Sub

#End Region

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)_
Handles MyBase.Load
'在此处放置初始化页的用户代码
myDataGrid.HeaderStyle.HorizontalAlign = HorizontalAlign.Center
myDataGrid.HeaderStyle.Font.Bold = True
myDataGrid.HeaderStyle.BackColor = System.Drawing.Color.Ivory
myDataGrid.Columns(0).HeaderText = "操作"
myDataGrid.Columns(1).HeaderText = "标题"
myDataGrid.Columns(2).HeaderText = "创建日期"

If Not IsPostBack Then
Dim strCn As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" _
+ Server.MapPath("Test.mdb")
Dim strSql As String = "SELECT Top 15 objectGuid,Title,CreateDate"_
+ " FROM Document Order By CreateDate Desc"
Dim cn As New OleDbConnection(strCn)
cn.Open()
Dim cmd As New OleDbCommand(strSql, cn)

myDataGrid.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection)
myDataGrid.DataBind()
cmd.Dispose()
cmd = Nothing
cn.Close()
cn.Dispose()
cn = Nothing
End If
End Sub

Public Sub DataGrid_ItemCreated(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles myDataGrid.ItemCreated
Select Case e.Item.ItemType
Case ListItemType.Item, ListItemType.AlternatingItem, ListItemType.EditItem
Dim myTableCell As TableCell
myTableCell = e.Item.Cells(0)
Dim myDeleteButton As LinkButton
myDeleteButton = myTableCell.Controls(0)
myDeleteButton.Attributes.Add("onclick", "return confirm('您真的要删除此行吗?');")
myDeleteButton.Text = "删除此行"
End Select
End Sub
Sub MyDataGrid_Delete(ByVal Sender As Object, ByVal E As DataGridCommandEventArgs)
Label1.Text = "你要删除的是:<font color=red> " _
+ myDataGrid.DataKeys(CInt(E.Item.ItemIndex)) + "</font>"
E.Item.BackColor = System.Drawing.Color.Tomato
End Sub
End Class

在DataGrid里添加确认删除的对话框,第三个办法就是利用Page对象的RegisterOnSubmitStatement方法。Page.RegisterOnSubmitStatement方法能够使页面能够访问客户端 OnSubmit 事件。脚本应该是注册在其他地方的对客户端代码的函数调用。源代码如下:

DeleteIt3.aspx

<% Page Language="vb" AutoEventWireup="false" Codebehind="DeteleIt3.aspx.vb" Inherits="aspxWeb.DeteleIt3"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>DeteleIt3</title>
<meta content="Microsoft Visual Studio .NET 7.0" name="GENERATOR">
<meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
<asp:label id="Label1" runat="Server"></asp:label>
<form id="Form1" runat="server">
<asp:datagrid id="myDataGrid" runat="server" AutoGenerateColumns="True" DataKeyField="Title">
<Columns>
<asp:ButtonColumn CommandName="Delete" ButtonType="PushButton" />
</Columns>
</asp:datagrid>
</form>
</body>
</HTML>

后代码DeteleIt3.aspx.vb

Imports System.Web
Imports System.Data
Imports System.Data.OleDb

Public Class DeteleIt3
Inherits System.Web.UI.Page
Protected WithEvents Label1 As System.Web.UI.WebControls.Label
Protected WithEvents myDataGrid As System.Web.UI.WebControls.DataGrid

#Region " Web 窗体设计器生成的代码 "

'该调用是 Web 窗体设计器所必需的。
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

End Sub

Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: 此方法调用是 Web 窗体设计器所必需的
'不要使用代码编辑器修改它。
InitializeComponent()
End Sub

#End Region

Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
'在此处放置初始化页的用户代码
If Not IsPostBack Then
Dim strCn As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("Test.mdb")
Dim strSql As String = "SELECT Top 15 Title,CreateDate FROM Document Order By CreateDate Desc"
Dim cn As New OleDbConnection(strCn)
cn.Open()
Dim cmd As New OleDbCommand(strSql, cn)
myDataGrid.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection)
myDataGrid.DataBind()
cmd.Dispose()
cmd = Nothing
cn.Close()
cn.Dispose()
cn = Nothing
End If
Page.RegisterOnSubmitStatement("OnSubmit", "{return confirm('您真的要删除此行吗??') } ")
End Sub

Sub myDataGrid_ItemCreated(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles myDataGrid.ItemCreated
Select Case e.Item.ItemType
Case ListItemType.Item, ListItemType.AlternatingItem, ListItemType.EditItem
Dim myTableCell As TableCell
myTableCell = e.Item.Cells(0)
Dim myDeleteButton As Button
myDeleteButton = myTableCell.Controls(0)
myDeleteButton.Text = "删除此行"
Case ListItemType.Header
e.Item.Font.Bold = True
e.Item.HorizontalAlign = HorizontalAlign.Center
e.Item.BackColor = System.Drawing.Color.Ivory
e.Item.Cells(0).Text = "操作"
e.Item.Cells(1).Text = "文章标题"
e.Item.Cells(2).Text = "发布日期"
End Select
End Sub

Private Sub myDataGrid_DeleteCommand(ByVal source As Object, _
ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles myDataGrid.DeleteCommand
Label1.Text = "您删除的是:<font color=red>" + myDataGrid.DataKeys(CInt(e.Item.ItemIndex)) + "</font>"
e.Item.BackColor = System.Drawing.Color.Tomato
End Sub

End Class


分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: