使用可选的 GridView 和DetailView 控件创建主/明细报表

简介

上一篇教程中，我们介绍了如何使用两个 Web 页面创建一个主/明细报表：从 “ 主 ”Web 页面显示供货商列表，从“ 明细” Web 页面显示选中供货商提供的那些产品的列表。这两个页面报表格式可以缩减为一个页面。本教程中 GridView 包含有每个产品的名称行和价格行，以及一个 Select 按钮。单击某个具体产品的 Select 按钮将用 DetailsView 控件在同一页面完整显示其详细信息。

图1 ：单击 Select 按钮显示产品的详细信息

步骤1 ：创建可选的GridView

可以回想一下，在两个页面格式的主/明细报表中，每个主记录包含一个超链接。单击超链接就向用户发送详细信息页面，传递查询字符串中被单击行的 SupplierID 值。此超链接是使用 HyperLinkField 添加到每个 GridView 行的。而对于一页的主/明细报表，我们需要为 GridView 的每行添加一个按钮，单击该按钮就可显示详细信息。 GridView 控件通过配置可包含针对每行的 Select 按钮，该按钮可引发回传，并将该行标记为 GridView' 的 SelectedRow 。

从向Filtering 文件夹的 DetailsBySelecting.aspx 页面添加一个GridView 控件开始，用 ProductsGrid 为 其ID 属性赋值。然后，新建一个名为 AllProductsDataSource 的 ObjectDataSource ，以调用 ProductsBLL 类的 GetProducts() 方法。

图2 ：创建一个名为 AllProductsDataSource 的 ObjectDataSource

图3 ：使用 ProductsBLL 类

图4 ：配置 ObjectDataSource 以调用 GetProducts() 方法

编辑GridView 的 字段，移除除ProductName 和 UnitPrice BoundFields 之外的所有字段。此外，根据需要随意自定义这些 BoundFields ，如将 UnitPrice BoundField 作为货币进行格式化、更改 BoundFields 的 HeaderText 属性等。这些步骤可在图形界面上通过单击 GridView 的智能标记上的 Edit Columns 链接完成，也可通过手动配置声明性语法完成。

图5 ：移除 ProductName 和 UnitPrice BoundFields 之 外的所有字段

GridView 的最终标记为：

<asp:GridView ID="ProductsGrid" runat="server"
  AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Unit Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

接下来需要将GridView 标记为可选的，即为每行添加一个 Select 按钮。只需勾选上 GridView 智能标记上的 Enable Selection 复选框即可实现这些。

图6 ：将 GridView 的行标记为可选的

勾选上 Enabling Selection 选项将向ProductsGrid GridView 添加一个CommandField ，对其ShowSelectButton 属性赋值为True 。这便为 GridView 中的每行添加了一个 Select 按钮，如图 6 所示。Select 按钮默认为 LinkButtons 模式。但您也可以通过 CommandField 的 ButtonType 属性使用 Buttons 或 ImageButtons 。

<asp:GridView ID="ProductsGrid" runat="server"
    AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="ProductName"
         HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Unit Price"
          HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

单击GridView 某行的 Select 按钮将触发一次回传，且 GridView 的 SelectedRow 属性被更新。除 SelectedRow 属性外，GridView 还提供了 SelectedIndex 、SelectedValue 和 SelectedDataKey 属性。SelectedIndex 属性返回选定行的索引，SelectedValue 和 SelectedDataKey 属性则基于 GridView 的 DataKeyNames 属性 返回值。

DataKeyNames 属性用于将一个或多个数据字段值关联到每行，常用于通过每个 GridView 行唯一标识底层数据的属性。SelectedValue 属性返回选中行的第一个 DataKeyNames 数据字段的值。SelectedDataKey 属性返回选中行的 DataKey 对象，该对象包含该行的指定数据主键字段的所有值。

DataKeyNames 属性 是在您通过Designer 将某数据源绑定到 GridView 、DetailsView 或FormView 时自动赋值为唯一标识数据字段的。尽管该属性在前面教程中就已经为我们自动设置了，但即使不指定 DataKeyNames 属性，这些示例也能运行。不过，同后面详细介绍插入、更新、删除等的教程一样，对于本教程中的可选 GridView ，必须正确设置 DataKeyNames 属性。花点时间确认用 ProductID 为您的 GridView 的 DataKeyNames 属性赋值。

我们通过浏览器来查看一下当前的进度。注意，GridView 列出了所有产品的名称和价格，以及一个 Select LinkButton 。单击 Select 按钮将触发回传。在步骤 2 中，我们将介绍如何让 DetailsView 显示选中产品的详细信息以响应此回传。

图7 ：每个产品行都包含一个 Select 链接按钮

突出显示选中行

ProductsGrid GridView 有一个 SelectedRowStyle 属性，可用于指定选中行的视觉效果。正确使用此属性可以更清楚地显示GridView 当前被选中的行，从而改进用户体验。本教程中将用黄色背景突出显示选中行。

与前面的教程相同，我们需要尽量 通过CSS 类来定义外观设置。因此，在 Styles.css 中 新建一个名为 SelectedRowStyle 的 CSS 类。

.SelectedRowStyle { background-color: Yellow; }

要将该CSS 类应用到系列教程中所有GridView 的 SelectedRowStyle 属性，需要编辑 DataWebControls Theme 下的GridView.skin Skin ，使其包含如下所示的 SelectedRowStyle 设置 ：

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
</asp:GridView>

添加上述代码后，选中的 GridView 行现在就成了带有黄色背景的高亮显示。

图8 ：使用 GridView 的 SelectedRowStyle 属性自定义选中行的外观效果

步骤2 ：在 DetailsView 中显示选中产品的详细信息

完成ProductsGrid GridView 操作后，剩下的所有工作就是添加一个 DetailsView ，以显示被选中产品的详细信息。在 GridView 上方添加一个 DetailsView 控件，并新建一个名为 ProductDetailsDataSource 的 ObjectDataSource 。由于我们希望此 DetailsView 显示被选中产品的特定信息，所以需要配置 ProductDetailsDataSource ，使其使用 ProductsBLL 类的 GetProductByProductID(productID) 方法。

图9 ：调用 ProductsBLL 类的 GetProductByProductID(productID) 方法

用从GridView 控件的 SelectedValue 属性获取的productID 参数值赋值。如前所述，GridView 的 SelectedValue 属性返回选中行的第一个数据主键值。因此必须用 ProductID 为 GridView 的 DataKeyNames 属性赋值，使 SelectedValue 返回选中行的 ProductID 。

图10 ：用 productID 参数为 GridView 的 SelectedValue 属性赋值

一旦正确配置了 productDetailsDataSource ObjectDataSource 并将其绑定到 DetailsView ，本教程就结束了！首次访问页面时，未选中任何行。因此， GridView 的 SelectedValue 属性返回 null 。由于没有任何产品的 ProductID 值为 NULL ， GetProductByProductID(productID) 方法将不返回任何记录，即不显示 DetailsView （如图 11 所示）。单击 GridView 中某行的 Select 按钮就会引发回传并刷新 DetailsView 。现在 GridView 的 SelectedValue 属性返回选中行的 ProductID ， GetProductByProductID(productID) 方法返回包含有关某产品信息的 ProductsDataTable ，DetailsView 则显示这些详细信息（如图 12 所示）。

图11：首次访问页面时只显示 GridView

图12 ：选中某行时就显示产品的详细信息

小结

本教程和前面三篇教程介绍了大量用于显示主/明细报表的方法。本教程中，我们详细介绍了如何使用可选的 GridView 来显示主要记录，并在同一个页面上用 DetailsView 显示有关选中主记录的详细信息。前面的教程中我们学习了如何使用 DropDownLis 显示主/明细报表，以及如何在 两个 Web 页面上分别显示主要记录和详细记录。

本教程为详细介绍主/明细报表的尾声。从下一篇教程开始我们将深入探讨GridView 、DetailsView 和FormView 的自定义格式。包括如何根据绑定到控件的数据自定义其外观，如何在GridView 的脚注总结数据，以及如何使用模板实现整个布局中控件的美化。

快乐编程！

下一篇教程