为DataGrid添加确认删除的对话框
2024-07-21 02:23:07
供稿：网友
在删除数据前进行确认是一个非常友好的做法。在本文里，我们就讨论利用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
本文来源于网页设计爱好者web开发社区http://www.html.org.cn收集整理，欢迎访问。
