簡(jiǎn)介

在前面的教程中 ， 我們學(xué)習(xí)了如何為 GridView 控件添加一列 單選 按鈕來(lái)選擇一個(gè)特定的記錄。當(dāng)用戶被限制最多只能從網(wǎng)格中選中一項(xiàng)時(shí)，一列單選按鈕是一個(gè)非常恰當(dāng)?shù)挠脩艚缑妗Ｈ欢?#xff0c;有時(shí)我們還想讓用戶從網(wǎng)格中隨便選擇任意數(shù)量的項(xiàng)目。例如，基于 Web 的電子郵件客戶端通常使用一列復(fù)選框控件來(lái)顯示郵件列表。用戶可以從中隨意選擇若干個(gè)郵件后執(zhí)行某些操作，例如把這些郵件移動(dòng)到另一個(gè)文件夾中或刪除這些郵件。

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

圖1 ：每個(gè)產(chǎn)品行都包含了一個(gè) 復(fù)選框

步驟1 ： 添加一個(gè)列出產(chǎn)品信息的分頁(yè)的GridView 控件

在考慮如何添加一列 復(fù)選框 之前 ， 讓我們先關(guān)注一下如何在支持分頁(yè)的 GridView 控件中列出產(chǎn)品信息。首先，打開(kāi) EnhancedGridView 文件夾中的 CheckBoxField.aspx 頁(yè)，然后將一個(gè) GridView 控件從工具箱中拖放到設(shè)計(jì)器中，并將其 ID 設(shè)置為 Products 。接下來(lái)，把 GridView 控件綁定到一個(gè)名為 ProductsDataSource 的新 ObjectDataSource 上。將 ObjectDataSource 配置使用 ProductsBLL 類，即調(diào)用 GetProducts() 方法返回?cái)?shù)據(jù)。因?yàn)檫@個(gè) GridView 控件是只讀的，所以在 UPDATE 、 INSERT 和 DELETE 選項(xiàng)卡中將下拉列表的設(shè)置為 “(None)” 。

圖2 ：?創(chuàng)建一個(gè)名為 ProductsDataSource 的新 ObjectDataSource

圖3 ：配置 ObjectDataSource 以便使用 GetProducts() 方法返回?cái)?shù)據(jù)

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

完成Configure Data Source 向?qū)Ш?，Visual Studio 將會(huì)自動(dòng)為與產(chǎn)品相關(guān)的的數(shù)據(jù)域創(chuàng)建BoundColumns 和 CheckBoxColumn 。與我們?cè)谇懊娼坛讨兴龅囊粯?#xff0c;除了 ProductName 、 CategoryName 和 UnitPrice BoundField 外，刪除所有其他 BoundField ，并將 HeaderText 屬性更改為 “Product” 、 “Category” 和 “Price” 。配置 UnitPrice BoundField ，以便將它的值格式化為貨幣形式。再通過(guò)從智能標(biāo)記上選中 “Enable Paging” 復(fù)選框?qū)?GridView 配置為 支持分頁(yè)。

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

完成這些更改之后 ，GridView 控件、ObjectDataSource 控件、Button 控件和 Label 控件的聲明標(biāo)記應(yīng)類似如下 ：

<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>

花點(diǎn)時(shí)間在瀏覽器中瀏覽一下這個(gè)頁(yè)面 （ 參見(jiàn)圖5 ） 。此時(shí) ， 您應(yīng)該看到前十個(gè)產(chǎn)品的名稱、類別和價(jià)格信息。

圖5 ：?列出的前十個(gè)產(chǎn)品的名稱、類別和價(jià)格信息

步驟2 ： 添加一列復(fù)選框

因?yàn)锳SP.NET 2.0 包含了 CheckBoxField ， 有些人會(huì)想到使用它來(lái)為 GridView 控件添加一列 復(fù)選框 。但實(shí)際情況并非這樣，因?yàn)?CheckBoxField 只對(duì) Boolean 數(shù)據(jù)域起作用。也就是說(shuō)，為了能夠使用 CheckBoxField ，我們必須指定一個(gè)基礎(chǔ)數(shù)據(jù)字段，然后通過(guò)查詢?cè)撟侄蔚闹祦?lái)確定已呈現(xiàn)的復(fù)選框是否被選中。我們不能使用 CheckBoxField 來(lái)包含一列未選中的復(fù)選框。

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

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

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

圖7 ：?現(xiàn)在每個(gè)產(chǎn)品行都包含一個(gè) 復(fù)選框

步驟3 ： 回傳確定哪些復(fù)選框被選定

雖然現(xiàn)在我們已經(jīng)有了一列復(fù)選框 ， 但是我們還是沒(méi)有辦法確定回傳選中的那些 復(fù)選框 。因?yàn)閱螕?“Delete Selected Products” 按鈕時(shí)，我們需要知道哪些復(fù)選框被選中，從而將這些產(chǎn)品刪除。

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

為DeleteSelectedProducts Web 按鈕控件的Click 事件創(chuàng)建一個(gè)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 屬性會(huì)返回一個(gè) GridViewRow 實(shí)例集合 ， 這個(gè)集合組成了 GridView 控件的各個(gè)數(shù)據(jù)行 ， 這里的 For Each 循環(huán)逐一列舉了集合中的各個(gè)數(shù)據(jù)行元素。對(duì)每個(gè)GridViewRow 對(duì)象來(lái)說(shuō) ， 使用row.FindControl("controlID") 方法通過(guò)編碼來(lái)訪問(wèn)每行的 Checkbox 控件。如果 CheckBox 控件被選中，那么就會(huì)從 DataKeys 集合中返回該行相應(yīng)的 ProductID 值。在本練習(xí)中，我們只是在 DeleteResults Label 中簡(jiǎn)單地顯示了一些信息性消息，而在一個(gè)實(shí)際應(yīng)用程序中，我們將改為調(diào)用 ProductsBLL 類的 DeleteProduct(productID) 方法。

添加了這個(gè) Event Handler 后 ， 單擊 “Delete Selected Products” 按鈕 ， 現(xiàn)在就會(huì)顯示選中產(chǎn)品的 ProductID 。

圖8 ：?單擊 “Delete Selected Products” 按鈕時(shí) ， 列出了選中產(chǎn)品的ProductID

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

如果用戶想刪除當(dāng)前頁(yè)面上的所有產(chǎn)品 ， 他們必須選中每一頁(yè)面上的 10 個(gè) 復(fù)選框 。我們可以幫助他們快速實(shí)現(xiàn)這個(gè)操作，而這一切只需添加一個(gè) “Check All” 按鈕。單擊這個(gè)按鈕后，會(huì)選中網(wǎng)格中的所有復(fù)選框。而 “Uncheck All” 按鈕同樣有用。

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

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

接下來(lái) ， 在代碼文件類中創(chuàng)建一個(gè)名為ToggleCheckState(checkState) 的方法 ， 當(dāng)這個(gè)方法被調(diào)用時(shí) ， 會(huì)逐一列舉Products GridView 控件的行 Rows 集合， 然后將每行的CheckBox 控件的Checked 屬性設(shè)置為傳進(jìn)的?checkState?的參數(shù)值。

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;?
????}?
}

接下來(lái) ， 為CheckAll 按鈕和 UncheckAll 按鈕創(chuàng)建 Event Handler 。在 CheckAll 的 Event Handler 中 ， 只需簡(jiǎn)單調(diào)用ToggleCheckState(true) 方法 ； 而在UncheckAll 的Event Handler 中 ， 需要調(diào)用ToggleCheckState(False) 方法。

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

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

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

注意 ：?當(dāng)顯示一列 復(fù)選框 時(shí) ， 有一種方法可以用來(lái)全選中或全不選中所有的 復(fù)選框， 那就是選中或不選中標(biāo)題行的 復(fù)選框 。還有，通常 “Check All”/“Uncheck All” 的執(zhí)行需要一個(gè)回傳。盡管這些復(fù)選框能被選中還是不能被選中，完全可以通過(guò)客戶端腳本來(lái)實(shí)現(xiàn)，但這里仍然提供了一種令人耳目一新的用戶體驗(yàn)。為了詳細(xì)探討使用標(biāo)題行的復(fù)選框來(lái)實(shí)現(xiàn) “Check All” 和 “Uncheck All” 功能，以及使用客戶端技術(shù)，請(qǐng)查閱?使用客戶端腳本和 Check All CheckBox 全部選中 GridView 中的復(fù)選框?。

小結(jié)

在需要讓用戶可以從 GridView 控件中選擇任意數(shù)量的行之前 ， 首先需要添加一列復(fù)選框。正如我們?cè)诒窘坛讨兴私獾哪菢?#xff0c;要在 GridView 控件中包含一列復(fù)選框，必須添加一個(gè)帶有 CheckBox Web 控件的 TemplateField 。通過(guò)使用 Web 控件（與向模板中直接插入標(biāo)記文字相反，正如我們?cè)谇懊娼坛讨兴龅哪菢?#xff09;， ASP.NET 能夠在整個(gè)回傳期間自動(dòng)記住哪些 CheckBox 控件被選中，哪些沒(méi)有被選中。我們還可以通過(guò)編碼訪問(wèn)這些 CheckBoxes 控件，以便確定給的的 CheckBox 控件是否被選中，或選中狀態(tài)是否被更改。。

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

快樂(lè)編程！

轉(zhuǎn)載于:https://www.cnblogs.com/uddgm/articles/5451542.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。