不過本文的作法不同，讓 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
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
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 的資料也會同步更新。