在本文中，将探讨如何在ASP.NET中使用嵌套GridView来展示客户和其订单的详细信息。将使用Northwind数据库，并实现一个主GridView来展示客户的ContactName和City，然后为每个客户创建一个子GridView来展示其OrderID和OrderDate。
首先，需要创建一个主GridView来展示客户信息。在主GridView中，将展示客户的ContactName和City。然后，将为每个客户添加一个展开/收起的图标，当点击这个图标时，将显示对应的子GridView，展示客户的订单详情。
在主GridView中，将使用TemplateField来添加一个展开/收起的图标。同时，将为每个客户创建一个唯一的Div，用于放置子GridView。
以下是主GridView的HTML代码：
<asp:GridView ID="grdViewCustomers" runat="server" AutoGenerateColumns="false" DataKeyNames="CustomerID" OnRowDataBound="grdViewCustomers_OnRowDataBound" CssClass="Grid">
<Columns>
<asp:TemplateField ItemStyle-Width="20px">
<ItemTemplate>
<a href="javascript:divexpandcollapse('div<%# Eval("CustomerID") %>')">
<img id="imgdiv<%# Eval("CustomerID") %>" alt="Details" src="images/plus.png" />
</a>
<div id="div<%# Eval("CustomerID") %>" style="display: none;">
<asp:GridView ID="grdViewOrdersOfCustomer" runat="server" AutoGenerateColumns="false" DataKeyNames="CustomerID" CssClass="ChildGrid">
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="OrderID" HeaderText="Order ID" />
<asp:BoundField ItemStyle-Width="150px" DataField="OrderDate" HeaderText="Order Date" />
</Columns>
</asp:GridView>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="Contact Name" />
<asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
</Columns>
</asp:GridView>
在上述代码中，使用了TemplateField来添加一个展开/收起的图标，并为每个客户创建了一个唯一的Div，用于放置子GridView。
接下来，需要实现展开/收起功能。当点击展开图标时，将显示对应的子GridView；当点击收起图标时，将隐藏对应的子GridView。
以下是实现展开/收起功能的JavaScript代码：
function divexpandcollapse(divname) {
var img = "img" + divname;
if ($("#" + img).attr("src") == "images/plus.png") {
$("#" + img).closest("tr").after($("#" + divname).html());
$("#" + img).attr("src", "images/minus.png");
} else {
$("#" + img).closest("tr").next().remove();
$("#" + img).attr("src", "images/plus.png");
}
}
在上述代码中，使用了jQuery来实现展开/收起功能。当点击展开图标时，将显示对应的子GridView；当点击收起图标时，将隐藏对应的子GridView。
最后，需要在主GridView的OnRowDataBound事件中填充子GridView。
以下是填充子GridView的C#代码：
protected void Page_Load(object sender, EventArgs e)
{
grdViewCustomers.DataSource = SelectData("SELECT top 3 CustomerID, ContactName, City FROM Customers");
grdViewCustomers.DataBind();
}
private DataTable SelectData(string sqlQuery)
{
string connectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["SQLServerConnectionString"].ConnectionString;
using (SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(sqlQuery, connectionString))
{
DataTable dt = new DataTable("Customers");
sqlDataAdapter.Fill(dt);
return dt;
}
}
protected void grdViewCustomers_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string customerID = grdViewCustomers.DataKeys[e.Row.RowIndex].Value.ToString();
GridView grdViewOrdersOfCustomer = (GridView)e.Row.FindControl("grdViewOrdersOfCustomer");
grdViewOrdersOfCustomer.DataSource = SelectData("SELECT top 3 CustomerID, OrderID, OrderDate FROM Orders WHERE CustomerID='" + customerID + "'");
grdViewOrdersOfCustomer.DataBind();
}
}
在上述代码中，在主GridView的OnRowDataBound事件中填充子GridView。