本文為教程52的擴(kuò)展閱讀
英文原版及代碼下載：
http://aspnet.4guysfromrolla.com/articles/052406-1.aspx

在GridView控件里全選CheckBox

導(dǎo)言：

通常的網(wǎng)站用戶界面模式是這樣的，每一行記錄對(duì)應(yīng)一個(gè)checkbox，典型的例子便是基于web的email客戶端程序。通過點(diǎn)擊checkbox來選擇郵件，當(dāng)一個(gè)或幾個(gè)郵件時(shí)，用戶可進(jìn)行相同的操作，比如刪除、閱讀或者將它們轉(zhuǎn)移的不同的文件夾，除了每個(gè)郵件對(duì)應(yīng)的checkbox外，很多界面還包含一個(gè)"check all"的checkbox。如果選擇或棄選該checkbox，系統(tǒng)將自動(dòng)的全選或棄選下面所有的項(xiàng)。

ASP.NET 2.0的GridView控件—本文的焦點(diǎn)，可以用來創(chuàng)建這種用戶界面。特別的，我們考察如何同時(shí)在服務(wù)器端和客戶端實(shí)現(xiàn)“全選/棄選”（Check All/Uncheck All）功能。服務(wù)器端需要用戶做出選擇，頁面產(chǎn)生回傳后才能執(zhí)行；另一方面，客戶端需要稍微多做些工作才可以正確執(zhí)行。

構(gòu)建功能：創(chuàng)建一個(gè)GridView控件，每行對(duì)應(yīng)一個(gè)CheckBox

現(xiàn)在讓我們創(chuàng)建一個(gè)GridView控件，每行記錄包含一個(gè)CheckBox，可以通過如下2種方法創(chuàng)建一列CheckBoxes：

.使用CheckBoxField—作為GridView控件內(nèi)置的field類型，其呈現(xiàn)為一列CheckBox，每個(gè)CheckBox的Checked屬性可以綁定到某個(gè)數(shù)據(jù)源的數(shù)據(jù)域（data field）

.使用一個(gè)TemplateField—我們可以添加一個(gè)TemplateField，然后在其ItemTemplate模板里面添加一個(gè)CheckBox控件。如果要對(duì)其Checked屬性實(shí)施綁定的話，要么通過聲明代碼的方式(比如, <asp:CheckBox runat="server" ... Checked='<%# Eval("ColumnName") %>' ... />)；要么通過編程的方式(比如在RowDataBound事件處理器).

第2種方法—使用一個(gè)TemplateField，相對(duì)而言具有一些優(yōu)勢(shì)。首先，可以更方便地進(jìn)行用戶定制。用最少的步驟我們就可以為每一行（each row）添加額外的代碼，甚至提供一個(gè)自定義表頭。在本文結(jié)束部分有一個(gè)代碼下載鏈接，在其代碼里包含了這種情況。更多的信息請(qǐng)參閱文章《 Checking All CheckBoxes in a GridView Using Client-Side Script and a Check All CheckBox》。此外，如果CheckBox的Checked屬性未綁定到某個(gè)數(shù)據(jù)域，我們就需要使用TemplateField option，在本文我們將這樣做。

在本文，假設(shè)我們需要?jiǎng)?chuàng)建一個(gè)基于web的文件管理工具，列出當(dāng)前目錄的文件。在GridView控件下面，我們添加一個(gè)"Delete All Checked Files"按鈕。當(dāng)點(diǎn)擊時(shí)，將對(duì)應(yīng)的CheckBox處于選中狀態(tài)的那些文件刪除掉。（本文結(jié)束時(shí)演示的例子并不會(huì)真的刪除這些文件，而是顯示一個(gè)消息提示哪些文章將被刪除）

下面的GridView控件提供了我們需要的功能。注意到其使用了一個(gè)TemplateField為每一行記錄設(shè)置一個(gè)CheckBox，(為求簡化，我們將GridView控件的某些格式化設(shè)置刪除了)

<asp:GridView ID="FileList" runat="server"
AutoGenerateColumns="False" DataKeyNames="FullName">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox runat="server" ID="RowLevelCheckBox" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="CreationTime" HeaderText="Created On">
<ItemStyle HorizontalAlign="Right" />
</asp:BoundField>
<asp:BoundField DataField="Length" DataFormatString="{0:N0}"
HeaderText="File Size"
HtmlEncode="False">
<ItemStyle HorizontalAlign="Right" />
</asp:BoundField>
</Columns>
</asp:GridView>

在Page_Load事件處理器里我們將當(dāng)前目錄里的文件綁定到GridView控件，代碼如下：

Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Dim dirInfo As New DirectoryInfo(Request.PhysicalApplicationPath)

FileList.DataSource = dirInfo.GetFiles()
FileList.DataBind()
End If
End Sub

關(guān)于訪問并展示某個(gè)目錄下文件的更多信息，請(qǐng)參閱文章《Displaying the Files in a Directory using a DataGrid》

接下來，我們需要添加一個(gè)"Delete All Checked Files" 按鈕。點(diǎn)擊后，判斷點(diǎn)擊了哪些
CheckBoxes，并刪除這些文件。以下為該按鈕的Click事件處理器。通過GridView的Rows集，對(duì)每個(gè)GridViewRow實(shí)例，檢查名為RowLevelCheckBox的CheckBox是否被選中，如果是，事件處理器將對(duì)應(yīng)的文件路徑顯示在一個(gè)Label控件里。（在實(shí)際運(yùn)用時(shí)，將用System.IO命名空間里的File.Delete(path)方法來刪除文件）

Protected Sub DeleteButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles DeleteButton.Click
Summary.Text = "The following file would have been deleted:<ul>"

Dim currentRowsFilePath As String

'Enumerate the GridViewRows
For index As Integer = 0 To FileList.Rows.Count - 1
'Programmatically access the CheckBox from the TemplateField
Dim cb As CheckBox = CType(FileList.Rows(index).FindControl("RowLevelCheckBox"), CheckBox)

'If it's checked, delete it...
If cb.Checked Then
currentRowsFilePath = FileList.DataKeys(index).Value
Summary.Text &= String.Concat("<li>", currentRowsFilePath, "</li>")
End If
Next

Summary.Text &= "</ul>"
End Sub

請(qǐng)注意我們是怎樣通過編程來引用TemplateField模板里的CheckBox控件——FileList.Rows(index).FindControl("controlID").假如在這里我們使用的是CheckBoxField，上述代碼里我們將替換為FileList.Rows(index).Cells(0).Controls(0).在這里，Cells(0)意為指定行記錄的第一列（假設(shè)CheckBoxField是GridView控件的第一列）；Control(0)意為Controls集里的第一個(gè)控件，對(duì)CheckBoxField來說，就是其CheckBox控件

現(xiàn)在我們構(gòu)建了基本框架，接下來我們將添加全選或棄選GridView控件里所有CheckBox的功能。首先讓我們看如何添加服務(wù)器端代碼。

用服務(wù)器端代碼實(shí)現(xiàn)"Check All"和"Uncheck All" 功能

為添加"Check All"和"Uncheck All" 功能，在GridView控件上面添加一個(gè)Button控件：

<p>
<asp:Button ID="CheckAll" runat="server" Text="Check All" />
&nbsp;
<asp:Button ID="UncheckAll" runat="server" Text="Uncheck All" />
</p>

接下來，我們?yōu)檫@些按鈕創(chuàng)建Click事件處理器.我列舉了GridView的Rows集，對(duì)每個(gè)GridViewRow實(shí)例，訪問CheckBox并設(shè)置其Checked屬性：

Protected Sub CheckAll_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles CheckAll.Click
'Enumerate each GridViewRow
For Each gvr As GridViewRow In FileList.Rows
'Programmatically access the CheckBox from the TemplateField
Dim cb As CheckBox = CType(gvr.FindControl("RowLevelCheckBox"), CheckBox)

'Check it!
cb.Checked = True
Next
End Sub

Protected Sub UncheckAll_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles UncheckAll.Click
'Enumerate each GridViewRow
For Each gvr As GridViewRow In FileList.Rows
'Programmatically access the CheckBox from the TemplateField
Dim cb As CheckBox = CType(gvr.FindControl("RowLevelCheckBox"), CheckBox)

'Uncheck it!
cb.Checked = False
Next
End Sub

以上就是所有我們需要做的. 服務(wù)器端方法的唯一問題是點(diǎn)擊"Check All"或 "Uncheck All" 按鈕后產(chǎn)生頁面回傳，導(dǎo)致屏幕刷新閃爍. 這種情況在企業(yè)內(nèi)部局域網(wǎng)表現(xiàn)不明顯，
而互聯(lián)網(wǎng)站通過使用客戶端腳本以提供更好的用戶體驗(yàn)。我們要再多做些工作實(shí)現(xiàn)此功能。在我們將注意力轉(zhuǎn)到客戶端腳本前，花一些時(shí)間測(cè)試我們的服務(wù)器端方法。注意到，點(diǎn)擊"Check All" 或 "Uncheck All" 按鈕時(shí)，將相應(yīng)的全選或棄選GridView的所有的CheckBox；下面的界面為點(diǎn)擊 "Check All"按鈕后的情形。

用客戶端代碼實(shí)現(xiàn)"Check All"和"Uncheck All" 功能

為了提供更爽的用戶體驗(yàn)，最理想的是在不產(chǎn)生頁面回傳的情況下，在客戶端通過點(diǎn)擊
"Check All" 或"Uncheck All"來實(shí)現(xiàn)全選或棄選的目的。可以通過客戶端JavaScript來訪問GridView控件里的那些CheckBox，用如下的模式：

// Get a reference to the CheckBox
var cb = document.getElementById('checkBoxID');

// Adjust the checked state
cb.Checked = false; // or whatever...

這里，checkBoxID是CheckBox控件的客戶端ID（client-side ID），它不必與該控件的ID屬性值相同。實(shí)際上客戶端ID由該CheckBox控件的那些父控件（parent controls）的ID值構(gòu)成。為了在客戶端腳本處理這些CheckBox，我們需要?jiǎng)?chuàng)建一個(gè)客戶端數(shù)組，以包含這些客戶端ID。

ASP.NET 2.0的 ClientScriptManager class類里包含了一系列方法。這些方法可以直接通過ASP.NET頁面的ClientScript屬性來訪問。在ASP.NET 1.x的Page class類里也可以找到這些與客戶端腳本相關(guān)（client-script-related ）的方法。在這些1.x和2.0共有的方法中，其中一個(gè)方法是RegisterArrayDeclaration(arrayName, arrayValue)，它創(chuàng)建一個(gè)客戶端數(shù)組，數(shù)組元素由輸入?yún)?shù)arrayValue指定。

下面的代碼列舉了GridView的Rows集合，對(duì)每個(gè)GridViewRow實(shí)例，編程訪問CheckBox并保存其客戶端ID（通過在客戶端數(shù)組里使用ClientID屬性）

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Dim dirInfo As New DirectoryInfo(Request.PhysicalApplicationPath)

FileList.DataSource = dirInfo.GetFiles()
FileList.DataBind()
End If

'On every page visit we need to build up the CheckBoxIDs array
For Each gvr As GridViewRow In FileList.Rows
'Get a programmatic reference to the CheckBox control
Dim cb As CheckBox = CType(gvr.FindControl("RowLevelCheckBox"), CheckBox)

ClientScript.RegisterArrayDeclaration("CheckBoxIDs", String.Concat("'", cb.ClientID, "'"))
Next
End Sub

這將為頁面添加JavaScript，看起來類似于這樣：
<script type="text/javascript">
<!--
var CheckBoxIDs = new Array('<i>CheckBoxID1</i>','<i>CheckBoxID2</i>', ...,'<i>CheckBoxIDN</i>');
// -->
</script>

前面的代碼應(yīng)放置于Page_Load事件處理器，以便每次登錄頁面時(shí)執(zhí)行代碼，因?yàn)檫@種客戶端注入類型的數(shù)組（types of client-side injected arrays）在頁面發(fā)生回傳后便失效
如果我們只是在首次登錄頁面（或任何GridView被綁定的時(shí)候）時(shí)創(chuàng)建客戶端數(shù)組，一旦發(fā)生頁面回傳—比如點(diǎn)擊"Delete All Checked Files"按鈕后，再次登錄頁面時(shí)就不會(huì)包含這個(gè)名為CheckBoxIDs的客戶端數(shù)組，因此“全選”或“棄選”功能就無從談起。

關(guān)于客戶端腳本和服務(wù)器端代碼的更多信息，請(qǐng)參閱文章《Working with Client-Side Script》

用客戶端ID對(duì)數(shù)組賦值后，我們來寫一個(gè)客戶端JavaScript函數(shù)，列舉所有的數(shù)組元素，對(duì)每個(gè)元素，引用checkbox并設(shè)置其checked屬性。為達(dá)此目的，我創(chuàng)建了2種方法：

.ChangeCheckBoxState(id, checkState)：引用某個(gè)指定的checkbox (使用document.getElementById(id)),將其checked屬性設(shè)置為checkedState的值

.ChangeAllCheckBoxStates(checkState)：同樣的，對(duì)數(shù)組CheckBoxIDs里的每個(gè)元素，調(diào)用ChangeCheckBoxState方法，傳遞客戶端ID值和checkState值。

我創(chuàng)建了2個(gè)<input type="button" ... />的按鈕—"Check All" 和 "Uncheck All" .設(shè)置它們的客戶端onclick事件處理器調(diào)用ChangeAllCheckBoxStates方法，傳遞相應(yīng)的checkState的值。

<script type="text/javascript">
function ChangeCheckBoxState(id, checkState)
{
var cb = document.getElementById(id);
if (cb != null)
cb.checked = checkState;
}

function ChangeAllCheckBoxStates(checkState)
{
// Toggles through all of the checkboxes defined in the CheckBoxIDs array
// and updates their value to the checkState input parameter
if (CheckBoxIDs != null)
{
for (var i = 0; i < CheckBoxIDs.length; i++)
ChangeCheckBoxState(CheckBoxIDs[i], checkState);
}
}
</script>

...

<p>
<input type="button" value="Check All" onclick="ChangeAllCheckBoxStates(true);" />
&nbsp;
<input type="button" value="Uncheck All" onclick="ChangeAllCheckBoxStates(false);" />
</p>

完成上述修改后，"Check All" 和 "Uncheck All" 按鈕就可以在客戶端完成相應(yīng)的功能，并提供更友好的用戶體驗(yàn)。在本文結(jié)尾部分下面，有一個(gè)實(shí)例代碼下載鏈接。在實(shí)例里，checkbox列包含一個(gè)checkbox表頭，選中或棄選該checkbox，就會(huì)相應(yīng)的選中或棄選所有的checkbox。可以在文章《 Checking All CheckBoxes in a GridView Using Client-Side Script and a Check All CheckBox!》里找到另一個(gè)更徹底的例子。

結(jié)語：
在本文，我們探討了2種方法來全選或棄選GridView控件里所有CheckBox。使用服務(wù)器端代碼的方法要容易一些，不過要在頁面回傳后才能工作；而客戶端方法可以提供更友好的用戶體驗(yàn)，不過要多寫些代碼和JavaScript函數(shù)。

在GridView控件里全選CheckBox