<b>界面操作：</b>
<b></b>
Step 1 展現會員清單，如下圖
Step 2 點選“某一會員”行 展現會員訂單清單
<b>實作思路： </b>
1、 使用使用者控件（CustomerOrders.ascx）展示訂單清單，此使用者控件隻需要包含Repeater控件并綁定資料源
2、 建立一個簡單頁面GridViewDrillDownjQueryQAjax.aspx，在此頁面引用使用者控件，展示使用者訂單清單
3、 在頁面GridViewDrillDownjQueryQAjax.aspx建立兩個DIV：一個用來展示會員資訊，一個用來展示某個會員的訂單資訊。當點選某一會員資訊時，展示此會員的訂單清單
<b>實作細節：</b>
1、 建立使用者控件（CustomerOrders.ascx），拖資料源控件 和 Repeater控件到頁面，主要代碼如下
在使用者控件的背景代碼中有一屬性CustomerId，它主要用來傳遞參數
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處理事件，代碼如下：
protected override void OnLoad(EventArgs e)
{
this.sqlDsOrders.SelectParameters["CustomerID"].DefaultValue = this.CustomerId;
base.OnLoad(e);
}
3、 建立一個簡單頁面GridViewDrillDownjQueryQAjax.aspx，在此頁面引用使用者控件（CustomerOrders.ascx），展示使用者訂單清單。下面的背景方法主要用來根據會員編号（CustomerId）獲得會員的訂單清單。
[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讀取資料并折疊展示。
4、 在頁面（GridViewDrillDownjQueryQAjax.aspx）建立兩個Div 如下：
第一個Div用來展示會員資訊，第二個Div用來展示此會員下的訂單清單。當用點選會員資訊時（第一個Div），初始化Ajax請求并傳回html代碼到第二個Div，展示此會員的訂單清單。
<asp:GridView Width="100%" AllowPaging="True" ID="gvCustomers" AutoGenerateColumns="False"
DataSourceID="sqlDsCustomers" runat="server" ShowHeader="False">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div class="group" style="display:inline" id='<%#String.Format("customer{0}",Container.DataItemIndex) %>'
onclick='showhide(<%#String.Format("\"#customer{0}\"",Container.DataItemIndex) %>,
<%#String.Format("\"#order{0}\"",Container.DataItemIndex) %>,
<%#String.Format("\"{0}\"",Eval("CustomerID")) %>)'>
<asp:Image ID="imgCollapsible" CssClass="first" ImageUrl="~/Assets/img/plus.png"
Style="margin-right: 5px;" runat="server" /><span class="header">
<%#Eval("CustomerID")%>:
<%#Eval("CompanyName")%>(<%#Eval("TotalOrders")%> Orders) </span>
</div>
<div id='<%#String.Format("order{0}",Container.DataItemIndex) %>' class="order"></div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
5、第一個Divi的用戶端點選事件處理代碼調用showhide(div1Id,div2Id,customerId)方法，主要代碼如下：
function showhide(master,detail,customerId)
{
//First child of master div is the image
var src = $(master).children()[0].src;
//Switch image from (+) to (-) or vice versa.
if(src.endsWith("plus.png"))
src = src.replace('plus.png','minus.png');
else
src = src.replace('minus.png','plus.png');
//if the detail DIV is empty Initiate AJAX Call, if not that means DIV already populated with data
if($(detail).html() == "")
{
//Prepare Progress Image
var $offset = $(master).offset();
$('#progress').css('visibility','visible');
$('#progress').css('top',$offset.top);
$('#progress').css('left',$offset.left+$(master).width());
//Prepare Parameters
var params = '{customerId:"'+ customerId +'"}';
//Issue AJAX Call
$.ajax({
type: "POST", //POST
url: "GridViewDrillDownjQueryAjax.aspx/GetOrders", //Set call to Page Method
data: params, // Set Method Params
beforeSend: function(xhr) {
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");},
contentType: "application/json; charset=utf-8", //Set Content-Type
dataType: "json", // Set return Data Type
success: function(msg, status) {
$('#progress').css('visibility','hidden');
$(master).children()[0].src = src;
$(detail).html(msg);
$(detail).slideToggle("normal"); // Succes Callback
},
error: function(xhr,msg,e){
alert(msg);//Error Callback
}
});
}
//Toggle expand/collapse
$(detail).slideToggle("normal");
$(master).children()[0].src = src;
}
解釋：
type: 請求方式使用“post”
url: 請求的URL
data: 要傳的參數
beforeSend：請求發送之前所要做的操作
contentType： 設定contentType為application/json; charset=utf-8
datatype: 設定傳回類型為 json
success：請求成功傳回正确的結果後 所要操作的事情，比如向第二個div追加訂單清單html代碼，然後滑動展示。
Error： 請求失敗，彈出失敗資訊
至此，使用Ajax和Jquery實作GridView的展開和合并完畢。
版權
作者：靈動生活 郝憲玮
如果你認為此文章有用，請點選底端的【推薦】讓其他人也了解此文章，
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。