Scott Mitchell的ASP.NET 2.0数据操作教程之十:使用GridView和DetailView实

高亮显示选中行 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属性返回了.

图1