共用方式為

使用具有詳細資料 DetailView 之可選取主要 GridView 的主要/詳細資料 (VB)

  • 發行項

作者：Scott Mitchell

下載 PDF

本教學課程會有 GridView，其數據列包含每個產品的名稱和價格，以及 [選取] 按鈕。 單擊特定產品的 [選取] 按鈕會導致其完整詳細數據顯示在相同頁面上的DetailsView控件中。

簡介

在 上一個教學課程 中，我們已瞭解如何使用兩個網頁建立主要/詳細數據報表：一個「主版」網頁，顯示供貨商清單;以及列出所選供應商所提供的這些產品的「詳細數據」網頁。 這兩頁報表格式可以壓縮成一頁。 本教學課程會有 GridView，其數據列包含每個產品的名稱和價格，以及 [選取] 按鈕。 單擊特定產品的 [選取] 按鈕會導致其完整詳細數據顯示在相同頁面上的DetailsView控件中。

按兩下 [選取] 按鈕會顯示產品的詳細數據

圖 1：按兩下 [選取] 按鈕顯示產品的詳細資料 (按鍵即可檢視大小完整的影像)

步驟 1：建立可選取的 GridView

回想一下，在雙頁主圖形/詳細數據報表中，每個主要記錄都包含超連結，當按兩下時，會將使用者傳送至詳細數據頁面，以傳遞查詢字串中單擊的數據列 SupplierID 值。 這類超連結已使用 HyperLinkField 新增至每個 GridView 數據列。 針對單一頁面主版/詳細數據報表，我們需要每個 GridView 數據列的 Button，單擊時會顯示詳細數據。 GridView 控件可以設定為包含每個造成回傳的數據列的 [選取] 按鈕，並將該數據列標示為 GridView 的 SelectedRow。

首先，將 GridView 控制項新增至 DetailsBySelecting.aspx 資料夾中的頁面 Filtering ，並將其 ID 屬性設定為 ProductsGrid。 接下來，新增名為 AllProductsDataSource 的 ObjectDataSource，以叫用 ProductsBLL 類別的 GetProducts() 方法。

建立名為 AllProductsDataSource 的 ObjectDataSource

圖 2：建立名為 AllProductsDataSource (的 ObjectDataSource 按兩下即可檢視完整大小的映射)

使用 ProductsBLL 類別

圖 3：使用 ProductsBLL 類別 (按下即可檢視大小完整的影像)

將 ObjectDataSource 設定為叫用 GetProducts () 方法

圖 4：將 ObjectDataSource 設定為叫 GetProducts() 用方法 (按兩下以檢視大小完整的映像)

編輯 GridView 的字段，移除和 UnitPrice BoundFields 的所有ProductName欄位。 此外，您可以視需要自定義這些 BoundField，例如將 BoundField 格式化 UnitPrice 為貨幣，以及變更 HeaderText BoundFields 的屬性。 您可以從 GridView 的智慧標記按兩下 [編輯資料行] 連結，或手動設定宣告式語法，以圖形方式完成這些步驟。

移除 ProductName 和 UnitPrice BoundFields

圖 5：移除 ProductName 和 UnitPrice BoundFields (按兩下即可檢視大小完整的影像)

GridView 的最終標記為：

<asp:GridView ID="ProductsGrid" runat="server"
  AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName"
         HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
            DataFormatString="{0:c}" HeaderText="Unit Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

接下來，我們需要將 GridView 標示為可選取，這樣會將 [選取] 按鈕新增至每個數據列。 若要達成此目的，只要核取 GridView 智慧標記中的 [啟用選取] 複選框即可。

讓 GridView 的數據列可選取

圖 6：讓 GridView 的數據列可選取 (按兩下以檢視大小完整的影像)

檢查 [啟用選取專案] 選項會將 CommandField 新增至 GridView， ProductsGrid 並將其 ShowSelectButton 屬性設定為 True。 這會導致 GridView 的每個數據列的 [選取] 按鈕，如圖 6 所示。 根據預設，[選取] 按鈕會轉譯為LinkButtons，但您可以改為透過 CommandField 的 ButtonType 屬性使用 Buttons 或 ImageButtons。

<asp:GridView ID="ProductsGrid" runat="server"
  AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Unit Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

當 GridView 資料列的 [選取] 按鈕按兩下後置回傳，並更新 GridView 的屬性 SelectedRow 時。 SelectedRow除了 屬性之外，GridView 還提供 SelectedIndex、SelectedValue 和 SelectedDataKey 屬性。 屬性 SelectedIndex 會傳回所選數據列的索引，而 SelectedValue 和 SelectedDataKey 屬性則會根據 GridView 的 DataKeyNames 屬性傳回值。

屬性 DataKeyNames 可用來將一或多個數據域值與每個數據列產生關聯，而且通常用來將基礎數據中的資訊與每個 GridView 數據列唯一識別。 屬性 SelectedValue 會傳回所選取數據列的第一個 DataKeyNames 數據欄位值，其中 SelectedDataKey 當 屬性傳回選取的數據列物件時，該數據列包含該數據列 DataKey 之指定數據鍵欄位的所有值。

當您透過 Designer 將數據源系結至 GridView、DetailsView 或 FormView 時，屬性DataKeyNames會自動設定為唯一識別的數據欄位 (s) 。 雖然已在上述教學課程中自動為我們設定此屬性，但範例會在未指定 屬性的情況下 DataKeyNames 運作。 不過，針對本教學課程中可選取的 GridView，以及未來我們將檢查插入、更新和刪除的教學課程， DataKeyNames 必須正確設定 屬性。 請花點時間確定您的 GridView DataKeyNames 屬性已設定為 ProductID。

讓我們透過瀏覽器來檢視到目前為止的進度。 請注意，GridView 會列出所有產品的名稱和價格，以及 Select LinkButton。 按兩下 [選取] 按鈕會導致回傳。 在步驟 2 中，我們將瞭解如何顯示所選產品的詳細數據，讓 DetailsView 回應此回傳。

每個產品數據列都包含 Select LinkButton

圖 7：每個產品數據列都包含 Select LinkButton (Click 以檢視大小完整的影像)

醒目提示選取的數據列

ProductsGrid GridView 具有SelectedRowStyle屬性，可用來指定所選數據列的視覺樣式。 正確使用，這可藉由更清楚地顯示目前選取的 GridView 數據列來改善用戶體驗。 在本教學課程中，讓我們以黃色背景醒目提示選取的數據列。

如同我們先前的教學課程，讓我們努力保留定義為 CSS 類別的美觀相關設定。 因此，在名為 SelectedRowStyle中Styles.css建立新的 CSS 類別。

.SelectedRowStyle
{
    background-color: Yellow;
}

若要將此 CSS 類別套用至 SelectedRowStyle 本教學課程系列 中所有 GridViews 的 屬性，請編輯 GridView.skin [主題中的 DataWebControls 面板] 以包含 SelectedRowStyle 設定，如下所示：

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
</asp:GridView>

此外，選取的 GridView 數據列現在會以黃色背景色彩反白顯示。

使用 GridView 的 SelectedRowStyle 屬性自定義選取的數據列外觀

圖 8：使用 GridView SelectedRowStyle 的屬性自定義選取的數據列外觀， (按兩下即可檢視大小完整的影像)

步驟 2：在 DetailsView 中顯示選取產品的詳細數據

ProductsGrid完成 GridView 之後，所有保留專案都是新增 DetailsView，以顯示所選取特定產品的相關信息。 在 GridView 上方新增 DetailsView 控件，並建立名為 ProductDetailsDataSource的新 ObjectDataSource。 由於我們想要此 DetailsView 顯示所選產品的特定資訊，因此請將 設定 ProductDetailsDataSource 為使用 ProductsBLL 類別 GetProductByProductID(productID) 的方法。

叫用 ProductsBLL 類別的 GetProductByProductID (productID) 方法

圖 9：叫 ProductsBLL 用 GetProductByProductID(productID) 類別的方法 (按兩下即可檢視完整大小的影像)

productID具有從 GridView 控件SelectedValue的 屬性取得的參數值。 如先前所討論，GridView 的 SelectedValue 屬性會傳回所選數據列的第一個數據索引鍵值。 因此，GridView 的 DataKeyNames 屬性必須設定 ProductID為 ，如此一來，選取的數據列 ProductID 值就會由 傳 SelectedValue回。

將 productID 參數設定為 GridView 的 SelectedValue 屬性

圖 10：將 productID 參數設定為 GridView SelectedValue 的屬性 (按兩下即可檢視大小完整的影像)

productDetailsDataSource一旦已正確設定 ObjectDataSource 並系結至 DetailsView，本教學課程就會完成！ 第一次瀏覽頁面時未選取任何資料列，因此 GridView 的 SelectedValue 屬性會傳 Nothing回 。 因為沒有具有值的產品 NULLProductID ，所以方法不會傳 GetProductByProductID(productID) 回任何記錄，這表示 DetailsView 不會顯示 (請參閱圖 11) 。 按兩下 GridView 資料列的 [選取] 按鈕時，會進行回傳並重新整理DetailsView。 這次 GridView SelectedValue 的 屬性會 ProductID 傳回所選數據列的 ， GetProductByProductID(productID) 方法會傳回 ProductsDataTable ，其中包含該特定產品的相關信息，而 DetailsView 會顯示這些詳細數據 (請參閱圖 12) 。

第一次流覽時，只會顯示 GridView

圖 11：第一次流覽時，只有 GridView 會顯示 (按兩下即可檢視大小完整的影像)

選取數據列時，會顯示產品的詳細數據

圖 12：選取數據列時，產品的詳細數據會顯示 (按兩下即可檢視大小完整的影像)

摘要

在此教學課程和上述三個教學課程中，我們已看到一些用來顯示主要/詳細數據報表的技術。 在本教學課程中，我們已使用可選取的 GridView 來儲存主記錄和 DetailsView，以顯示相同頁面上所選主記錄的詳細數據。 在先前的教學課程中，我們已瞭解如何使用DropDownLists顯示主要/詳細數據報表，並在一個網頁上顯示主要記錄，以及另一個網頁的詳細數據記錄。

本教學課程將結束我們檢查主要/詳細數據報告。 從下一個教學課程開始，我們將開始探索使用 GridView、DetailsView 和 FormView 自定義格式設定。 我們將瞭解如何根據系結至這些控件的數據來自定義這些控件的外觀、如何摘要 GridView 頁尾中的數據，以及如何使用範本來取得版面配置更大的控制權。

快樂的程序設計！

關於作者

Scott Mitchell 是七份 ASP/ASP.NET 書籍的作者，以及 自 1998 年以來與 Microsoft Web 技術合作的 4GuysFromRolla.com 作者。 Scott 是獨立顧問、訓練員和作者。 他的最新書籍是 Sams 在 24 小時內自行 ASP.NET 2.0。 您可以透過mitchell@4GuysFromRolla.com部落格來連線到 ，您可以在 找到http://ScottOnWriting.NET。

特別感謝

本教學課程系列是由許多實用的檢閱者所檢閱。 本教學課程的首席檢閱者是「新式 Giesenow」。 想要檢閱即將推出的 MSDN 文章嗎？ 如果是，請將一行放在 mitchell@4GuysFromRolla.com。

[上一步]