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

  来源：http://njuan134.blog.163.com/blog/static/30332917200992751430197/

     

简介

在本教程中 ， 我们将了解怎样添加一列复选框 ， 以及如何确定回传时哪些复选框被选中。尤其是我们还将创建一个例子，这个例子逼真地模仿了基于 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 控件添加插入功能。