使用 GridView 跨兩個頁面進行主要/詳細資訊篩選 (C#)

演講者：Scott Mitchell

下載 PDF

在本教學課程中，我們將使用 GridView 列出資料庫中的供應商來實作此模式。 GridView 中的每個供應商列都將包含一個「查看產品」連結，點擊該連結後，使用者將進入一個單獨的頁面，其中列出了所選供應商的產品。

簡介

在前兩個教學課程中，我們看到如何使用 DropDownLists 在單個網頁中顯示主/詳細報告，以顯示「主要」記錄，並使用 GridView 或 DetailsView 控制項來顯示「詳細資訊」。另一種常見的主要/詳細資訊報告模式是將主要記錄放在一個網頁上，而詳細資訊則顯示在另一個網頁上。 論壇網站 (例如 ASP.NET 論壇) 就是這種模式的絕佳執行個體。 ASP.NET 論壇由各種論壇入門指南、Web 窗體、資料呈現控制項等組成。 每個論壇由許多貼文組成，每個貼文又由許多貼文組成。 在 ASP.NET 論壇首頁上列出了論壇。 點擊論壇會將您帶到 ShowForum.aspx 頁面，其中列出了該論壇的主題。 同樣，按一下一個主題會將您帶到 ShowPost.aspx，其中顯示所按一下的主題的貼文。

在本教學課程中，我們將使用 GridView 列出資料庫中的供應商來實作此模式。 GridView 中的每個供應商列都將包含一個「查看產品」連結，點擊該連結後，使用者將進入一個單獨的頁面，其中列出了所選供應商的產品。

步驟 1：將 SupplierListMaster.aspx 和 ProductsForSupplierDetails.aspx 頁面新增到 Filtering 資料夾。

在第三個教學課程中定義頁面版面配置時，我們在 BasicReporting、Filtering 和 CustomFormatting 資料夾中新增了許多「入門」頁面。 但是，我們當時沒有為本教學課程新增起始頁，因此請花點時間向 Filtering 資料夾新增兩個新頁面：SupplierListMaster.aspx 和 ProductsForSupplierDetails.aspx。 SupplierListMaster.aspx 將列出「主要」記錄 (供應商)，同時 ProductsForSupplierDetails.aspx 將顯示所選供應商的產品。

建立這兩個新頁面時，請務必將它們與 Site.master 主版頁相關聯。

圖 1：將 SupplierListMaster.aspx 和 ProductsForSupplierDetails.aspx 頁面新增至 Filtering 資料夾

另外，在向專案新增頁面時，請務必相應地更新網站地圖檔案 Web.sitemap。 對於本教學課程，只需使用以下 XML 內容作為篩選報告 <siteMapNode> 元素的子元素將 SupplierListMaster.aspx 頁面新增至網站地圖：

<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
  title="Master/Detail Across Two Pages"
  description="Master records on one page, detail records on another."
/>

步驟 2：在 SupplierListMaster.aspx 中顯示供應商清單

建立 SupplierListMaster.aspx 和 ProductsForSupplierDetails.aspx 頁面後，我們的下一步是在 SupplierListMaster.aspx 中建立供應商的 GridView。 將 GridView 新增至頁面並將其繫結到新的 ObjectDataSource。 此 ObjectDataSource 應使用 SuppliersBLL 類別的 GetSuppliers() 方法來傳回所有供應商。

圖 2：選擇 SuppliersBLL 類別 (點擊查看完整圖片)

圖 3：設定 ObjectDataSource 以使用 GetSuppliers() 方法 (點擊查看完整圖片)

我們需要在每個 GridView 行中包含一個標題為「查看產品」的連結，按一下該連結後，使用者將進入 ProductsForSupplierDetails.aspx，並通過查詢字串傳入所選列的 SupplierID 值。 例如，如果使用者點擊 Tokyo Traders 供應商的「查看產品」連結 (SupplierID 值為 4)，則應將其傳送至 ProductsForSupplierDetails.aspx?SupplierID=4。

若要實現此目的，請將 HyperLinkField 新增至 GridView，這會為每個 GridView 列新增一個超連結。 首先點選 GridView 智慧標籤中的「編輯列」連結。 接下來，從左上角的清單中選擇 HyperLinkField，然後按一下「新增」以將 HyperLinkField 新增至 GridView 的欄位清單。

圖 4：將 HyperLinkField 新增至 GridView (點擊查看完整圖片)

HyperLinkField 可以設定為使用與每個 GridView 行中的連結相同的文字或 URL 值，或者可以將這些值基於繫結到每個特定行的資料值。 若要在所有行中指定靜態值，請使用 HyperLinkField 的 Text 或 NavigateUrl 屬性。 由於我們希望所有行的連結文字都相同，因此將 HyperLinkField 的 Text 屬性設定為「檢視產品」。

圖 5：設定 HyperLinkField 的 Text 屬性以查看產品 (點擊查看完整圖片)

若要將文字或 URL 值設定為基於繫結到 GridView 行的基礎資料，請指定應從 DataTextField 或 DataNavigateUrlFields 屬性中提取文字或 URL 值的資料欄位。 DataTextField 只能設定為單一資料欄位；但是，DataNavigateUrlFields 可以設定為以逗號分隔的資料欄位清單。 我們經常需要將文字或 URL 基於目前行的資料欄位值和一些靜態標記的組合。 例如，在本教學課程中，我們希望 HyperLinkField 連結的 URL 為 ProductsForSupplierDetails.aspx?SupplierID=supplierID，其中 supplierID 是每個 GridView 行的 SupplierID 值。 請注意，這裡我們需要靜態值和資料驅動值：連結 URL 的 ProductsForSupplierDetails.aspx?SupplierID= 部分是靜態的，而 supplierID 部分是資料驅動的，因為它的值是每行自己的 SupplierID 值。

若要指示靜態值和資料驅動值的組合，請使用 DataTextFormatString 和 DataNavigateUrlFormatString 屬性。 在這些屬性中，根據需要輸入靜態標記 {0}，然後在您希望顯示 DataTextField 或 DataNavigateUrlFields 屬性中指定的欄位值的位置使用標記。 如果 DataNavigateUrlFields 屬性指定了多個欄位，請在您想要插入第一個欄位值的位置使用 {0}，在第二個欄位值處使用 {1}，依此類推。

將其應用到我們的教學課程中，我們需要將 DataNavigateUrlFields 屬性設為 SupplierID，因為這是我們需要在每行基礎上自訂其值的資料欄位，並將 DataNavigateUrlFormatString 屬性設為 ProductsForSupplierDetails.aspx?SupplierID={0}。

圖 6：設定 HyperLinkField 以根據 SupplierID 包含正確的連結 URL (點擊查看完整圖片)

新增 HyperLinkField 後，您可以隨意自訂 GridView 的欄位並重新排序。 以下標記顯示了我進行一些較小的欄位級自訂後的 GridView。

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="SupplierID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <Columns>
        <asp:HyperLinkField DataNavigateUrlFields="SupplierID"
            DataNavigateUrlFormatString=
            "ProductsForSupplierDetails.aspx?SupplierID={0}"
            Text="View Products" />
        <asp:BoundField DataField="CompanyName"
          HeaderText="Company" SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City"
          SortExpression="City" />
        <asp:BoundField DataField="Country" HeaderText="Country"
          SortExpression="Country" />
    </Columns>
</asp:GridView>

花點時間透過瀏覽器查看 SupplierListMaster.aspx 頁面。 如圖 7 所示，該頁面目前列出了所有供應商，包括「查看產品」連結。 點擊「查看產品」連結將移至 ProductsForSupplierDetails.aspx，並在查詢字串中傳遞供應商的 SupplierID。

圖 7：每個供應商行包含一個查看產品連結 (點擊查看完整圖片)

步驟 3：在 ProductsForSupplierDetails.aspx 中列出供應商的產品

此時，SupplierListMaster.aspx 頁面將使用者傳送至 ProductsForSupplierDetails.aspx，並在查詢字串中傳遞所選供應商的 SupplierID。 本教學課程的最後一步是在 ProductsForSupplierDetails.aspx 中顯示產品，這些產品的 SupplierID 等於通過查詢字串傳遞的 SupplierID。 要完成此操作，請先將 GridView 新增至 ProductsForSupplierDetails.aspx 頁面，並使用名為 ProductsBySupplierDataSource 的新 ObjectDataSource 控制項 (此控制項從 ProductsBLL 類別呼叫 GetProductsBySupplierID(supplierID) 方法)。

圖 8：新增一個名為 ProductsBySupplierDataSource 的新 ObjectDataSource (點擊查看完整圖片)

圖 9：選擇 ProductsBLL 類別 (點擊查看完整圖片)

圖 10：讓 ObjectDataSource 叫用 GetProductsBySupplierID(supplierID) 方法 (點擊查看完整圖片)

設定資料來源精靈的最後一個步驟要求我們提供 GetProductsBySupplierID(supplierID) 方法 supplierID 參數的來源。 若要使用查詢字串值，請將參數來源設定為查詢字串，並在查詢字串欄位文字輸入框 (SupplierID) 中輸入要使用的查詢字串值的名稱。

圖 11：從 SupplierID 查詢字串值填入 supplierID 參數值 (點擊查看完整圖片)

這樣就全部完成了！ 圖 12 顯示了透過點擊來自 SupplierListMaster.aspx 的東京貿易商連結造訪的 ProductsForSupplierDetails.aspx 頁面。

圖12：顯示了東京貿易商供應的產品 (點擊查看完整圖片)

在 ProductsForSupplierDetails.aspx 中顯示供應商資訊

如圖 12 所示，ProductsForSupplierDetails.aspx 頁面僅列出了查詢字串中指定的 SupplierID 所提供的產品。 然而，直接傳送到此頁面的人不會知道圖 12 顯示的是東京貿易商的產品。 為了解決這個問題，我們也可以在此頁面中顯示供應商資訊。

首先在產品 GridView 上方新增一個 FormView。 建立一個名為 SuppliersDataSource 的新 ObjectDataSource 控制項，用於叫用 SuppliersBLL 類別的 GetSupplierBySupplierID(supplierID) 方法。

圖 13：選擇 SuppliersBLL 類別 (點擊查看完整圖片)

圖 14：讓 ObjectDataSource 叫用 GetSupplierBySupplierID(supplierID) 方法 (點擊查看完整圖片)

與 ProductsBySupplierDataSource 一樣，為 supplierID 參數指派 SupplierID 查詢字串值的值。

圖 15：從 SupplierID 查詢字串值填入 supplierID 參數值 (點擊查看完整圖片)

在「設計」檢視中將 FormView 繫結到 ObjectDataSource 時，Visual Studio 會自動為 ObjectDataSource 傳回的每個資料欄位建立 FormView 的 ItemTemplate、InsertItemTemplate、EditItemTemplate 以及 Label 和 TextBox Web 控制項。 由於我們只想顯示供應商資訊，請隨意移除 InsertItemTemplate 和 EditItemTemplate。 接下來，編輯 ItemTemplate，以便它在 <h3> 元素中顯示供應商的公司名稱，並在公司名稱下方顯示地址、城市、國家/地區和電話號碼。 或者，您可以手動設定 FormView 的 DataSourceID 並建立 ItemTemplate 標記，就像我們在「使用 ObjectDataSource 顯示資料」教學課程中所做的那樣。

進行這些編輯後，FormView 的宣告性標記應類似於以下內容：

<asp:FormView ID="FormView1" runat="server" DataKeyNames="SupplierID"
    DataSourceID="suppliersDataSource" EnableViewState="False">
    <ItemTemplate>
        <h3><%# Eval("CompanyName") %></h3>
        <p>
            <asp:Label ID="AddressLabel" runat="server"
                Text='<%# Bind("Address") %>'></asp:Label><br />
            <asp:Label ID="CityLabel" runat="server"
                Text='<%# Bind("City") %>'></asp:Label>,
            <asp:Label ID="CountryLabel" runat="server"
                Text='<%# Bind("Country") %>'></asp:Label><br />
            Phone:
            <asp:Label ID="PhoneLabel" runat="server"
                Text='<%# Bind("Phone") %>'></asp:Label>
        </p>
    </ItemTemplate>
</asp:FormView>

圖 16 顯示了包含上述詳細供應商資訊後的 ProductsForSupplierDetails.aspx 頁面螢幕擷取畫面。

圖 16：產品清單包括有關供應商的摘要 (點擊查看完整圖片)

為 ProductsForSupplierDetails.aspx UI 進行最後的潤飾

為了改善此報告的使用者體驗，我們應該在 ProductsForSupplierDetails.aspx 頁面上新增一些內容。 目前，使用者從 ProductsForSupplierDetails.aspx 頁面返回供應商清單的唯一方法是點擊瀏覽器的後退按鈕。 讓我們在連結回 SupplierListMaster.aspx 的 ProductsForSupplierDetails.aspx 頁面上新增一個 HyperLink 控制項，為使用者提供另一種返回主清單的方式。

圖 17：新增 HyperLink 控制項以將使用者帶回 SupplierListMaster.aspx (點擊查看完整圖片)

如果使用者點擊沒有任何產品的供應商的「檢視產品」連結，則 ProductsForSupplierDetails.aspx 中的 ProductsBySupplierDataSource ObjectDataSource 將不會傳回任何結果。 繫結到 ObjectDataSource 的 GridView 不會呈現任何標記，導致使用者瀏覽器中的頁面上出現空白區域。 為了更清楚地向使用者傳達沒有與所選供應商關聯的產品的訊息，我們可以將 GridView 的 EmptyDataText 屬性設定為我們希望在發生這種情況時顯示的訊息。 我已將此屬性設為「該供應商沒有提供任何產品」

預設情況下，Northwinds 資料庫中的所有供應商都至少提供一種產品。 不過，在本教學課程中，我手動修改了 Products 表，以便供應商 Escargots Nouveaux 不再與任何產品關聯。 圖 18 顯示了進行此變更後 Escargots Nouveaux 的詳細資訊頁面。

圖 18：使用者被告知該供應商不提供任何產品。 (點擊查看完整圖片)

摘要

雖然主要/詳細資訊報告可以在單一頁面上顯示主要記錄和詳細資訊記錄，但在許多網站中，它們被分隔在兩個網頁上。 為了更清楚地向使用者傳達沒有與所選供應商關聯的產品的訊息，我們可以將 GridView 的屬性設定為我們希望在發生這種情況時顯示的訊息。 主要網頁中的每個供應商行都包含一個指向傳遞該行 SupplierID 值的詳細資訊頁面連結。 使用 GridView 的 HyperLinkField 可以輕鬆新增此類特定行的連結。

在詳細資訊頁面中，透過叫用 ProductsBLL 類別的 GetProductsBySupplierID(supplierID) 方法來檢索指定供應商的這些產品。 使用查詢字串作為參數來源以宣告方式指定 supplierID 參數值。 我們也研究如何使用 FormView 在詳細資訊頁面中顯示供應商詳細資訊。

我們的下一個教學課程是關於主要/詳細資訊報告的最後一個教學課程。 我們將了解如何在 GridView 中顯示產品清單，其中每行都有一個「選擇」按鈕。 按一下「選擇」按鈕將在同一頁面上的「詳細資訊檢視」控制項中顯示該產品的詳細資訊。

快樂程式！

關於作者

Scott Mitchell 是七本 ASP/ASP.NET 書籍的作者，也是 4GuysFromRolla.com 的創辦人，自 1998 年以來一直在使用 Microsoft 網路技術。 Scott 是一位獨立顧問、培訓師兼作家。 他的最新著作是 Sams Teach Yourself ASP.NET 2.0 in 24 Hours。 您可以透過電子郵件聯繫他：mitchell@4GuysFromRolla.com。 或者透過他的部落格與他聯繫，網址為 http://ScottOnWriting.NET。

特別感謝

本教學課程系列已經過許多熱心的審閱者檢閱。 本教學課程的主要審閱者是 Hilton Giesenow。 有興趣查看我即將發表的 MSDN 文章嗎？ 如果是的話，請傳送郵件給我：mitchell@4GuysFromRolla.com。