GridView 控件

 

 在 GridView 控件中添加一列复选框
2011-11-17 20:47 0人阅读 评论(0) 收藏 编辑 删除
 
步骤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 = atLeastOneRowDeletedEnd 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