GridView 與 DetailsView 連動 - 繫結同一個 SqlDataSource

若在頁面中包含了一個 GridView 及 DetailsView 控制項，當 GridView 選取某一筆時，希望在 DetailsView 中顯示那一筆的詳細資料。一般的作法會讓 GridView 及 DetailsView 會繫結各別獨立的 SqlDataSoruce，當 GridView 選取時就以主鍵去對 DetailsView 的 SqlDataSource 做篩選資料的動作。

不過本文的作法不同，讓 GirdView 與 DetailsView 繫結到同一個 SqlDataSource，而且只要撰寫很少的程式碼，就可以達到 GridView 與 DetailsView 連動的需求。

以 Northwind 資料庫的 Products 資料表為資料來源，首先在頁面放置一個 SqlDataSource 控制項。頁面左邊放置一個 GridView，GridView啟用分頁及選取。頁面右邊放置一個 DetailsView，並啟用編輯。GridView 與 DetailsView 繫結到同一個 SqlDataSource。



aspx 程式碼如下

 1  <% @ Page Language = " VB "  AutoEventWireup = " false "  CodeFile = " Default.aspx.vb "  Inherits = " _Default "   %>
 2 
 3  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 4 
 5  < html  xmlns ="http://www.w3.org/1999/xhtml"   >
 6  < head  runat ="server" >
 7       < title > 未命名頁面 </ title >
 8  </ head >
 9  < body >
10       < form  id ="form1"  runat ="server" >
11       < div >
12           < table  style ="width:100%" >
13               < tr >
14                   < td  style ="width: 337px"  valign ="top" >
15           < asp:GridView  ID ="GridView1"  runat ="server"  AllowPaging ="True"  AutoGenerateColumns ="False"
16              DataKeyNames ="ProductID"  DataSourceID ="SqlDataSource1"  EmptyDataText ="沒有資料錄可顯示。"  CellPadding ="4"  ForeColor ="#333333"  GridLines ="None" >
17               < Columns >
18                   < asp:CommandField  ShowSelectButton ="True"   />
19                   < asp:BoundField  DataField ="ProductID"  HeaderText ="ProductID"  ReadOnly ="True"  SortExpression ="ProductID"   />
20                   < asp:BoundField  DataField ="ProductName"  HeaderText ="ProductName"  SortExpression ="ProductName"   />
21               </ Columns >
22               < FooterStyle  BackColor ="#5D7B9D"  Font-Bold ="True"  ForeColor ="White"   />
23               < RowStyle  BackColor ="#F7F6F3"  ForeColor ="#333333"   />
24               < EditRowStyle  BackColor ="#999999"   />
25               < SelectedRowStyle  BackColor ="#E2DED6"  Font-Bold ="True"  ForeColor ="#333333"   />
26               < PagerStyle  BackColor ="#284775"  ForeColor ="White"  HorizontalAlign ="Center"   />
27               < HeaderStyle  BackColor ="#5D7B9D"  Font-Bold ="True"  ForeColor ="White"   />
28               < AlternatingRowStyle  BackColor ="White"  ForeColor ="#284775"   />
29           </ asp:GridView >
30                   </ td >
31                   < td  valign ="top" >
32           < asp:DetailsView  ID ="DetailsView1"  runat ="server"  AutoGenerateRows ="False"  DataKeyNames ="ProductID"
33              DataSourceID ="SqlDataSource1"  Height ="50px"  Width ="400px"  CellPadding ="4"  ForeColor ="#333333"  GridLines ="None" >
34               < Fields >
35                   < asp:BoundField  DataField ="ProductID"  HeaderText ="ProductID"  InsertVisible ="False"
36                      ReadOnly ="True"  SortExpression ="ProductID"   />
37                   < asp:BoundField  DataField ="ProductName"  HeaderText ="ProductName"  SortExpression ="ProductName"   />
38                   < asp:BoundField  DataField ="SupplierID"  HeaderText ="SupplierID"  SortExpression ="SupplierID"   />
39                   < asp:BoundField  DataField ="CategoryID"  HeaderText ="CategoryID"  SortExpression ="CategoryID"   />
40                   < asp:BoundField  DataField ="QuantityPerUnit"  HeaderText ="QuantityPerUnit"  SortExpression ="QuantityPerUnit"   />
41                   < asp:BoundField  DataField ="UnitPrice"  HeaderText ="UnitPrice"  SortExpression ="UnitPrice"   />
42                   < asp:BoundField  DataField ="UnitsInStock"  HeaderText ="UnitsInStock"  SortExpression ="UnitsInStock"   />
43                   < asp:BoundField  DataField ="UnitsOnOrder"  HeaderText ="UnitsOnOrder"  SortExpression ="UnitsOnOrder"   />
44                   < asp:BoundField  DataField ="ReorderLevel"  HeaderText ="ReorderLevel"  SortExpression ="ReorderLevel"   />
45                   < asp:CheckBoxField  DataField ="Discontinued"  HeaderText ="Discontinued"  SortExpression ="Discontinued"   />
46                   < asp:CommandField  ShowEditButton ="True"   />
47               </ Fields >
48               < FooterStyle  BackColor ="#990000"  Font-Bold ="True"  ForeColor ="White"   />
49               < CommandRowStyle  BackColor ="#FFFFC0"  Font-Bold ="True"   />
50               < RowStyle  BackColor ="#FFFBD6"  ForeColor ="#333333"   />
51               < PagerStyle  BackColor ="#FFCC66"  ForeColor ="#333333"  HorizontalAlign ="Center"   />
52               < FieldHeaderStyle  BackColor ="#FFFF99"  Font-Bold ="True"   />
53               < HeaderStyle  BackColor ="#990000"  Font-Bold ="True"  ForeColor ="White"   />
54               < AlternatingRowStyle  BackColor ="White"   />
55           </ asp:DetailsView >
56                   </ td >
57               </ tr >
58           </ table >
59           < br  />
60           < br  />
61              </ div >
62           < asp:SqlDataSource  ID ="SqlDataSource1"  runat ="server"  ConnectionString ="<%$ ConnectionStrings:NorthwindConnectionString1 %>"
63              DeleteCommand ="DELETE FROM [Products] WHERE [ProductID] = @ProductID"  InsertCommand ="INSERT INTO [Products] ([ProductName], [SupplierID], [CategoryID], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [UnitsOnOrder], [ReorderLevel], [Discontinued]) VALUES (@ProductName, @SupplierID, @CategoryID, @QuantityPerUnit, @UnitPrice, @UnitsInStock, @UnitsOnOrder, @ReorderLevel, @Discontinued)"
64              ProviderName ="<%$ ConnectionStrings:NorthwindConnectionString1.ProviderName %>"
65              SelectCommand ="SELECT [ProductID], [ProductName], [SupplierID], [CategoryID], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [UnitsOnOrder], [ReorderLevel], [Discontinued] FROM [Products]"
66              UpdateCommand ="UPDATE [Products] SET [ProductName] = @ProductName, [SupplierID] = @SupplierID, [CategoryID] = @CategoryID, [QuantityPerUnit] = @QuantityPerUnit, [UnitPrice] = @UnitPrice, [UnitsInStock] = @UnitsInStock, [UnitsOnOrder] = @UnitsOnOrder, [ReorderLevel] = @ReorderLevel, [Discontinued] = @Discontinued WHERE [ProductID] = @ProductID" >
67               < InsertParameters >
68                   < asp:Parameter  Name ="ProductName"  Type ="String"   />
69                   < asp:Parameter  Name ="SupplierID"  Type ="Int32"   />
70                   < asp:Parameter  Name ="CategoryID"  Type ="Int32"   />
71                   < asp:Parameter  Name ="QuantityPerUnit"  Type ="String"   />
72                   < asp:Parameter  Name ="UnitPrice"  Type ="Decimal"   />
73                   < asp:Parameter  Name ="UnitsInStock"  Type ="Int16"   />
74                   < asp:Parameter  Name ="UnitsOnOrder"  Type ="Int16"   />
75                   < asp:Parameter  Name ="ReorderLevel"  Type ="Int16"   />
76                   < asp:Parameter  Name ="Discontinued"  Type ="Boolean"   />
77               </ InsertParameters >
78               < UpdateParameters >
79                   < asp:Parameter  Name ="ProductName"  Type ="String"   />
80                   < asp:Parameter  Name ="SupplierID"  Type ="Int32"   />
81                   < asp:Parameter  Name ="CategoryID"  Type ="Int32"   />
82                   < asp:Parameter  Name ="QuantityPerUnit"  Type ="String"   />
83                   < asp:Parameter  Name ="UnitPrice"  Type ="Decimal"   />
84                   < asp:Parameter  Name ="UnitsInStock"  Type ="Int16"   />
85                   < asp:Parameter  Name ="UnitsOnOrder"  Type ="Int16"   />
86                   < asp:Parameter  Name ="ReorderLevel"  Type ="Int16"   />
87                   < asp:Parameter  Name ="Discontinued"  Type ="Boolean"   />
88                   < asp:Parameter  Name ="ProductID"  Type ="Int32"   />
89               </ UpdateParameters >
90               < DeleteParameters >
91                   < asp:Parameter  Name ="ProductID"  Type ="Int32"   />
92               </ DeleteParameters >
93           </ asp:SqlDataSource >
94       </ form >
95  </ body >
96  </ html >
97 

當 GridView 選取資料列時會觸發 SelectedIndexChanging 事件，在這個事件中以 GridView 的  NewSelectedIndex 為基準去計算 DetailsView 對應的 PageIndex 即可。

 1  Partial  Class  _Default
 2       Inherits  System.Web.UI.Page
 3 
 4       Protected   Sub  GridView1_SelectedIndexChanging( ByVal  sender  As   Object ,  ByVal  e  As  System.Web.UI.WebControls.GridViewSelectEventArgs)  Handles  GridView1.SelectedIndexChanging
 5           Dim  iPageIndex  As   Integer
 6           Dim  oGridView  As  GridView
 7 
 8          oGridView  =   CType (sender, GridView)
 9           If  oGridView.AllowPaging  Then
10               ' GridView 有分頁時，要把考慮目前的頁數及每頁筆數
11              iPageIndex  =  (oGridView.PageIndex)  *  oGridView.PageSize  +  e.NewSelectedIndex
12           Else
13               ' GridView 無分頁時，直接使用 e.NewSelectedIndex
14              iPageIndex  =  e.NewSelectedIndex
15           End   If
16          DetailsView1.PageIndex  =  iPageIndex
17       End Sub
18 
19  End Class

執行結果如下，首先 GirdView 切換到第2頁，選取 GirdView 中 ProductID 為 15 的資料列時，DetailsView 也同步顯示同一筆資料。可在 DetailsView 中編輯此筆資料儲存後，GirdView 的資料也會同步更新。