您的位置:知识库 » .NET技术

ASP.NET 2.0数据教程之十:使用 GridView 和DetailView实现的主/从报表

作者: 立冬  来源: 博客园  发布时间: 2008-10-13 11:37  阅读: 8483 次  推荐: 0   原文链接   [收藏]  

系列文章导航:

ASP.NET 2.0数据教程之一:创建一个数据访问层

ASP.NET 2.0数据教程之二:创建一个业务逻辑层

ASP.NET 2.0数据教程之三:母板页和站点导航

ASP.NET 2.0数据教程之四:使用ObjectDataSource展现数据

ASP.NET 2.0数据教程之五:声明参数

ASP.NET 2.0数据教程之六:编程设置ObjectDataSource的参数值

ASP.NET 2.0数据教程之七:使用DropDownList过滤的主/从报表

ASP.NET 2.0数据教程之八:使用两个DropDownList过滤的主/从报表

ASP.NET 2.0数据教程之九:跨页面的主/从报表

ASP.NET 2.0数据教程之十:使用 GridView 和DetailView实现的主/从报表

ASP.NET 2.0数据教程之十一:基于数据的自定义格式化

ASP.NET 2.0数据教程之十二:在GridView控件中使用TemplateField


选中”启用选定内容”项会给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 属性自定义选中行的外观

0
0

.NET技术热门文章

    .NET技术最新文章

      最新新闻

        热门新闻