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

<< Gridview 依條件判斷標記資料列 | Home | TreeView 以遞迴方式尋找節點 >>

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檔案的內容如下

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>未命名頁面</title> </head> <body> <form id="form1" runat="server"> <div> <table style="width:100%"> <tr> <td style="width: 337px" valign="top"> <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="SqlDataSource1" EmptyDataText="沒有資料錄可顯示。" CellPadding="4" ForeColor="#333333" GridLines="None"> <Columns> <asp:CommandField ShowSelectButton="True" /> <asp:BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="True" SortExpression="ProductID" /> <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" /> </Columns> <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> <EditRowStyle BackColor="#999999" /> <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> </asp:GridView> </td> <td valign="top"> <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataKeyNames="ProductID" DataSourceID="SqlDataSource1" Height="50px" Width="400px" CellPadding="4" ForeColor="#333333" GridLines="None"> <Fields> <asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False" ReadOnly="True" SortExpression="ProductID" /> <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" /> <asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" /> <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" /> <asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" /> <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" /> <asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock" /> <asp:BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder" /> <asp:BoundField DataField="ReorderLevel" HeaderText="ReorderLevel" SortExpression="ReorderLevel" /> <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued" /> <asp:CommandField ShowEditButton="True" /> </Fields> <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <CommandRowStyle BackColor="#FFFFC0" Font-Bold="True" /> <RowStyle BackColor="#FFFBD6" ForeColor="#333333" /> <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" /> <FieldHeaderStyle BackColor="#FFFF99" Font-Bold="True" /> <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> </asp:DetailsView> </td> </tr> </table> <br /> <br />    </div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>" 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)" ProviderName="<%$ ConnectionStrings:NorthwindConnectionString1.ProviderName %>" SelectCommand="SELECT [ProductID], [ProductName], [SupplierID], [CategoryID], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [UnitsOnOrder], [ReorderLevel], [Discontinued] FROM [Products]" 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"> <InsertParameters> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="SupplierID" Type="Int32" /> <asp:Parameter Name="CategoryID" Type="Int32" /> <asp:Parameter Name="QuantityPerUnit" Type="String" /> <asp:Parameter Name="UnitPrice" Type="Decimal" /> <asp:Parameter Name="UnitsInStock" Type="Int16" /> <asp:Parameter Name="UnitsOnOrder" Type="Int16" /> <asp:Parameter Name="ReorderLevel" Type="Int16" /> <asp:Parameter Name="Discontinued" Type="Boolean" /> </InsertParameters> <UpdateParameters> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="SupplierID" Type="Int32" /> <asp:Parameter Name="CategoryID" Type="Int32" /> <asp:Parameter Name="QuantityPerUnit" Type="String" /> <asp:Parameter Name="UnitPrice" Type="Decimal" /> <asp:Parameter Name="UnitsInStock" Type="Int16" /> <asp:Parameter Name="UnitsOnOrder" Type="Int16" /> <asp:Parameter Name="ReorderLevel" Type="Int16" /> <asp:Parameter Name="Discontinued" Type="Boolean" /> <asp:Parameter Name="ProductID" Type="Int32" /> </UpdateParameters> <DeleteParameters> <asp:Parameter Name="ProductID" Type="Int32" /> </DeleteParameters> </asp:SqlDataSource> </form> </body> </html>

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

Partial Class _Default Inherits System.Web.UI.Page Protected Sub GridView1_SelectedIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewSelectEventArgs) Handles GridView1.SelectedIndexChanging Dim iPageIndex As Integer Dim oGridView As GridView oGridView = CType(sender, GridView) If oGridView.AllowPaging Then 'GridView 有分頁時，要把考慮目前的頁數及每頁筆數 iPageIndex = (oGridView.PageIndex) * oGridView.PageSize + e.NewSelectedIndex Else 'GridView 無分頁時，直接使用 e.NewSelectedIndex iPageIndex = e.NewSelectedIndex End If DetailsView1.PageIndex = iPageIndex End Sub End Class

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

ASP.NET 魔法學院

2008/3/17 00:40| 閱讀數 : 7108 | 我要推薦 | 7 Comments | 文章分類: ASP.NET 基礎 DataSource 控制項 GridView | 訂閱

DotBlogs Tags: DetailsView GridView SqlDataSource

關連文章

Feedback

Swabasic 2008/8/21 下午 03:56 回覆

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

不好意思，可不可以寄檔案給我，
因為有點不太懂，想看看原始檔案是怎樣。= =!
jeff377 2008/8/21 下午 08:27 回覆

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

to Swabasic :
本文中已經是完整的程式碼了。
Anna 2008/9/15 下午 12:34 回覆

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

大大你好~~
我照你的方法作~~
在GirdView 選取一筆資料後
DetailsView 也有同步顯示同一筆資料

但是在第一筆資料編輯完成後
我要在GirdView 選取第二筆資料時
DetailsView 卻一直顯示前一筆資料
無法同步
請問為何會這樣?
謝謝!!
chjiang 2010/3/10 上午 10:50 回覆

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

您好~想請問一下~
當我按某一筆「選取」顯示在Formview 之後，我再按取消，再選取其它筆會出現以下錯誤，想請教，要如何避免呢？.....
錯誤訊息：無法載入 Viewstate。Viewstate 所要載入的控制項樹狀結構必須符合在先前要求期間用來儲存 Viewstate 的控制項樹狀結構。例如，以動態方式加入控制項時，在回傳期間加入的控制項必須符合在初始要求期間所加入控制項的型別和位置。
jeff 2010/3/10 下午 12:41 回覆

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

to chjiang :
你的錯訊息是因為程式碼中有動態加入控制項，而在處理 ViewState 反序列化時發生錯誤，你可以將動態加入控制項的動作往前移至 Page Init 事件試試看。
chjiang 2010/3/10 下午 02:26 回覆

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

to jeff :
真的很開心您的回覆，也很謝謝您熱心的指導：)
不過，我是個asp.net初學者，所以對您說的，我還無法了解...Orz
jeff 2010/3/11 下午 02:56 回覆

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

to chjiang :
你可以看一下你的程式碼中是否有 new 新控制項，並使用 Controls.Add 加入至父控制項目。
因為 ViewState 的反序列化程序是循序而非具名的，所以一旦控制項的樹狀階層結構改變時，就會造成 ViewState 反序列化的過程發生錯誤。

標題 *
名稱 *
Email	(將不會被顯示)
Url
回應
Remember Me? 登入後使用進階評論 Please add 3 and 7 and type the answer here: 請輸入驗證碼: