在 GridView 控件中添加一列复选框

 

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

接下来 ， 为CheckAll 按钮和 UncheckAll 按钮创建 Event Handler 。在 CheckAll 的 Event Handler 中 ， 只需简单调用ToggleCheckState(true) 方法 ； 而在UncheckAll 的Event Handler 中 ， 需要调用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

有了这些代码 ， 单击“Check All” 按钮时 ， 会引起回传 ， 并会选中 GridView 中的所有 复选框 。同样，单击 “Uncheck All” 会取消选中所有复选框。图 9 显示的是单击 “Check All” 按钮后的屏幕。

图9 ： 单击 “Check All” 按钮 ， 选中所有 复选框

注意 ： 当显示一列 复选框 时 ， 有一种方法可以用来全选中或全不选中所有的 复选框， 那就是选中或不选中标题行的 复选框 。还有，通常 “Check All”/“Uncheck All” 的执行需要一个回传。尽管这些复选框能被选中还是不能被选中，完全可以通过客户端脚本来实现，但这里仍然提供了一种令人耳目一新的用户体验。为了详细探讨使用标题行的复选框来实现 “Check All” 和 “Uncheck All” 功能，以及使用客户端技术，请查阅 使用客户端脚本和 Check All CheckBox 全部选中 GridView 中的复选框。