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;

}
}

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>