使用 GridView (C#) 跨兩個頁面進行主要/詳細數據篩選
在本教學課程中,我們將使用 GridView 來實作此模式,以列出資料庫中的供應商。 GridView 中的每個供應商數據列都會包含 [檢視產品] 連結,按兩下時,會將使用者帶至個別頁面,以列出所選供貨商的產品。
簡介
在前兩個教學課程中,我們已瞭解如何 使用DropDownLists 在單一網頁中顯示主報表/詳細數據報表 ,以顯示 「主要」記錄和 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:將 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."
/>
注意
您可以使用 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
屬性。 在這些屬性中,視需要輸入靜態標記,然後使用您想要在 或 DataNavigateUrlFields
屬性中指定的DataTextField
域值出現的標記{0}
。 DataNavigateUrlFields
如果屬性有多個指定的欄位使用{0}
您想要插入第一個域值的位置,{1}
則為第二個域值等等。
將此套用至我們的教學課程,我們需要將 屬性設定DataNavigateUrlFields
為 ,因為這是我們需要根據每個數據列自定義其值的數據欄位,並將 DataNavigateUrlFormatString
屬性設定為ProductsForSupplierDetails.aspx?SupplierID={0}
。SupplierID
圖 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
,並在 querystring 中傳遞選取的 SupplierID
供應商。 本教學課程的最後一個步驟是在 GridView ProductsForSupplierDetails.aspx
中顯示產品,其 SupplierID
等於 SupplierID
透過 querystring 傳入的產品。 若要完成此作業,請先ProductsForSupplierDetails.aspx
使用名為 ProductsBySupplierDataSource
的新 ObjectDataSource 控件,從類別叫用 GetProductsBySupplierID(supplierID)
方法。ProductsBLL
圖 8:新增名為 ProductsBySupplierDataSource
(Click 以檢視大小完整的映射)
圖 9:選取 [ ProductsBLL
類別] (按兩下即可檢視大小完整的影像)
圖 10:讓 ObjectDataSource 叫用 GetProductsBySupplierID(supplierID)
方法 (按兩下以檢視大小完整的影像)
[設定數據源精靈] 的最後一個步驟會要求我們提供方法supplierID
參數的來源GetProductsBySupplierID(supplierID)
。 若要使用 querystring 值,請將 Parameter 來源設定為 QueryString,然後輸入查詢字串值的名稱,以在 [QueryStringField] 文字框中使用, (SupplierID
) 。
圖 11:從 SupplierID
Querystring 值填入supplierID
參數值 (按兩下即可檢視大小完整的影像)
就是這麼簡單! 圖 12 顯示 ProductsForSupplierDetails.aspx
瀏覽頁面,方法是從 SupplierListMaster.aspx
按兩下 [東京 Traders] 連結。
圖 12:由東京 Traders 提供的產品顯示 (按兩下即可檢視大小完整的影像)
在中顯示供應商資訊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.aspx
UI的最終觸控
為了改善此報表的用戶體驗,我們應該對頁面進行 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放在 。
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應