新增 GridView 的核取方塊欄 (VB)

作者 ：Scott Mitchell

下載 PDF

本教學課程將探討如何將複選框數據行新增至 GridView 控件，為使用者提供選取 GridView 多個數據列的直覺方式。

簡介

在上述教學課程中，我們已檢查如何將單選按鈕數據行新增至 GridView，以便選取特定記錄。 單選按鈕的數據行是適當的使用者介面，當使用者最多只能從方格中選擇一個專案時。 不過，我們有時可能會想要允許使用者從方格挑選任意數目的專案。 例如，Web 型電子郵件客戶程式通常會顯示含有複選框列的郵件清單。 用戶可以選取任意數目的郵件，然後執行一些動作，例如將電子郵件移至另一個資料夾或刪除它們。

在本教學課程中，我們將瞭解如何新增複選框數據行，以及如何判斷回傳時已核取的複選框。 特別是，我們將建置一個會密切模擬 Web 電子郵件用戶端使用者介面的範例。 我們的範例會包含分頁的 GridView，其中列出資料庫數據表中的 Products 產品，其中每個數據列都有一個複選框， (請參閱圖 1) 。 按兩下 [刪除選取的產品] 按鈕將會刪除選取的產品。

圖 1：每一個產品數據列都包含複選框 (按單擊即可檢視完整大小的影像)

步驟 1：新增 清單 產品資訊的 Paged GridView

在擔心新增複選框數據行之前，讓我們先專注於在支援分頁的 GridView 中列出產品。 從開啟資料夾中的頁面開始，CheckBoxField.aspx並將 GridView 從 [工具箱] 拖曳至 Designer，並將其設定為 ProductsID 。EnhancedGridView 接下來，選擇將 GridView 系結至名為 ProductsDataSource的新 ObjectDataSource。 將 ObjectDataSource 設定為使用 ProductsBLL 類別，呼叫 GetProducts() 方法來傳回數據。 由於此 GridView 將是唯讀的，因此請將 UPDATE、INSERT 和 DELETE 索引標籤標的下拉式清單設定為 [無]) (。

圖 2：建立名為 ProductsDataSource 的新 ObjectDataSource (按兩下即可檢視完整大小的影像)

圖 3：使用 方法設定 ObjectDataSource 來擷 GetProducts() 取數據 (按兩下即可檢視完整大小的影像)

圖 4：將 UPDATE、INSERT 和 DELETE 索引標籤中的 Drop-Down 清單 設定為 ([無]) (按兩下即可檢視完整大小的影像)

完成 [設定數據源精靈] 之後，Visual Studio 會自動為產品相關數據欄位建立 BoundColumns 和 CheckBoxColumn。 如同我們在上一個教學課程中所做的一樣，請移除 ProductName、 CategoryName和 UnitPrice BoundFields，並將屬性變更 HeaderText 為 Product、Category 和 Price。 設定 UnitPrice BoundField，使其值格式化為貨幣。 此外，請從智慧標記中選取 [啟用分頁] 複選框，設定 GridView 以支援分頁。

讓我們也新增使用者介面來刪除選取的產品。 在 GridView 底下新增 Button Web 控件，並將其 設定為 ，並將其 IDDeleteSelectedProductsText 屬性設定為 [刪除選取的產品]。 在此範例中，我們不會實際刪除資料庫中的產品，而是只會顯示一則訊息，指出將刪除的產品。 若要容納這種情況，請在 [按鈕] 下方新增標籤 Web 控件。 將識別碼設定為DeleteResults、清除其 Text 屬性，並將其與 EnableViewState 屬性設定Visible為 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 是設計來使用布爾數據欄位。 也就是說，若要使用 CheckBoxField，我們必須指定參考其值的基礎數據欄位，以判斷是否已核取轉譯的複選框。 我們無法使用 CheckBoxField 只包含未核取複選框的數據行。

相反地，我們必須新增 TemplateField，並將 CheckBox Web 控制項新增至其 ItemTemplate。 繼續並將 TemplateField 新增至 Products GridView，使其成為最左邊 () 字段。 從 GridView 智慧標記中，按兩下 [編輯範本] 連結，然後將 CheckBox Web 控制件從 [工具箱] 拖曳至 ItemTemplate。 將此 CheckBox 屬性 ID 設定為 ProductSelector。

圖 6：將名為 ProductSelector 的 CheckBox Web 控件新增至 TemplateField s ItemTemplate (按兩下即可檢視完整大小的影像)

新增 TemplateField 和 CheckBox Web 控制件後，每個數據列現在都會包含複選框。 圖 7 顯示此頁面，在新增 TemplateField 和 CheckBox 之後，透過瀏覽器檢視時。

圖 7：每個產品數據列現在都包含複選框 (按單擊即可檢視完整大小的影像)

步驟 3：判斷回傳時已核取的複選框

此時，我們有一個複選框數據行，但無法判斷在回傳時檢查的複選框。 不過，按兩下 [刪除選取的產品] 按鈕時，我們必須知道已核取哪些複選框，才能刪除這些產品。

GridView 的 Rows 屬性 可讓您存取 GridView 中的數據列。 我們可以逐一查看這些數據列、以程序設計方式存取 CheckBox 控件，然後查閱其 Checked 屬性，以判斷是否已選取 CheckBox。

建立 Button Web 控制項事件的Click事件處理程式DeleteSelectedProducts，並新增下列程式代碼：

Protected Sub DeleteSelectedProducts_Click(sender As Object, e As EventArgs) _
    Handles DeleteSelectedProducts.Click
    
    Dim atLeastOneRowDeleted As Boolean = False
    ' Iterate through the Products.Rows property
    For Each row As GridViewRow In Products.Rows
        ' Access the CheckBox
        Dim cb As CheckBox = row.FindControl("ProductSelector")
        If cb IsNot Nothing AndAlso cb.Checked Then
            ' Delete row! (Well, not really...)
            atLeastOneRowDeleted = True
            ' First, get the ProductID for the selected row
            Dim productID As Integer = _
                Convert.ToInt32(Products.DataKeys(row.RowIndex).Value)
            ' "Delete" the row
            DeleteResults.Text &= String.Format( _
                "This would have deleted ProductID {0}<br />", productID)
            '... To actually delete the product, use ...
            ' Dim productAPI As New ProductsBLL
            ' productAPI.DeleteProduct(productID)
            '............................................
        End If
    Next
    ' Show the Label if at least one row was deleted...
    DeleteResults.Visible = atLeastOneRowDeleted
End Sub

屬性 Rows 會傳回實例的 GridViewRow 集合，而該實例會讓 GridView 的數據列成為其中一個。 這裡的 For Each 迴圈會列舉此集合。 針對每個 GridViewRow 物件，會使用 row.FindControl("controlID")以程序設計方式存取數據列的 CheckBox。 如果核取 CheckBox，則會從DataKeys集合擷取數據列的對應ProductID值。 在此練習中，我們只會在標籤中 DeleteResults 顯示資訊訊息，但在工作應用程式中，我們會改為呼叫 ProductsBLL 類別 s DeleteProduct(productID) 方法。

新增此事件處理程式後，按下 [刪除選取的產品] 按鈕現在會顯示 ProductID 所選產品的 。

圖 8：按兩下 [刪除選取的產品] 按鈕時，[選取的產品 ProductID ] 會列 (按兩下以檢視完整大小的影像)

步驟 4：新增 [全部核取] 和 [取消核取所有按鈕]

如果使用者想要刪除目前頁面上的所有產品，他們必須核取十個複選框的每一個。 我們可以新增 [全部核取] 按鈕，以協助加速此程式，按兩下時，選取方格中的所有複選框。 取消核取 [全部] 按鈕會同樣有説明。

將兩個 Button Web 控制項新增至頁面，將它們放在 GridView 上方。 將第一個 s ID 設定為 CheckAll ，並將其 Text 屬性設定為 Check All;將第二個 s ID 設定為 UncheckAll ，並將其 Text 屬性設定為 [取消核取全部]。

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

接下來，在名為的程式代碼後置類別中建立方法 ToggleCheckState(checkState) ，並在叫用時列舉 Products GridView 的 Rows 集合，並將每個 CheckBox 的 Checked 屬性值設定為 checkState 參數中傳遞的值。

Private Sub ToggleCheckState(ByVal checkState As Boolean)
    ' Iterate through the Products.Rows property
    For Each row As GridViewRow In Products.Rows
        ' Access the CheckBox
        Dim cb As CheckBox = row.FindControl("ProductSelector")
        If cb IsNot Nothing Then
            cb.Checked = checkState
        End If
    Next
End Sub

接下來，建立 ClickCheckAll 和 UncheckAll 按鈕的事件處理程式。 在 CheckAll 事件處理程式中，直接呼叫 ToggleCheckState(True);在 中 UncheckAll，呼叫 ToggleCheckState(False)。

Protected Sub CheckAll_Click(sender As Object, e As EventArgs) _
    Handles CheckAll.Click
    
    ToggleCheckState(True)
End Sub
Protected Sub UncheckAll_Click(sender As Object, e As EventArgs) _
    Handles UncheckAll.Click
    
    ToggleCheckState(False)
End Sub

透過此程式代碼，按兩下 [全部核取] 按鈕會導致回傳，並檢查 GridView 中的所有複選框。 同樣地，按兩下 [取消選取全部] 會取消選取所有複選框。 圖 9 顯示已核取 [全部核取] 按鈕之後的畫面。

圖 9：按兩下 [全選] 按鈕選取所有複選框， (按下即可檢視全大小影像)

注意

顯示複選框數據行時，選取或取消選取所有複選框的其中一種方法是透過標題列中的複選框。 此外，目前的 [全部檢查/ 取消核取] 實作需要回傳。 您可以核取或取消核取複選框，不過，完全透過用戶端腳本，藉此提供貼齊器用戶體驗。 若要探索使用 [全部檢查] 和 [取消核取全部] 的標頭數據列複選框，以及使用用戶端技術的討論，請參閱 使用 Client-Side 腳本和 Check All CheckBox 簽出 GridView 中的所有 CheckBox。

摘要

如果您需要讓使用者在繼續之前，先從 GridView 選擇任意數目的數據列，新增複選框數據行是一個選項。 如本教學課程中所見，在 GridView 中包含複選框數據行，需要新增具有 CheckBox Web 控件的 TemplateField。 藉由使用 Web 控件 (與直接將標記插入範本，如同我們在上一個教學課程中所做的一樣，) ASP.NET 會自動記住 CheckBox 是什麼，而且未在回傳之間檢查。 我們也可以以程式設計方式存取程序代碼中的 CheckBoxes，以判斷是否已核取指定的 CheckBox，或變更已核取的狀態。

本教學課程和最後一個探討如何將數據列選取器數據行新增至 GridView。 在下一個教學課程中，我們將探討如何使用一些工作，將插入功能新增至 GridView。

快樂的程序設計！

關於作者

Scott Mitchell 是七份 ASP/ASP.NET 書籍的作者，以及 自 1998 年以來與 Microsoft Web 技術合作的 4GuysFromRolla.com 作者。 Scott 是獨立顧問、訓練員和作者。 他的最新書籍是 Sams 在 24 小時內自行 ASP.NET 2.0。 您可以透過mitchell@4GuysFromRolla.com部落格來連線到 ，您可以在 找到http://ScottOnWriting.NET。

上一個下一個