c# web gridview checkbox 应用

简介

在前面的教程中 ， 我们学习了如何为 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 控件添加插入功能。

快乐编程！