在网络上看到很多 GridView 内含子 GridView 的范例,虽然方法不同不过程序代码都有点小复杂,想说难道没有更简单易懂的方法吗?
在此文章中将用十几行的程序代码,就教你快速学会并搞定这种 Master-Detail GridView 的需求。
程序代码实作
我们以 Northwind 数据库为例,首先在页面上放置二组 GridView+SqlDataSoruce,分别系结至 [Orders] 、[Order Details] 这二个资料表。
![](http://files.dotblogs.com.tw/jeff377/0806/MasterDetailGridViewGridView_1252/image_2.png)
我們先來看一下它的程式碼及執行結果,後續再做進一步的詳細說明。
我們只要在 GridView 的 RowDataBound 事件撰寫下面十幾行的程式碼就完成了,不要懷疑這已經是全部的程式碼。
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
执行程序,选取 GridView 的某一数据列,就会展开其子 GridView 。执行换页动作,一样可以正常展开子 GridView。
![](http://files.dotblogs.com.tw/jeff377/0806/MasterDetailGridViewGridView_1252/image_6.png)
![](http://files.dotblogs.com.tw/jeff377/0806/MasterDetailGridViewGridView_1252/image_8.png)
接下来说明这个范例的一些细节,Master GridView 系结 [Orders] 数据表,设定 DataKeyNames="OrderID",当选取某笔数据时,GridView 的 SelectedValue 就是该笔数据的 OrderID 字段值。另外设定 GridView 的 EnableViewState="False",这个设定主要是让 GridView 选取时都会重新做 DataBind 的动作。
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
再来就是 Detail GridView 系结 [Order Details] 数据表,一样设定 GridView 的 EnableViewState="False",且设定 Visible="False",也就是初始状态 Detail GridView 是隐藏的。
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Detail GridView 所系结的 SqlDataSource 控件,将其 SelectParameters 的 @OrderID 参数关连至 Master GridView 的 SelectedValue。
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
再来还有一个重要步骤,就是在 aspx 程序代码中,要设定 Page 的 EnableEventValidation="false",因为我们动态将 Detail GridView Render 出来插入 Master GridView 中,整个控件阶层都被异动,这样会造成事件验证失败。
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
另外在 Master GridView 的 RowDataBound 事件中,有一个 ControlToHTML 方法是取得 Detail GridView 的 HTML 码,这个方法可以参考笔者另一篇「使用 BasePage 来解决 GridView 执行 RenderControl 产生的错误」文章有详细说明。
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)