若在頁面中包含了一個 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 程式碼如下
當 GridView 選取資料列時會觸發 SelectedIndexChanging 事件，在這個事件中以 GridView 的 NewSelectedIndex 為基準去計算 DetailsView 對應的 PageIndex 即可。
執行結果如下，首先 GirdView 切換到第2頁，選取 GirdView 中 ProductID 為 15 的資料列時，DetailsView 也同步顯示同一筆資料。可在 DetailsView 中編輯此筆資料儲存後，GirdView 的資料也會同步更新。
不過本文的作法不同，讓 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 的資料也會同步更新。
