需求簡介:電子商務網站中,查詢會員的訂單,點擊“會員”,展現此會員的訂單列表。
界面操作:
Step 1 展現會員列表,如下圖

Step 2 點擊“某一會員”行 展現會員訂單列表

實現思路:
1、 使用用戶控件(CustomerOrders.ascx)展示訂單列表,此用戶控件只需要包含Repeater控件并綁定數據源
2、 新建一個簡單頁面GridViewDrillDownjQueryQAjax.ASPx,在此頁面引用用戶控件,展示用戶訂單列表
3、 在頁面GridViewDrillDownjQueryQAjax.ASPx新建兩個DIV:一個用來展示會員信息,一個用來展示某個會員的訂單信息。當點擊某一會員信息時,展示此會員的訂單列表
實現細節:
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"> th>
<th scope="col">Order IDth>
<th scope="col">Date Orderedth>
<th scope="col">Date Requiredth>
<th scope="col" style="text-align: right;">Freightth>
<th scope="col">Date Shippedth>
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>
NET技術:使用Ajax和jQuery實現GridView的展開、合并,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。