ASP.NET 2.0中的运行数据:使用GridView和DetailView的主/从报告

引言在前面的教程中，我们看到了如何使用两个页面(一个主页用于列出供应商；用于显示所选供应商提供的产品的详细页面)来创建主/从报告。两页的报告格式也可以集中在一页上。本教程将使用一个GridView，每行包含产品的名称和单价以及一个选择按钮。单击产品的选择按钮将在同一页面的DetailsView控件上显示该产品的所有详细信息。

图1:单击选择按钮显示产品详细信息。

步骤1:创建一个带有可选行的网格视图。

回想一下之前的两页主/从报告。每个主记录都包含一个超链接。当您单击此链接时，您将转到详细信息页面，并在查询字符串中传递所单击行的供应商标识值。这个链接是在GridView上使用HyperLinkField实现的。对于单页主/从报表，每个GridView行都需要一个按钮。点击此按钮显示详细信息。GridView控件可以在每行中包含一个选择按钮，单击此按钮将导致回发，并将此行作为GridView的SelectedRow值。

将GrIDView控件添加到“筛选”文件夹下的DetailsBySelecting.aspx页面，将id属性设置为ProductsGrid，然后添加名为AllProductsDataSource的新对象数据源，该数据源调用ProductsBLL类的GetProducts()方法。

图2:创建一个对象数据源，并将其命名为所有产品数据源。

图3:使用产品类。

图4:配置ObjectDataSource调用GetProducts()方法。

编辑GridView字段，并删除产品名称和单价以外的字段。您还可以根据需要自定义绑定字段，例如将utitPrice字段格式化为货币，以及修改绑定字段的HeaderText属性。这些操作可以在“设计”视图中完成，也可以在GridView智能标记上单击“编辑列”，或者手动配置声明的语法。

图5:删除产品名称和单价以外的列。

最终的GridView标记是：

asp: GridView ID=' products grid ' runat=' server ' AutoGenerateColumns=' False ' DataKeyNames=' ProductID ' data sourceid=' all products data source ' EnableViewSt ate=' False ' Columns sp : boundfield data field=' Product name ' header text=' Product ' sort expression=' Product name '/asp: boundfield data field=' UnitPrice ' data formatstring=' { 0: c } ' header text='单价要实现此功能，只需选中GridView智能标记上的“启用选定内容”复选框。

图6:使GridView行成为可选的。

选择“启用选定内容”项目将向产品网格网格视图添加一个命令字段，并将“显示选择按钮”属性设置为“真”。因此，GridView的每一行都将有一个选择按钮，如图6所示。默认情况下，选择按钮显示为链接，但您可以使用按钮或图片按钮，并修改命令字段的ButtonType属性。

asp: GridView ID=' products grid ' runat=' server ' AutoGenerateColumns=' False ' DataKeyNames=' ProductID ' data sourceid=' all products data source ' EnableViewSt ate=' False ' Columns sasp : command field ShowSelectButton=' True '/asp: boundfield data field=' Product name ' header text=' Product ' sort expression=' Product name '/asp3360 boundfield data field=' UnitPrice ' data formastring='除了SelectedRow属性，GridView还提供了SelectedIndex、SelectedValue和SelectedDataKey属性。SelectedIndex属性返回所选行的索引，SelectedValue和SelectedDataKey属性返回基于GridView的DataKeyNames属性的值。

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

当数据源绑定到设计视图中的GridView、DetailsView、FormView时，DataKeyNames属性会自动设置为数据源中唯一标识的数据字段。虽然此属性是在前面的教程中自动设置的，但该示例可以在没有特别指定的数据关键字名称属性的情况下运行。但是，对于本教程中具有可选行的GridView以及我们稍后将研究GridView的添加、更新和删除的教程，必须合理设置DataKeyNames属性。请确保GridView的DataKeyNames属性已设置为ProductID。

在浏览器中浏览我们完成的工作。GridView列出了所有产品的名称和单价以及一个选择按钮。单击选择按钮触发回发。在第二步中，我们将看到如何让DetailsView响应回发事件并显示所选产品的详细信息。

图7:每个产品线都包含一个选择链接按钮。

突出显示选定的行。

ProductsGrid GridView有一个SelectedRowStyle属性，它决定了所选行的外观。合理使用可以更清晰地显示当前选中的行，提高用户体验。在本教程中，我们使用黄色背景来突出显示选定的行。

和前面的教程一样，我们应该尽最大努力保持美丽的外观。在Styles.css中定义一个新的CSS类，并将其命名为SelectedRowStyle。选择样式{背景色：黄色；}

要将此CSS类应用于本系列教程中所有GridView的SelectedRowStyle属性，请按如下方式编辑DataWebControls主题下的GridView.skin外观文件：

asp: GridView runat=' server ' CSS class=' DataWebControlStyle ' AlternatingRowStyle CSS class=' AlternatingRowStyle '/row style CSS class=' row style '/header CSS class=' header style '/selectedrowstyle CSS class=' selectedrowstyle '/ASP 3360修改GridView后，GridView中选定的行以黄色背景突出显示。

图8:使用GridView的SelectedRowStyle属性自定义所选行的外观。

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

完成ProductsGrid GridView后，剩下的就是添加一个DetailsView。它显示所选产品的详细信息。在GridView之上添加DetailsView控件，并创建一个名为ProductDetailsDataSource的新数据源。因为我们希望这个DetailsView显示所选产品的详细信息，所以配置ProductDetailsDataSource以使用ProductsBLL类的GetProductByProductID(ProductID)方法。

图9:调用ProductsBLL类的getproductbyProductid(product id)方法。

使productID从GridView控件的SelectedValue属性中获取参数值。正如我们前面讨论的，GridView的SelectedValue属性返回所选行的第一个数据键值。因此，必须将GridView的DataKeyNames属性设置为ProductID，以便可以通过SelectedValue属性返回所选行的ProductID。

图10:将产品标识参数与GridView的SelectedValue属性相关联。

配置productdetailsdatasource objectdata source并将其绑定到DetailsView后，本教程就完成了！第一次访问时，没有选择任何行，因此GridView的SelectedValue属性返回Null。由于不存在具有null ProductID值的产品，因此getProductByProductID(ProductID)方法不返回任何记录。DetailsView无法显示(如图11所示)。单击GridView的“选择”按钮将导致回发，并更新detailsview的SelectedValue属性。GridView的selectedvalue属性将返回所选行的productid，getproductbyproductid(product id)方法将返回特定产品的产品数据表，detailsview将显示这些详细信息(如图12所示)。

图11:第一次访问时仅显示GridView。

图12:选择一行后显示产品的详细信息。

摘要

在本教程和前面的三个教程中，我们已经看到了几种显示主/从报告的技巧。在本教程中，我们使用GridView研究了主记录的显示细节，该GridView具有由DetailsView选择的可选行和主记录。在前面的教程中，我们已经看到了如何在一个页面上使用DropDownLists显示主记录，在另一个页面上显示详细信息记录。

关于主/从的研究到本文结束。在下一篇文章中，我们将研究自定义格式的GridView、DetailsView和FormView。我们将看到如何自定义这些数据绑定控件，如何在GridView的页脚显示摘要信息，以及如何使用模板来更好地控制布局。

编程快乐！