DataList控件批量刪除數據方法的實現

袁芳　汪衛平

摘要：在Web應用程序開發中，DataList數據綁定控件使用頻率比較高，但DataList控件沒有內置的刪除功能，需要手工編寫刪除代碼。批量刪除數據在網站和管理系統中應用比較廣泛，本文介紹了利用Javascript和ASP.NET技術向DataList控件增加全選、取消選擇的功能，以及實現單條數據刪除和將選中的多條數據進行批量刪除的方法。

關鍵詞：DataList；批量刪除數據；控件

中圖分類號：TP391 文獻標識碼：A

Abstract ： In the development of the web application， the DataList controls is used frequently，but it hasnt built_in delete function which needs to manually write delete code.Batch delete data in the web and management system is widely used in the application， This paper introduces the functions of selecting and deselecting for DataList control， also presents the realization of a single data delete method and batch delete the multiple selected data.

Key words： DataList；Batch delete Data； Control

0引言

隨著網絡技術的飛速發展，在Web應用中，基于ASP.NET動態網站制作技術應用得越來越廣泛。ASP.NET4.0中提供了多種數據綁定控件，用于在Web頁中顯示數據，這些數據綁定控件具有豐富的功能，如分頁、排序、刪除、更新和插入等功能。其中的DataList控件用得頻率比較高，但該控件沒有刪除、排序、分頁、編輯的內置功能，也并沒有為用戶提供數據的復選、全選以及反選等相關功能的接口[1]，這些功能需要編程人員自行編寫，本文介紹了對DataList如何實現復選框全選和取消選擇數據的功能以及實現單條數據刪除和將選中的數據進行批量刪除的方法。

1DataList控件概述

DataList控件是功能強大的數據綁定控件，該控件能夠以某種預期設定的模板格式循環顯示多條數據，這種模板格式是可以根據實際需要進行自定義的。DataList控件能夠通過屬性控制布局樣式，比如流式布局（即依次排列）或表格式布局，并且還可以設置垂直方向或水平方向重復顯示多少條數據記錄[2]。

DataList控件與GridView、DetailsView、ListView控件有著明顯區別，最為突出的特點就是一定要通過模板來定義數據的顯示格式。DataList控件支持7種類型的模板，分別為ItemTemplate（項模板）、AlternatingItemTemplate（交替項模板）、HeaderTemplate（標題模板）、FooterTemplate（腳注模板）、SeparatorTemplate（分隔符模板）、EditItemTemplate（編輯項模板）和 SelectedItemTemplate（選定項模板）[3]，正因為DataList控件顯示數據具有高度的靈活性，這就給開發人員提供了充分的個人才能展現和發揮空間。

2DataList批量刪除數據的設計與實現

2.1 Datalist控件模板列設計

本案例采用Visual Studio 2010開發環境，在新建的網站內，添加asp.net頁面，從工具箱的數據欄中拖拽一DataList控件到該頁面中，單擊DataList控件右上方的的任務按鈕，選擇自動套用格式中“傳統型”樣式對DatatList控件美化，再單擊任務按鈕在彈出的任務快捷菜單中選擇“編輯模板”選項。打開“DataList任務——模板編輯模式”，在“顯示”下拉列表框中選擇“HeaderItemTemplate”選項，在頭模板中插入一張1行6列的表，第一個單元格置入復選框Input（checkbox）HTML控件，并單擊onclick值為“return All_Check（this）；”，該控件用于實現對復選框設置全選或全不選功能，設計如圖1所示。

在ItemTemplate模板中添加1行6列的表，在單元格中放入ASP.NET標準服務器控件，如圖2所示，一個CheckBox控件，3個Label控件，其Text屬性值分別為數據綁定表達式“<%# Eval（"Id"） %>”、“<%# Eval（"Name"） %>”和“<%# Eval（"Sex"） %>”，一個image控件，其ImageUrl 屬性值為<%# Eval（"FaceImg"） %>和一個Button“刪除”控件，該控件用于執行當條數據刪除的功能，將相應的CommandName 屬性設置為“delete”值。

在FootTemplate模板中添加1行2列的表，拖動一個html控件Input（Button），設置其onclick值為"CancelSel（）"，再拖出一個標準控件Button控件，用于執行批量刪除操作，同時設置其CommandName屬性為“pldelete”，如圖3所示。

2.2 全選、取消選擇的實現

在.aspx頁面的源碼的Head部分添加Javascript腳本語句實現上述HeaderTemplate模板中全選復選框的單擊方法All_Check（）方法和FooterTemplate模板中“取消選擇”Input（Button）按鈕的單擊方法CancelSel （）。實現全選和全不選代碼如下：

function All_Check（ckb）{

var DocObj=document.all；

if（ckb.checked） {//復選框全部選中

for（var i=0；iif（DocObj[i].type=="checkbox"）{

DocObj[i].checked=true；}}}

else……

else部分為全不選的代碼，這部分的代碼和if部分的代碼大致相同，只需把DocObj[i].checked設置為false即可。取消選擇的CancelSel（）方法代碼如下：

function CancelSel（） {

var DocObj=document.all；

for（var i=0；i