簡介

在前面的教程中 ， 我們學習了如何為 GridView 控件添加一列 單選 按鈕來選擇一個特定的記錄。當用戶被限制最多只能從網格中選中一項時，一列單選按鈕是一個非常恰當的用戶界面。然而，有時我們還想讓用戶從網格中隨便選擇任意數量的項目。例如，基于 Web 的電子郵件客戶端通常使用一列復選框控件來顯示郵件列表。用戶可以從中隨意選擇若干個郵件后執行某些操作，例如把這些郵件移動到另一個文件夾中或刪除這些郵件。

在本教程中 ， 我們將了解怎樣添加一列復選框 ， 以及如何確定回傳時哪些復選框被選中。尤其是我們還將創建一個例子，這個例子逼真地模仿了基于 Web 的電子郵件客戶端用戶界面。我們的例子將會包含一個已分頁的 GridView 控件，這個控件列出了 Products 數據庫中的所有產品，并且每個產品行都有一個復選框（參見圖 1 ）。單擊 “Delete Selected Products” 按鈕后，將會刪除被選中的產品。

圖1 ：每個產品行都包含了一個 復選框

步驟1 ： 添加一個列出產品信息的分頁的GridView 控件

在考慮如何添加一列 復選框 之前 ， 讓我們先關注一下如何在支持分頁的 GridView 控件中列出產品信息。首先，打開 EnhancedGridView 文件夾中的 CheckBoxField.aspx 頁，然后將一個 GridView 控件從工具箱中拖放到設計器中，并將其 ID 設置為 Products 。接下來，把 GridView 控件綁定到一個名為 ProductsDataSource 的新 ObjectDataSource 上。將 ObjectDataSource 配置使用 ProductsBLL 類，即調用 GetProducts() 方法返回數據。因為這個 GridView 控件是只讀的，所以在 UPDATE 、 INSERT 和 DELETE 選項卡中將下拉列表的設置為 “(None)” 。

圖2 ：?創建一個名為 ProductsDataSource 的新 ObjectDataSource

圖3 ：配置 ObjectDataSource 以便使用 GetProducts() 方法返回數據

圖4 ：?將 UPDATE 、INSERT 和 DELETE 選項卡中的下拉列表設置為 “(None)”

完成Configure Data Source 向導后 ，Visual Studio 將會自動為與產品相關的的數據域創建BoundColumns 和 CheckBoxColumn 。與我們在前面教程中所做的一樣，除了 ProductName 、 CategoryName 和 UnitPrice BoundField 外，刪除所有其他 BoundField ，并將 HeaderText 屬性更改為 “Product” 、 “Category” 和 “Price” 。配置 UnitPrice BoundField ，以便將它的值格式化為貨幣形式。再通過從智能標記上選中 “Enable Paging” 復選框將 GridView 配置為 支持分頁。

另外 ， 我們還要添加用來刪除選定產品的用戶界面。在 GridView 控件的下方添加一個 Web 按鈕控件，將其 ID 設置為 DeleteSelectedProducts ，將其 Text 屬性設置為 “Delete Selected Products” 。本例子中不是將產品從數據庫中實際刪除，而是要顯示一條消息指出將要被刪除的產品。為了實現這個目的，需要在 Button 控件下方添加一個 Web 標簽控件，將其 ID 設置為 DeleteResults ，清除它的 Text 屬性，并將它的 Visible 和 EnableViewState 屬性值設置為 False 。

完成這些更改之后 ，GridView 控件、ObjectDataSource 控件、Button 控件和 Label 控件的聲明標記應類似如下 ：

<p>?
????<asp:GridView?ID="Products"?runat="server"?AutoGenerateColumns="False"??
????????DataKeyNames="ProductID"?DataSourceID="ProductsDataSource"??
????????AllowPaging="True"?EnableViewState="False">?
????????<Columns>?
????????????<asp:BoundField?DataField="ProductName"?HeaderText="Product"??
????????????????SortExpression="ProductName"?/>?
????????????<asp:BoundField?DataField="CategoryName"?HeaderText="Category"??
????????????????ReadOnly="True"?SortExpression="CategoryName"?/>?
????????????<asp:BoundField?DataField="UnitPrice"?DataFormatString="{0:c}"??
????????????????HeaderText="Price"?HtmlEncode="False"??
????????????????SortExpression="UnitPrice"?/>?
????????</Columns>?
????</asp:GridView>?
?
????<asp:ObjectDataSource?ID="ProductsDataSource"?runat="server"??
????????OldValuesParameterFormatString="original_{0}"??
????????SelectMethod="GetProducts"?TypeName="ProductsBLL">?????????????
????</asp:ObjectDataSource>?
</p>?
<p>?
????<asp:Button?ID="DeleteSelectedProducts"?runat="server"??
????????Text="Delete?Selected?Products"?/>?
</p>?
<p>?
????<asp:Label?ID="DeleteResults"?runat="server"?EnableViewState="False"??
????????Visible="False"></asp:Label>?
</p>

花點時間在瀏覽器中瀏覽一下這個頁面 （ 參見圖5 ） 。此時 ， 您應該看到前十個產品的名稱、類別和價格信息。

圖5 ：?列出的前十個產品的名稱、類別和價格信息

步驟2 ： 添加一列復選框

因為ASP.NET 2.0 包含了 CheckBoxField ， 有些人會想到使用它來為 GridView 控件添加一列 復選框 。但實際情況并非這樣，因為 CheckBoxField 只對 Boolean 數據域起作用。也就是說，為了能夠使用 CheckBoxField ，我們必須指定一個基礎數據字段，然后通過查詢該字段的值來確定已呈現的復選框是否被選中。我們不能使用 CheckBoxField 來包含一列未選中的復選框。

取而代之 ， 我們必須添加一個 TemplateField ，并 為其 ItemTemplate 添加一個 CheckBox Web 控件。繼續進行，為 Products GridView 添加一個 TemplateField ，使它成為第一個（最左邊的）字段。在 GridView 的智能標記中單擊 “Edit Templates” 鏈接，接著將一個 CheckBox Web 控件從工具箱拖放到 ItemTemplate 中。將該 CheckBox 控件的 ID 屬性設置為 ProductSelector 。

圖6 ：?為 TemplateField 的 ItemTemplate 添加一個名為ProductSelector 的 CheckBox Web 控件

添加了TemplateField 和 CheckBox Web 控件后 ， 每行都包含了一個復選框。圖7 顯示的這個畫面就是在添加 TemplateField 和CheckBox 后 ， 通過瀏覽器看到的畫面。

圖7 ：?現在每個產品行都包含一個 復選框

步驟3 ： 回傳確定哪些復選框被選定

雖然現在我們已經有了一列復選框 ， 但是我們還是沒有辦法確定回傳選中的那些 復選框 。因為單擊 “Delete Selected Products” 按鈕時，我們需要知道哪些復選框被選中，從而將這些產品刪除。

GridView 的?Rows 屬性?提供了一種訪問 GridView 中行的途徑。我們可以循環遍歷這些行，通過編碼訪問 CheckBox 控件，然后通查詢它的 Checked 屬性來確定這個 CheckBox 是否被選中。

為DeleteSelectedProducts Web 按鈕控件的Click 事件創建一個Event Handler ， 并添加以下代碼 ：

protected?void?DeleteSelectedProducts_Click(object?sender,?EventArgs?e)?
{?
????bool?atLeastOneRowDeleted?=?false;?
?
????//?Iterate?through?the?Products.Rows?property?
????foreach?(GridViewRow?row?in?Products.Rows)?
????{?
????????//?Access?the?CheckBox?
????????CheckBox?cb?=?(CheckBox)row.FindControl("ProductSelector");?
????????if?(cb?!=?null?&&?cb.Checked)?
????????{?
????????????//?Delete?row!?(Well,?not?really...)?
????????????atLeastOneRowDeleted?=?true;?
?
????????????//?First,?get?the?ProductID?for?the?selected?row?
????????????int?productID?=??
????????????????Convert.ToInt32(Products.DataKeys[row.RowIndex].Value);?
?
????????????//?"Delete"?the?row?
????????????DeleteResults.Text?+=?string.Format(?
????????????????"This?would?have?deleted?ProductID?{0}<br?/>",?productID);?
????????}?
????}?
?
????//?Show?the?Label?if?at?least?one?row?was?deleted...?
????DeleteResults.Visible?=?atLeastOneRowDeleted;?
}

Rows 屬性會返回一個 GridViewRow 實例集合 ， 這個集合組成了 GridView 控件的各個數據行 ， 這里的 For Each 循環逐一列舉了集合中的各個數據行元素。對每個GridViewRow 對象來說 ， 使用row.FindControl("controlID") 方法通過編碼來訪問每行的 Checkbox 控件。如果 CheckBox 控件被選中，那么就會從 DataKeys 集合中返回該行相應的 ProductID 值。在本練習中，我們只是在 DeleteResults Label 中簡單地顯示了一些信息性消息，而在一個實際應用程序中，我們將改為調用 ProductsBLL 類的 DeleteProduct(productID) 方法。

添加了這個 Event Handler 后 ， 單擊 “Delete Selected Products” 按鈕 ， 現在就會顯示選中產品的 ProductID 。

圖8 ：?單擊 “Delete Selected Products” 按鈕時 ， 列出了選中產品的ProductID

步驟4 ： 添加“Check All” 和“Uncheck All” 按鈕

如果用戶想刪除當前頁面上的所有產品 ， 他們必須選中每一頁面上的 10 個 復選框 。我們可以幫助他們快速實現這個操作，而這一切只需添加一個 “Check All” 按鈕。單擊這個按鈕后，會選中網格中的所有復選框。而 “Uncheck All” 按鈕同樣有用。

在頁面中添加兩個 Web 按鈕控件，把它們放在 GridView 控件的上面。將第一個按鈕的 ID 屬性設置為 CheckAll ，將它的 Text 屬性設置為 “Check All” ；將第二個按鈕的 ID 設置為 UncheckAll ，將它的 Text 屬性設置為 “Uncheck All” 。

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

接下來 ， 在代碼文件類中創建一個名為ToggleCheckState(checkState) 的方法 ， 當這個方法被調用時 ， 會逐一列舉Products GridView 控件的行 Rows 集合， 然后將每行的CheckBox 控件的Checked 屬性設置為傳進的?checkState?的參數值。

private?void?ToggleCheckState(bool?checkState)?
{?
????//?Iterate?through?the?Products.Rows?property?
????foreach?(GridViewRow?row?in?Products.Rows)?
????{?
????????//?Access?the?CheckBox?
????????CheckBox?cb?=?(CheckBox)row.FindControl("ProductSelector");?
????????if?(cb?!=?null)?
????????????cb.Checked?=?checkState;?
????}?
}

接下來 ， 為CheckAll 按鈕和 UncheckAll 按鈕創建 Event Handler 。在 CheckAll 的 Event Handler 中 ， 只需簡單調用ToggleCheckState(true) 方法 ； 而在UncheckAll 的Event Handler 中 ， 需要調用ToggleCheckState(False) 方法。

protected?void?CheckAll_Click(object?sender,?EventArgs?e)?
{?
????ToggleCheckState(true);?
}?
?
protected?void?UncheckAll_Click(object?sender,?EventArgs?e)?
{?
????ToggleCheckState(false);?
}

有了這些代碼 ， 單擊“Check All” 按鈕時 ， 會引起回傳 ， 并會選中 GridView 中的所有 復選框 。同樣，單擊 “Uncheck All” 會取消選中所有復選框。圖 9 顯示的是單擊 “Check All” 按鈕后的屏幕。

圖9 ：?單擊 “Check All” 按鈕 ， 選中所有 復選框

注意 ：?當顯示一列 復選框 時 ， 有一種方法可以用來全選中或全不選中所有的 復選框， 那就是選中或不選中標題行的 復選框 。還有，通常 “Check All”/“Uncheck All” 的執行需要一個回傳。盡管這些復選框能被選中還是不能被選中，完全可以通過客戶端腳本來實現，但這里仍然提供了一種令人耳目一新的用戶體驗。為了詳細探討使用標題行的復選框來實現 “Check All” 和 “Uncheck All” 功能，以及使用客戶端技術，請查閱?使用客戶端腳本和 Check All CheckBox 全部選中 GridView 中的復選框?。

小結

在需要讓用戶可以從 GridView 控件中選擇任意數量的行之前 ， 首先需要添加一列復選框。正如我們在本教程中所了解的那樣，要在 GridView 控件中包含一列復選框，必須添加一個帶有 CheckBox Web 控件的 TemplateField 。通過使用 Web 控件（與向模板中直接插入標記文字相反，正如我們在前面教程中所做的那樣）， ASP.NET 能夠在整個回傳期間自動記住哪些 CheckBox 控件被選中，哪些沒有被選中。我們還可以通過編碼訪問這些 CheckBoxes 控件，以便確定給的的 CheckBox 控件是否被選中，或選中狀態是否被更改。。

本教程和上一個教程都著眼于為 GridView 控件添加一行選擇器列。在下一個教程中，我們將會詳細探討如何以最小的工作量為 GridView 控件添加插入功能。

快樂編程！

轉載于:https://www.cnblogs.com/uddgm/articles/5451542.html

總結

以上是生活随笔為你收集整理的在 GridView 控件中添加一列复选框51的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。