ASP.net技巧：DataList、Gridview主从表明细显示（ZZ）

图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;

}
}

wef.config中的连接字符串为：

</connectionStrings>

接下来我们来布置控件的界面：

一DataList:

给DataList1的项中添加一个一行二列的表，第一个单元格中绑定订单编号，第二个单元格中再加入一个DataList2作为此订单编号的订单详细，在DataList2的项中添加一个一行四列的表，单元格中绑定订单详细表中的字段名。给DataList1的头模版中加入一个一行五列的表，分别写入图片所示的列说明，布局源码如下：

<asp:DataList ID= "DataList1" runat= "server" BackColor= "White"

BorderColor= "#CCCCCC" BorderStyle= "None" BorderWidth= "1px" CellPadding= "3"

GridLines= "Both">

<tr>

订单编号</td>

商品编号</td>

单价</td>

数量</td>

折扣</td>

</tr>

</table>

</HeaderTemplate>

<tr>

<%#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">

<tr>

<%#Eval( "productID") %></td>

<%#Eval( "Unitprice") %></td>

<%#Eval( "Quantity") %></td>

<%#Eval( "Discount") %></td>

</tr>

</table>

</ItemTemplate>

</asp:DataList>

</td>

</tr>

</table>

</ItemTemplate>

</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" >

<asp:TemplateField>

<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">

<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>