10-使用 GridView 和DetailView实现的主从报表.docx

导言在前面的教程我们看到了如何使用两个页面(一个主页,用于列出供应商; 一个明细页,用于显示选定供应商提供的产品)创建主/从报表 . 这种两个页面的报表格式也可以集中在一个页面上. 这篇教程将会使用一个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=ProductIDDataSourceID=AllProductsDataSource EnableViewState=FalseColumnsasp:BoundField DataField=ProductName HeaderText=Product SortExpression=ProductName /asp:BoundField DataField=UnitPrice DataFormatString={0:c} HeaderText=Unit PriceHtmlEncode=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=ProductIDDataSourceID=AllProductsDataSource EnableViewState=FalseColumnsasp:CommandField ShowSelectButton=True /asp:BoundField DataField=ProductName HeaderText=Product SortExpression=ProductName /asp:BoundField DataField=UnitPrice DataFormatString={0:c} HeaderText=Unit PriceHtmlEncode=False SortExpression=UnitPrice //Columns/asp:Grid