GridView 與 DetailsView 連動 - 繫結同一個 SqlDataSource | ASP.NET 魔法學院 - 點部落

2008-03-17

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

43358
0
ASP.NET 基礎
2008-07-22

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 魔法學院

回首頁

ASP.NET 魔法學院

.NET 技術分享

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

系列文章

標籤雲