在ASP.NET 2.0中操作数据之十：使用 GridView和DetailView实现的主/从报表

导言
　　在前面的教程我们看到了如何使用两个页面(一个主页,用于列出供应商; 一个明细页,用于显示选定供应商提供的产品)创建主/从报表 . 这种两个页面的报表格式也可以集中在一个页面上. 这篇教程将会使用一个gridview, 它的每一行都包含产品的名称和单价以及一个选择按钮. 单击一个产品的选择按钮会在同一页的detailsview控件上显示该产品的全部详细信息.

图 1: 单击选择按钮显示产品明细

step 1: 创建一个可选择行的gridview

　　回想一下前面的跨页的主/从报表, 它的每个主记录包含了一个超链接, 当点击该链接时转到详细信息页,并在查询字符串中传递所单击行的supplierid值. 这个链接是通过在gridview上使用hyperlinkfield实现的. 对于单页的主/从报表,每个gridview行需要一个按钮, 单击该按钮时显示详细信息. gridview控件可以在每行包含一个选择按钮, 单击该按钮时会引起一次回发并把该行做为gridview的selectedrow值.

　　先给filtering 文件夹下的detailsbyselecting.aspx页添加一个gridview控件, 设置id属性为productsgrid, 然后增加一个新的objectdatasource并命名为allproductsdatasource, 它调用productsbll类的getproducts()方法

图 2: 创建一个objectdatasource 并命名为allproductsdatasource

图3: 使用productsbll 类

图4: 配置 objectdatasource 调用 getproducts() 方法

　　编辑gridview的字段, 移除productname和unitprice以外的字段. 也可以根据需要自定义绑定字段,比如格式化utitprice字段为货币,修改绑定字段的headertext属性. 这些操作可以在设计视图完成, 单击gridview智能标记上的编辑列, 或是手工配置声明的语法.

图 5: 移除 productname 和 unitprice 以外的列.

最后的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为可以选择行, 这会为每一行增加一个选择按钮. 要实现该功能, 只要选中gridview智能标记上的”启用选定内容”的复选框就可以了.

图6: 让 gridview 的行可选

　　选中”启用选定内容”项会给productsgrid gridview增加一个命令字段并设置showselectbutton属性为true.这样gridview的每一行都会有一个选择按钮, 如图6所示. 默认情况下, 选择按钮以链接的形式呈现, 但是你也可以使用按钮或图片按钮来代替, 修改commandfield的buttontype属性即可.

<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的选择按钮时会引起一次回发, gridview的 selectedrow属性也会更新. 除了selectedrow属性, gridview还提供了selectedindex, selectedvalue, 和 selecteddatakey属性. selectedindex属性返回选中行的索引, selectedvalue和selecteddatakey属性返回基于gridview的datakeynames属性的值.

　　datakeynames属性让每一行关联一个或多个数据字段, 经常用于唯一标识gridview行. selectedvalue属性返回选中行的datakeynames中的第一个数据字段的值, selecteddatakey返回选中行的datakey对象, 它包含了该行的所有指定数据主键字段的值.

　　在设计视图上绑定数据源到gridview, detailsview, formview时datakeynames属性被自动设置为数据源中唯一标识的数据字段. 尽管在前面的教程中这个属性都是自动设置的, 示例可以不需要专门指定的datakeynames属性就可以运行. 但对于本教程中的可选择行的gridview以及后面我们要研究gridview中的新增,更新,删除的教程中, datakeynames属性必须合理地设置.确保gridview的datakeynames属性已经设置为productid.

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

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

高亮显示选中行

productsgrid gridview 有一个selectedrowstyle属性, 该属性决定了选中行的外观. 合理的使用可以更清晰的显示当前选中的行以改善用户体验. 对于本教程, 我们使用黄色的背景来高亮显示选中行.

与前面的教程一样, 我们要尽量保持美的外观.在styles.css中定义一个新的css类并命名为selectedrowstyle.

.selectedrowstyle
{
background-color: yellow;
}

要对本系列教程中的所有gridview的selectedrowstyle属性应用这个css类,编辑datawebcontrols 主题下的gridview.skin外观文件如下:

<asp:gridview runat="server" cssclass="datawebcontrolstyle">
<alternatingrowstyle cssclass="alternatingrowstyle" />
<rowstyle cssclass="rowstyle" />
<headerstyle cssclass="headerstyle" />
<selectedrowstyle cssclass="selectedrowstyle" />
</asp:gridview>

修改后,gridview的选中行用黄色的背景高亮显示

图 8:使用 gridview的 selectedrowstyle 属性自定义选中行的外观

step 2: 在detailsview中显示选中产品的详细信息

　　完成productsgrid gridview后, 剩下就是增加一个detailsview, 它显示选中的产品的详细信息. 在gridview的上方添加一个detailsview控件并创建一个新的数据源命名为productdetailsdatasource. 由于我们想让这个detailsview显示选中产品的详细信息, 配置productdetailsdatasource使用productsbll类的getproductbyproductid(productid)方法.

图9: 调用 productsbll 类的getproductbyproductid(productid) 方法

　　让productid从gridview控件的selectedvalue属性获取参数值.如同我们前面讨论过的, gridview的selectedvalue属性返回选中行的第一个数据键值. 因此必须把gridview的datakeynames属性设置为productid, 这样选中行的productid就可以通过selectedvalue属性返回了.

图10: 把productid 参数关联到gridview的 selectedvalue 属性.

　　配置好productdetailsdatasource objectdatasource并把它绑定到detailsview后, 这篇教程就算完成了! 第一次访问时没有行被选中, 所以gridview的 selectedvalue属性返回null. 由于没有productid值为null的产品, getproductbyproductid(productid)方法不返回任何记录, detailsview也就无法显示(如图11). 单击gridview的选择按钮后会引起一次回发并更新detailsview. gridview的selectedvalue属性返回选中行的productid, getproductbyproductid(productid)方法返回特定产品的信息productsdatatable, detailsview显示这些详细信息(如图12).

图11: 第一次访问时只显示gridview

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

总结

　　在本篇和前面的三篇教程中我们看到了显示主/从报表的几种技巧. 在这篇教程中我们研究了使用可选择行的gridview显示主记录以及detailsview选中主记录的显示详细. 在前面的教程中我们看到了如何在一个页面使用dropdownlists 显示主记录而在另一个页面显示详细信息记录.

　　对主/从的研究到本篇就结束了. 从下一篇开始我们将研究自定义格式化的gridview, detailsview及formview. 我们将会看到如何自定义这些数据绑定控件, 如何在gridview的页脚显示概括信息, 以及如何使用模板更好控制布局.

祝编程愉快!