使用 GridView (VB) 跨兩個頁面的主要/詳細數據篩選

作者 ：Scott Mitchell

下載 PDF

在本教學課程中，我們將使用 GridView 來列出資料庫中的供應商，來實作此模式。 GridView 中的每個供應商數據列都會包含 [檢視產品] 連結，按兩下時，使用者會前往個別頁面，列出所選供貨商的產品。

簡介

在前兩個教學課程中，我們已瞭解如何使用DropDownLists 在單一網頁中顯示主報表/詳細數據報表，以顯示“master” 記錄和 GridView 或 DetailsView 控件來顯示「詳細數據」。用於主要/詳細數據報表的另一個常見模式是在一個網頁上擁有主要記錄，以及另一個網頁上顯示的詳細數據。 論壇網站，例如 ASP.NET 論壇，是此模式實務的絕佳範例。 ASP.NET 論壇是由各種論壇所組成，使用者入門、Web Form、數據簡報控件等等。 每個論壇是由許多線程所組成，而每個線程是由一些文章所組成。 在 ASP.NET 論壇首頁上，會列出論壇。 按兩下論壇會帶您前往 ShowForum.aspx 頁面，其中會列出該論壇的線程。 同樣地，按兩下線程會帶您前往 ShowPost.aspx，這會顯示所按下線程的文章。

在本教學課程中，我們將使用 GridView 來列出資料庫中的供應商，來實作此模式。 GridView 中的每個供應商數據列都會包含 [檢視產品] 連結，按兩下時，使用者會前往個別頁面，列出所選供貨商的產品。

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

在第三個教學課程中定義版面配置時，我們在、 Filtering和 CustomFormatting 資料夾中新增了一些「起始」頁面BasicReporting。 不過，我們當時並未新增本教學課程的起始頁面，因此請花一些時間將兩個新頁面新增至 Filtering 資料夾： SupplierListMaster.aspx 和 ProductsForSupplierDetails.aspx。 SupplierListMaster.aspx 將會列出供應商) (「主要」記錄，同時 ProductsForSupplierDetails.aspx 會顯示所選供應商的產品。

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

圖 1：將 和 ProductsForSupplierDetails.aspx 頁面新增SupplierListMaster.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." />

注意

您可以使用 K. Scott Allen 的免費 Visual Studio 網站地圖宏，協助在新增 ASP.NET 頁面時，自動更新網站地圖檔案的程式。

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

SupplierListMaster.aspx建立 和 ProductsForSupplierDetails.aspx 頁面后，下一個步驟是在 中SupplierListMaster.aspx建立供應商的 GridView。 將 GridView 新增至頁面，並將其系結至新的 ObjectDataSource。 這個 ObjectDataSource 應該使用 SuppliersBLL 類別的 GetSuppliers() 方法來傳回所有供應商。

圖 2：選取類別 SuppliersBLL (按鍵即可檢視完整大小的影像)

圖 3：將 ObjectDataSource 設定為使用 GetSuppliers() 方法 (按兩下即可檢視完整大小的影像)

我們需要在每個 GridView 數據列中包含標題為 [檢視產品] 的連結，按兩下時，會 ProductsForSupplierDetails.aspx 讓使用者透過 querystring 傳入選取的數據列 SupplierID 值。 例如，如果使用者按兩下東京 Traders 供應商的 [檢視產品] 連結， (SupplierID 值為 4) ，則應該將它們傳送至 ProductsForSupplierDetails.aspx?SupplierID=4。

若要達成此目的，請將 HyperLinkField 新增至 GridView，以將超連結新增至每個 GridView 數據列。 從按下 GridView 智慧標記中的 [編輯資料行] 連結開始。 接下來，從左上方的清單選取 HyperLinkField，然後按兩下 [新增] 以在 GridView 的欄位清單中包含 HyperLinkField。

圖 4：將 HyperLinkField 新增至 GridView (按兩下即可檢視大小完整的影像)

HyperLinkField 可以設定為使用每個 GridView 數據列中連結的相同文字或 URL 值，也可以根據系結至每個特定數據列的數據值來設定這些值。 若要指定所有數據列的靜態值，請使用 HyperLinkField 的 Text 或 NavigateUrl 屬性。 由於我們想要讓所有數據列的連結文字都相同，請將 HyperLinkField 的 Text 屬性設定為 [檢視產品]。

圖 5：將 HyperLinkField 的屬性 Text 設定為 [檢視產品]， (按兩下即可檢視完整大小的影像)

若要根據系結至 GridView 數據列的基礎數據來設定文字或 URL 值，請指定要從 或 DataNavigateUrlFields 屬性提取DataTextField文字或 URL 值的數據欄位。 DataTextField 只能設定為單一數據欄位; DataNavigateUrlFields不過，可以設定為以逗號分隔的數據欄位清單。 我們經常需要根據目前數據列的數據域值和一些靜態標記的組合來建立文字或 URL 的基礎。 例如，在本教學課程中，我們想要 HyperLinkField 連結的 URL 是 ProductsForSupplierDetails.aspx?SupplierID=supplierID，其中 supplierID 是每個 GridView 的數據 SupplierID 列值。 請注意，我們在這裡需要靜態和數據驅動值： ProductsForSupplierDetails.aspx?SupplierID= 連結 URL 的部分是靜態的，而 supplierID 部分則是數據驅動，因為其值是每個數據列的專屬 SupplierID 值。

若要指出靜態和數據驅動值的組合，請使用 DataTextFormatString 和 DataNavigateUrlFormatString 屬性。 在這些屬性中，視需要輸入靜態標記，然後使用{0}標記，其中您想要顯示 或 DataNavigateUrlFields 屬性中指定的DataTextField域值。 DataNavigateUrlFields如果屬性有多個指定的欄位，{0}而您想要插入第一個域值的位置，{1}則為第二個域值等等。

將此套用至我們的教學課程，我們必須將 DataNavigateUrlFields 屬性設定為 SupplierID，因為這是我們需要依數據列自定義其值的數據欄位，並將 DataNavigateUrlFormatString 屬性設定為 ProductsForSupplierDetails.aspx?SupplierID={0}。

圖 6：根據 SupplierID (按兩下以檢視完整大小的影像 ，將 HyperLinkField 設定為包含適當的連結 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，並在 querystring 中傳遞所選供貨商 SupplierID 的 。 本教學課程的最後一個步驟是顯示 GridView ProductsForSupplierDetails.aspx 中的產品，其 SupplierID 等於 SupplierID 透過 querystring 傳入的產品。 若要從將 GridView 新增至ProductsForSupplierDetails.aspx頁面開始，請使用名為 ProductsBySupplierDataSource 的新 ObjectDataSource 控件，從 ProductsBLL 類別叫GetProductsBySupplierID(supplierID)用 方法。

圖 8：新增名為 ProductsBySupplierDataSource (Click 以檢視大小完整的影像)

圖 9：選取類別 ProductsBLL (按下即可檢視完整大小的影像)

圖 10：讓 ObjectDataSource 叫 GetProductsBySupplierID(supplierID) 用 方法 (按兩下即可檢視大小完整的影像)

設定數據源精靈的最後一個步驟會要求我們提供方法supplierID參數的來源GetProductsBySupplierID(supplierID)。 若要使用 querystring 值，請將 [參數來源] 設定為 QueryString，然後在 [QueryStringField] 文本框中輸入要使用的查詢字串值名稱， (SupplierID) 。

圖 11：從 SupplierID Querystring 值填supplierID入參數值 (按兩下即可檢視完整大小的影像)

就是這麼簡單！ 圖 12 顯示 ProductsForSupplierDetails.aspx 瀏覽頁面，方法是從 SupplierListMaster.aspx按兩下 [東京 Traders] 連結。

圖 12： (按兩下即可檢視全大小影像)

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

如圖 12 所示， ProductsForSupplierDetails.aspx 頁面只會列出 querystring 中所指定 所提供的 SupplierID 產品。 不過，有人直接傳送到此頁面，但不知道圖 12 顯示東京 Traders 的產品。 若要解決此問題，我們也可以在此頁面中顯示供貨商資訊。

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

圖 13：選取類別 SuppliersBLL (按鍵即可檢視完整大小的影像)

圖 14：讓 ObjectDataSource 叫 GetSupplierBySupplierID(supplierID) 用方法 (按兩下即可檢視完整大小的影像)

如同 ， ProductsBySupplierDataSource參數 supplierID 已指派 querystring 值的值 SupplierID 。

圖 15：從 SupplierID Querystring 值填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.aspxUI的最終觸控

為了改善此報表的用戶體驗，我們應該對頁面進行 ProductsForSupplierDetails.aspx 幾個新增。 目前，使用者可以從 ProductsForSupplierDetails.aspx 頁面返回供應商清單的唯一方式是按兩下瀏覽器的 [上一頁] 按鈕。 讓我們將 HyperLink 控制項 ProductsForSupplierDetails.aspx 新增至連結回 SupplierListMaster.aspx的頁面，提供另一種方式讓使用者返回主要清單。

圖 17：新增 HyperLink 控制項以將使用者帶回 SupplierListMaster.aspx (按兩下以檢視大小完整的映射)

如果使用者針對沒有任何產品的供應商按兩下 [檢視產品] 連結， ProductsBySupplierDataSource 則中的 ProductsForSupplierDetails.aspx ObjectDataSource 不會傳回任何結果。 系結至 ObjectDataSource 的 GridView 不會轉譯任何標記，導致使用者在瀏覽器中的頁面上產生空白區域。 為了更清楚地傳達給使用者，沒有與所選供應商相關聯的產品，我們可以將 GridView EmptyDataText 的 屬性設定為這類情況時所要顯示的訊息。 我已將此屬性設定為「此供應商未提供任何產品」」

根據預設，Northwinds 資料庫中的所有供應商都至少提供一個產品。 不過，在本教學課程中，我已手動修改 Products 數據表，讓供應商 Escargots Nouveaux 不再與任何產品相關聯。 圖 18 顯示這項變更之後 Escargots Nouveaux 的詳細數據頁面。

圖 18：通知使用者供應商未提供任何產品 (按兩下即可檢視全尺寸影像)

摘要

雖然主要/詳細數據報表可以在單一頁面上同時顯示主要和詳細數據記錄，但在許多網站中，它們會跨兩個網頁分隔。 在本教學課程中，我們已探討如何實作這類主要/詳細數據報表，方法是讓 「主要」網頁的供應商列在 GridView 中，以及「詳細數據」頁面中所列的相關聯產品。 主網頁中的每個供應商數據列都包含沿著數據列 SupplierID 值傳遞的詳細數據頁面連結。 您可以使用 GridView 的 HyperLinkField 輕鬆地新增這類數據列特定連結。

在擷取指定供應商之產品的詳細數據頁面中，是叫 ProductsBLL 用 類別 GetProductsBySupplierID(supplierID) 的方法來完成。 參數 supplierID 值是以宣告方式使用 querystring 做為參數來源來指定。 我們也探討如何使用 FormView 在詳細數據頁面中顯示供應商詳細數據。

下一個教學課程是主要/詳細數據報表的最後一個教學課程。 我們將探討如何在 GridView 中顯示產品清單，其中每個數據列都有 [選取] 按鈕。 按兩下 [選取] 按鈕會在相同頁面上的DetailsView控件中顯示產品的詳細數據。

快樂的程序設計！

關於作者

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

特別感謝

本教學課程系列是由許多實用的檢閱者檢閱。 本教學課程的潛在客戶檢閱者是「三元」。 有興趣檢閱即將推出的 MSDN 文章嗎？ 如果是，請將一行 mitchell@4GuysFromRolla.com放在 。

上一個下一個