[主細表 / 主表明細]GridView + DetailsView兩者的資料與"頁數"連動

2009-09-10

練習 GridView / DetailsView分頁的技巧，學會兩個控制項的分頁事件 (連動 / 互動)

(提供 YouTube 線上影片教學)

這個問題，原發問者在藍色小舖的提問

http://www.blueshop.com.tw/board/show.asp?subcde=BRD20090909182013MZN&fumcde=FUM20041006161839LRJ

說真的，我看不懂他想問啥？

直到一位好朋友重新描述了他的問題，我才看懂。

題目 ----

我一支網頁裡,同時放二個東西,
一個是 GridView, 每頁 5 筆,用來顯示會員記錄, 下方有一個分頁列
一個是表單,用來編輯單筆會員記錄, 下方也有一個分頁列,方便使用者按"下一筆","上一筆",不必去按 GridView 的某一筆才能進行編輯
問題是, 若在表單處一直按 "下一筆",希望按到第 6筆時,上方 GridView 也能自動變成第 2 頁

(因為 5 筆一頁,所以第 6筆,算是 GridView第 2 頁)

Allen Kuo最早給了解法，而且還套用了 Design Pattern，實在很厲害

請看他的解法。http://www.allenkuo.com/EBook5/view.aspx?TreeNodeID=55&id=607

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

我沒有那麼厲害，但我想用初學者也能接受的方法來作。

以下是我的解法：

YouTube影片分享： https://youtu.be/fGxCODffrmU

本範例收入在「深入探索 .NET資料存取：ADO.NET + SqlDataSource+ LINQ (松崗出版)」書本裡面 -- http://m.sanmin.com.tw/Product/Index/005895863

靠畫面設定、盡量少寫程式，也完成了一小部份。（不敢說毫無Bug）

我的想法很簡單。

這個問題的主角是「DetailsView」，當他一筆一筆的換頁

GridView的頁數必須隨之連動。

我的 GridView 每一頁，呈現五筆資料

根據題目的要求：

若在表單處一直按 "下一筆",希望按到第 6筆時,上方 GridView 也能自動變成第 2 頁

(因為 5 筆一頁,所以第 6筆,算是 GridView第 2 頁)

這個問題主要是在：練習 GridView / DetailsView分頁的技巧，學會兩個控制項的分頁事件

在HTML畫面的設計上，我用了 GridView + SqlDataSource1

DetailsView1 + SqlDataSource2

兩者都很簡單啦，只是用來呈現出所有資料，並且讓控制項都有「分頁」的功能罷了。

01         <asp:GridView ID="GridView1" runat="server" AllowPaging="True"
02             AutoGenerateColumns="False" CellPadding="4" DataKeyNames="id"
03             DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" PageSize="5">
04             <RowStyle BackColor="#E3EAEB" />
05             <Columns>
06                      .....省略.....
07             </Columns>
08             <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
09             <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
10         </asp:GridView>
11
12         <asp:SqlDataSource ID="SqlDataSource1" runat="server"
13             ConnectionString="<%$ ConnectionStrings:testConnectionString1 %>"
14             SelectCommand="SELECT * FROM [test]"></asp:SqlDataSource>
15         <br />
16         <hr />
17
18         <br />
19         <asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True"
20             AutoGenerateRows="False" CellPadding="4" DataKeyNames="id"
21             DataSourceID="SqlDataSource2" ForeColor="#333333" GridLines="None"
22             Height="50px" Width="388px">
23             <PagerSettings Position="TopAndBottom" />
24             <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
25             <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
26             <Fields>
27                 省略....
28             </Fields>
29             <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
30         </asp:DetailsView>
31         <asp:SqlDataSource ID="SqlDataSource2" runat="server"
32             ConnectionString="<%$ ConnectionStrings:testConnectionString1 %>"
33             SelectCommand="SELECT * FROM [test]">
34         </asp:SqlDataSource>

後置程式碼 for VB，如下：

Protected Sub DetailsView1_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DetailsViewPageEventArgs) Handles DetailsView1.PageIndexChanging
02

DetailsView1.PageIndex = e.NewPageIndex
04

DetailsView1.DataSourceID = "SqlDataSource2"
05

'====================================
07

'-- 這個問題的主角是「DetailsView」，當他一筆一筆的換頁
08

'-- GridView的頁數必須隨之連動。
09

'====================================
10

'-- 運算子「\」表示除法裡面的商數
11

GridView1.PageIndex = (e.NewPageIndex \ 5)
12

GridView1.DataSourceID = "SqlDataSource1"
14

End Sub

完成了.............

啥？還不滿意？？？？

你說「當GridView換頁的時候，底下的 DetailsView也要跟著連動？？？？」

「DetailsView變換頁數時，GridView裡面的每一列資料光棒效果也要連動？？」

這個解答就留給你來解囉？

其實作法一模一樣，不是嗎？

我將思想傳授他人，他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

線上課程教學，遠距教學 (Web Form 約 51hr) https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學，遠距教學 (ASP.NET MVC 約 140hr) https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

寫信給我，不要私訊 -- mis2000lab (at) yahoo.com.tw 或 school (at) mis2000lab.net

(1) 第一天 ASP.NET MVC5 完整影片（5.5小時 / .NET 4.x版）免費試聽。影片 https://youtu.be/9spaHik87-A

(2) 第一天 ASP.NET Core MVC 完整影片（3小時 / .NET Core 6.0~8.0）免費試聽。影片 https://youtu.be/TSmwpT-Bx4I

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm 。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b

ASP.NET遠距教學、線上課程（Web Form + MVC）。第一天課程， "完整" 試聽。

......... facebook社團 https://www.facebook.com/mis2000lab ......................

......... YouTube (ASP.NET) 線上教學影片 https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

Blog文章 "附的範例" 無法下載，請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍（嚴格認定）。

......................................................................................................................................................

ASP.NET MVC => .NET Core MVC 線上教學 ...... 第一天課程完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程上線了！MIS2000Lab.主講事先錄好的影片，並非上課側錄！觀看時，有如「一對一」面對面講課。

回首頁

ASP.NET專題實務 WebForm + MVC線上教學影片 -- MIS2000Lab.

MIS2000 Lab.已推出20餘本電腦書，曾任資策會專任講師與微軟MVP。自.NET 1.x起，已出版15本ASP.NET (Web Form)書籍，也有遠距教學線上教程教學影片