实例：Ajax+Jquery实现GridView的展开、合并效果(2)

Code
<asp:SqlDataSource ID="sqlDsOrders" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind %>"
    SelectCommand="SELECT [OrderID], [OrderDate], [RequiredDate], [Freight], [ShippedDate] FROM [Orders] WHERE ([CustomerID] = @CustomerID)">
    <SelectParameters>
        <asp:Parameter Name="CustomerID" Type="String" DefaultValue="" />
    </SelectParameters>
</asp:SqlDataSource>
<asp:Repeater ID="List" DataSourceID="sqlDsOrders" runat="server">
    <HeaderTemplate>
        <table class="grid" cellspacing="0" rules="all" border="1" style="border-collapse: collapse;">
            <tr>
                <th scope="col">&nbsp;</th>
                <th scope="col">Order ID</th>
                <th scope="col">Date Ordered</th>
                <th scope="col">Date Required</th>
                <th scope="col" style="text-align: right;">Freight</th>
                <th scope="col">Date Shipped</th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr class='<%# (Container.ItemIndex%2==0) ? "row" : "altrow" %>'>
            <td class="rownum"><%# Container.ItemIndex+1 %></td>
            <td style="width: 80px;"><%# Eval("OrderID") %></td>
            <td style="width: 100px;"><%# Eval("OrderDate","{0:dd/MM/yyyy}") %></td>
            <td style="width: 110px;"><%# Eval("RequiredDate", "{0:dd/MM/yyyy}")%></td>
            <td style="width: 50px; text-align: right;"><%# Eval("Freight","{0:F2}") %></td>
            <td style="width: 100px;"><%# Eval("ShippedDate", "{0:dd/MM/yyyy}")%></td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

 2、 重写用户控件（CustomerOrders.ascx）的OnLoad处理事件，代码如下：

Code
protected override void OnLoad(EventArgs e)
    {
        this.sqlDsOrders.SelectParameters["CustomerID"].DefaultValue = this.CustomerId;
        base.OnLoad(e);
    }
 

 3、  新建一个简单页面GridViewDrillDownjQueryQAjax.aspx，在此页面引用用户控件（CustomerOrders.ascx），展示用户订单列表。下面的后台方法主要用来根据会员编号（CustomerId）获得会员的订单列表。

Code
[System.Web.Services.WebMethod()]
    public static string GetOrders(string customerId)
    {
        System.Threading.Thread.Sleep(500);
        Page page = new Page();
        CustomerOrders ctl = (CustomerOrders)page.LoadControl("~/CustomerOrders.ascx");
        ctl.CustomerId = customerId;
        page.Controls.Add(ctl);
        System.IO.StringWriter writer = new System.IO.StringWriter();
        HttpContext.Current.Server.Execute(page, writer, false);
        string output = writer.ToString();
        writer.Close();
        return output;
    }
以上3步主要完成的是后台代码，那么接下来我们需要做的是： 使用Ajax读取数据并折叠展示。