為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收集整理，歡迎訪問。
