ASP.net技巧：DataList、Gridview主从表明细显示
图1.使用DataList显示主从表明细
图2.使用Gridview显示主从表明细
数据库为SQL Server实例数据库Northwind，实现按照订单编号，统计显示出订单详情。
一构建Northwind库中Orders订单表以及Order Details订单详细表在DataSet中的表关系：
public class DataAccess
{
public DataSet Tablerelation()
{
string strCon = ConfigurationManager.ConnectionStrings[ "NorthwindConnectionString"].ConnectionString;
//构建连接
SqlConnection con = new SqlConnection(strCon);
//多个表来源于相同数据库我们可以讲sql语句一起书写，但需要注意的是，必须在语句间用空格隔开
SqlDataAdapter da = new SqlDataAdapter( "select * from orders select * from [order details]",con);
DataSet ds = new DataSet();
da.Fill(ds);
//我们也可以修改默认生成的（Table、Table1、……）表名
ds.Tables [0].TableName= "orders";
ds.Tables[1].TableName = "orderDetails";
//找到两个表中相关联的列
DataColumn father = ds.Tables[ "orders"].Columns[ "OrderID"];
DataColumn son = ds.Tables[ "orderDetails"].Columns[ "OrderID"];
//给两个列，建立名为tablerelation的关系
DataRelation r = new DataRelation( "tablerelation", father, son);
//将表关系添加到数据集中
ds.Relations.Add(r);
return ds;
}
}
{
string strCon = ConfigurationManager.ConnectionStrings[ "NorthwindConnectionString"].ConnectionString;
//构建连接
SqlConnection con = new SqlConnection(strCon);
//多个表来源于相同数据库我们可以讲sql语句一起书写，但需要注意的是，必须在语句间用空格隔开
SqlDataAdapter da = new SqlDataAdapter( "select * from orders select * from [order details]",con);
DataSet ds = new DataSet();
da.Fill(ds);
//我们也可以修改默认生成的（Table、Table1、……）表名
ds.Tables [0].TableName= "orders";
ds.Tables[1].TableName = "orderDetails";
//找到两个表中相关联的列
DataColumn father = ds.Tables[ "orders"].Columns[ "OrderID"];
DataColumn son = ds.Tables[ "orderDetails"].Columns[ "OrderID"];
//给两个列，建立名为tablerelation的关系
DataRelation r = new DataRelation( "tablerelation", father, son);
//将表关系添加到数据集中
ds.Relations.Add(r);
return ds;
}
}
wef.config中的连接字符串为：
<connectionStrings>
<add name= "NorthwindConnectionString" connectionString= "Data Source=.;Initial Catalog=Northwind;Integrated Security=True" providerName= "System.Data.SqlClient"/>
</connectionStrings>
接下来我们来布置控件的界面：
一DataList:
给DataList1的项中添加一个一行二列的表，第一个单元格中绑定订单编号，第二个单元格中再加入一个DataList2作为此订单编号的订单详细，在DataList2的项中添加一个一行四列的表，单元格中绑定订单详细表中的字段名。给DataList1的头模版中加入一个一行五列的表，分别写入图片所示的列说明，布局源码如下：
<asp:DataList ID= "DataList1" runat= "server" BackColor= "White"
BorderColor= "#CCCCCC" BorderStyle= "None" BorderWidth= "1px" CellPadding= "3"
GridLines= "Both">
<ItemStyle ForeColor= "#000066" />
<SelectedItemStyle BackColor= "#669999" Font-Bold= "True" ForeColor= "White" />
<HeaderTemplate>
<table class= "style1" >
<tr>
<td width= "70">
订单编号</td>
<td width= "70">
商品编号</td>
<td width= "70">
单价</td>
<td width= "70">
数量</td>
<td width= "70">
折扣</td>
</tr>
</table>
</HeaderTemplate>
<FooterStyle BackColor= "White" ForeColor= "#000066" />
<ItemTemplate>
<table class= "style1">
<tr>
<td width= "70">
<%#Eval( "OrderID") %></td>
<td>
<asp:DataList ID= "DataList2" runat= "server"
DataSource ='<%# ((System.Data.DataRowView)Container.DataItem).CreateChildView("tablerelation") %>' Width = "100%" BackColor= "White" BorderColor= "#CC9966" BorderStyle= "None"
BorderWidth= "1px" CellPadding= "4" GridLines= "Both">
<FooterStyle BackColor= "#FFFFCC" ForeColor= "#330099" />
<ItemTemplate>
<table class= "style1">
<tr>
<td width= "70">
<%#Eval( "productID") %></td>
<td width= "70">
<%#Eval( "Unitprice") %></td>
<td width= "70">
<%#Eval( "Quantity") %></td>
<td width= "70">
<%#Eval( "Discount") %></td>
</tr>
</table>
</ItemTemplate>
<ItemStyle BackColor= "White" ForeColor= "#330099" />
<SelectedItemStyle BackColor= "#CC3333" Font-Bold= "True" ForeColor= "White" />
<HeaderStyle BackColor= "#990000" Font-Bold= "True" ForeColor= "#FFFFCC" />
</asp:DataList>
</td>
</tr>
</table>
</ItemTemplate>
<HeaderStyle BackColor= "#006699" Font-Bold= "True" ForeColor= "White" />
</asp:DataList>
其中用黄色背景加粗显示的为DataList2的数据源将是根据该项中的订单编号，在表关系名“tablerelation”中找到对应的订单详情，创建一个视图。
DataList1的数据源将绑定我们以及构建好的DataSet，代码如下：
protected void Page_Load( object sender, EventArgs e)
{
if (!IsPostBack)
{
Bind();
}
}
//绑定控件显示
void Bind()
{
DataAccess da = new DataAccess();
DataSet ds = da.Tablerelation();
DataList1.DataSource = ds.Tables[0];
DataList1.DataBind();
GridView2.DataSource = ds.Tables[0];
GridView2.DataBind();
}
二、使用Gridview的方式类似，首先将Gridview2的自动生成列AutoGenerateColumns="False"改为false，然后在Gridview2手动加入自定义项TemplateField中编辑模版，加入二行一列的表格，第一行绑定订单编号，第二行加入Gridview3，用于显示订单明细，自动生成列AutoGenerateColumns="False"改为false,加入自定义绑定的四个项目，如 <asp:BoundField DataField="productID" HeaderText="商品编号" />，源码如下：
<asp:GridView ID= "GridView2" runat= "server" AutoGenerateColumns= "False"
CellPadding= "4" ForeColor= "#333333" GridLines= "None" >
<FooterStyle BackColor= "#5D7B9D" Font-Bold= "True" ForeColor= "White" />
<RowStyle BackColor= "#F7F6F3" ForeColor= "#333333" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table class= "style1">
<tr>
<td>
订单编号： <%#Eval( "OrderID") %></td>
</tr>
<tr>
<td>
<asp:GridView ID="GridView3" runat="server" DataSource ='<%# ((System.Data.DataRowView)Container.DataItem).CreateChildView("order") %>' DataMember= "orderID" AutoGenerateColumns= "False">
<Columns>
<asp:BoundField DataField= "productID" HeaderText= "商品编号" />
<asp:BoundField DataField= "Unitprice" HeaderText= "商品单价" />
<asp:BoundField DataField= "Quantity" HeaderText= "商品数量" />
<asp:BoundField DataField= "Discount" HeaderText= "折扣" />
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle BackColor= "#284775" ForeColor= "White" HorizontalAlign= "Center" />
<SelectedRowStyle BackColor= "#E2DED6" Font-Bold= "True" ForeColor= "#333333" />
<HeaderStyle BackColor= "#5D7B9D" Font-Bold= "True" ForeColor= "White" />
<EditRowStyle BackColor= "#999999" />
<AlternatingRowStyle BackColor= "White" ForeColor= "#284775" />
</asp:GridView>