導(dǎo)言

　　在前面的兩篇教程中,我們看到了如何在單一頁面中顯示主/從報表, 它使用DropDownList顯示主記錄,使用GridView或DetailsView顯示詳細(xì)信息. 另外一種常見的主/從報表模式是在一個頁面中顯示主記錄而在另一個頁面中顯示詳細(xì)信息.互聯(lián)網(wǎng)上的論壇,如www.asp.net ,就是該模式在實際應(yīng)用中非常典型例子. Asp.Net論壇由多個子論壇組成: Getting Started, Web Forms, Data Presentation Controls 等等. 每個子論壇包含多個主題, 每個主題又由多個貼子組成. 在asp.net論壇主頁上列出了這些子論壇,單擊其中一個論壇會轉(zhuǎn)到ShowForum.aspx頁面, 該頁面列出了這個子論壇所包含的主題. 同樣,單擊一個主題會轉(zhuǎn)向ShowPost.aspx, 該頁面顯示所單擊主題的貼子.

　　在這篇教程中,我們將通過使用GridView列出供應(yīng)商來實現(xiàn)該模式. GridView中的每行(一行便是一個供應(yīng)商)包含一個”查看產(chǎn)品”的鏈接. 該鏈接在單擊時會轉(zhuǎn)到另外一個頁面, 這個頁面顯示選中供應(yīng)商的所有產(chǎn)品.

Step 1: 在Filtering文件夾下添加 SupplierListMaster.aspx 和ProductsForSupplierDetails.aspx

　　在第三篇教程中定義頁面結(jié)構(gòu)時我們在BasicReporting, Filtering, 和 CustomFormatting文件夾中增加了好幾個起始頁面.我們還沒有為這篇教程中添加起始頁,在Filtering文件夾中增加兩個頁面: SupplierListMaster.aspx 和 ProductsForSupplierDetails.aspx. SupplierListMaster.aspx將會列出主記錄(供應(yīng)商) ProductsForSupplierDetails.aspx將會顯示選中供應(yīng)商的產(chǎn)品.

　　在創(chuàng)建這兩個頁面時注意要讓它們關(guān)聯(lián)Site.master母版頁.

圖1: 在Filtering文件夾下添加 SupplierListMaster.aspx 和ProductsForSupplierDetails.aspx

　　此外, 添加了兩個文件到該項目后, 要確保相應(yīng)地更新站點地圖文件Web.sitemap. 對于該篇教程只要簡單地使用下面的XML內(nèi)容做為元素的子節(jié)點

提示:使用K. Scott Allen的免費的Visual Studio Site Map Macro可以幫助你在新增ASP.NET頁時自動地更新站點地圖.

Step 2: SupplierListMaster.aspx中顯示供應(yīng)商列表

　　添加SupplierListMaster.aspx 和 ProductsForSupplierDetails.aspx后,接下來就是要在SupplierListMaster.aspx頁面上創(chuàng)建一個顯示供應(yīng)商的GridView. 添加一個GridView到頁面上并綁定到一個新的ObjectDataSource, 這個ObjectDataSource應(yīng)該使用SuppliersBLL類的GetSuppliers()方法返回所有供應(yīng)商.

圖2: 選擇 SuppliersBLL 類

圖3: 配置ObjectDataSource 使用GetSuppliers() 方法

　　我們需要在每個GridView行中包含一個”查看產(chǎn)品”鏈接,單擊時該鏈接會轉(zhuǎn)到ProductsForSupplierDetails.aspx頁面, 并在查詢字符串(querystring)傳遞選定行的SupplierID值.比如如果用戶單擊了供應(yīng)商Tokyo Traders(SupplierID值為4)的”查看產(chǎn)品”鏈接,將會轉(zhuǎn)到ProductsForSupplierDetails.aspx?SupplierID=4.

　　要實現(xiàn)該功能, 給GridView添加一個HyperLinkField列, 它會為每個GridView行增加一個鏈接. 首先在GridView智能標(biāo)記上單擊編輯列鏈接. 然后在左上角的列表中選擇HyperLinkField并單擊新增把HyperLinkField添加到GridView的字段列表中.

圖4: 添加 HyperLinkField 到GridView

　　HyperLinkField可以被配置為在每一個GridView行中使用相同的文本或URL值,或是讓這些值基于綁定到特定行的數(shù)據(jù)值. 要指定一個所有行都一樣的靜態(tài)值使用HyperLinkField的Text或NavigateUrl屬性. 因為我們想讓每一行的鏈接文本一致,設(shè)置HyperLinkField的Text屬性為”查看產(chǎn)品”.

圖5: 設(shè)置HyperLinkField的Text屬性為”查看產(chǎn)品”

　　要讓text 或URL基于綁定到GridView行的底層數(shù)據(jù), 可能通過DataTextField 或 DataNavigateUrlFields指定Text或URL要從中獲取數(shù)據(jù)的數(shù)據(jù)字段. DataTextField只能設(shè)置為一個單一的數(shù)據(jù)字段; DataNavigateUrlFields可以設(shè)置為一個以逗號分隔的數(shù)據(jù)字段列表. 我們需要讓TEXT或URL基于當(dāng)前行的數(shù)據(jù)字段值和一些標(biāo)記. 比如在這篇教程中,我們希望 HyperLinkField的鏈接URL是ProductsForSupplierDetails.aspx?SupplierID=supplierID. 其中supplierID是GridView的每個行的supplierID值. 注意我們需要靜態(tài)值和數(shù)據(jù)驅(qū)動值. ProductsForSupplierDetails.aspx?SupplierID=這部分是靜態(tài)值.而supplierID部分便是數(shù)據(jù)驅(qū)動的, 它的值是每一行的SupplierID值.

　　要指定靜態(tài)值和數(shù)據(jù)驅(qū)動值的混合物, 使用DataTextFormatString和DataNavigateUrlFormatString屬性. 在這些屬性中按需要輸入靜態(tài)文本,要顯示DataTextField或DataNavigateUrlFields屬性中特定的字段時使用{0}標(biāo)記. 如果DataNavigateUrlFields中有多個字段,在需要第一個字段時使用{0}, 第二個字段使用{1},以此類推.

　　對于我們這篇教程來說, 我們需要設(shè)置DataNavigateUrlFields為SupplierID, 因為我們需要使用該數(shù)據(jù)字段自定義每行的鏈接.

圖6: 配置HyperLinkField 使用合適的基于SupplierID 的鏈接地址.

　　添加了HyperLinkField后, 可以自定義及重新排列GridView的字段. 下面是我做了修改后的標(biāo)記 (markup):

　　在瀏覽器中訪問一下SupplierListMaster.aspx. 如圖7所示, 頁面列出了所有的供應(yīng)商,每個供應(yīng)商包含”查看產(chǎn)品”鏈接. 單擊”查看產(chǎn)品”鏈接會轉(zhuǎn)到ProductsForSupplierDetails.aspx, 并在查詢字符串中傳遞供應(yīng)商的SupplierID值.

圖 7: 每個供應(yīng)商都包含”查看產(chǎn)品”鏈接.

Step 3: 在ProductsForSupplierDetails.aspx上列出供應(yīng)商的產(chǎn)品

　　SupplierListMaster.aspx頁面使用戶轉(zhuǎn)到ProductsForSupplierDetails.aspx, 并在查詢字符串中傳遞選擇的供應(yīng)商的SupplierID值. 本篇教程的最后一步是在ProductsForSupplierDetails.aspx 頁面上的GridView中顯示產(chǎn)品. 要實現(xiàn)該功能首先添加GridView到ProductsForSupplierDetails.aspx上,并使用一個新的命名為ProductsBySupplierDataSource的ObjectDataSource控件, 該控件調(diào)用ProductsBLL 類的GetProductsBySupplierID(supplierID)方法.

圖8: 添加一個新的命名為 ProductsBySupplierDataSource 的ObjectDataSource

圖9: 選擇ProductsBLL 類

圖10: 讓ObjectDataSource 調(diào)用 GetProductsBySupplierID(supplierID) 方法

　　配置數(shù)據(jù)源向?qū)У淖詈笠徊绞且覀兲峁〨etProductsBySupplierID(supplierID) 方法中 supplierID 參數(shù)的來源. 要使用查詢字符串中的值. 設(shè)置參數(shù)源為QueryString 并在QueryStringField文本框中輸入查詢字符串值的名稱(SupplierID).

圖11: 使用查詢字符串中的SupplierID值做為supplierID 參數(shù)的值

這樣就可以了! 圖12顯示了當(dāng)我們在SupplierListMaster.aspx頁面中單擊Tokyo Traders供應(yīng)商的”查看產(chǎn)品”鏈接時所看到的樣子.

圖12: 顯示Tokyo Traders 供應(yīng)商的產(chǎn)品

在ProductsForSupplierDetails.aspx中顯示供應(yīng)商信息

如圖12所示, ProductsForSupplierDetails.aspx只列出了通過在查詢字符串中指定的SupplierID的供應(yīng)商的產(chǎn)品. 然而, 有些人會直接到達(dá)該頁, 這樣他們就不清楚圖12中正中顯示Tokyo Trader的產(chǎn)品了. 要修正這個問題, 我們可以在頁面上顯示供應(yīng)商的信息.

在GridView上方添加一個FormView. 創(chuàng)建一個ObjectDataSource控件并命名為SuppliersDataSource. 該控件調(diào)用SuppliersBLL類的GetSupplierBySupplierID(supplierID)方法.

圖13: 選擇 SuppliersBLL 類

圖14: 讓ObjectDataSource 調(diào)用 GetSupplierBySupplierID(supplierID) 方法

使用查詢字符串中SupplierID的值為ProductsBySupplierDataSource的supplierID參數(shù)賦值.

圖15: 讓supplierID 參數(shù)使用查詢字符串中的SupplierID 的值

　　在設(shè)計視圖中綁定FormView到ObjectDataSource時, Visual Studio 將會自動的創(chuàng)建FormView的ItemTemplate, InsertItemTemplate 和 EditItemTemplate 三個模板, 這些模板使用Label和TextBox Web控件來呈現(xiàn)從ObjectDataSource返回的數(shù)據(jù). 因為我們只需要顯示供應(yīng)商信息, 可以移除InsertItemTemplate 和 EditItemTemplat模板. 然后,編輯ItemTemplate模板,使它在標(biāo)簽中顯示供應(yīng)商的公司名稱, 在公司名稱下面顯示地址,城市,國家和電話號碼. 另外你也可以手工設(shè)置 FormView的 DataSourceID和創(chuàng)建ItemTemplate的標(biāo)記. 就像我們在后面”使用ObjectDataSource顯示數(shù)據(jù)”一篇中的所作的那樣.

修改后,Formview的標(biāo)記看起來應(yīng)該是這樣:

<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顯示了包含了供應(yīng)商信息后的ProductsForSupplierDetails.aspx頁面截屏.

圖16: 包含供應(yīng)商概括信息的產(chǎn)品列表

為ProductsForSupplierDetails.aspx 用戶界面應(yīng)用些小技巧.

　　要改善該報表的用戶體驗, 應(yīng)該給ProductsForSupplierDetails.aspx頁面添加點東西. 現(xiàn)在用戶從ProductsForSupplierDetails.aspx回到供應(yīng)商列表頁面的唯一方法是單擊瀏覽器的后退按鈕. 讓我們給ProductsForSupplierDetails.aspx增加一個HyperLink控件, 該控件指向SupplierListMaster.aspx, 這樣就給用戶提供了另外一個回到供應(yīng)商列表的方法.

圖17: 增加一個HyperLink 控件讓用戶可以回到SupplierListMaster.aspx

　　如果用戶單擊了某個供應(yīng)商的”查看產(chǎn)品”鏈接,而該供應(yīng)商又沒有任何產(chǎn)品, ProductsForSupplierDetails.aspx 上的ProductsBySupplierDataSource ObjectDataSource將不會返回任何結(jié)果. 綁定到ObjectDataSource的GridView不會呈現(xiàn)任何標(biāo)記, 在用戶的瀏覽器中顯示為空白. 要明確的告訴用戶沒有與選定供應(yīng)商關(guān)聯(lián)的產(chǎn)品,我們可以設(shè)置GridView的EmptyDataText屬性為當(dāng)出現(xiàn)這種情況是我們想要顯示的消息. 我們把它設(shè)置為:” 沒有這個供應(yīng)商的產(chǎn)品…”;

　　默認(rèn)情況下, Northwinds數(shù)據(jù)庫中所有的供應(yīng)商提供了至少一個產(chǎn)品. 但是, 在本篇教程中我已經(jīng)手工修改了產(chǎn)品表, 這樣供應(yīng)商Escargots Nouveaux不再關(guān)聯(lián)任何產(chǎn)品. 圖18顯示了修改后的供應(yīng)商Escargots Nouveaux的詳細(xì)頁面.

圖18: 提示用戶該供應(yīng)商沒有提供任何產(chǎn)品.

總結(jié)

　　主/從報表可以在一個頁面上同時顯示主記錄和明細(xì)記錄,在很多的網(wǎng)站上, 主/從記錄也被分開顯示在兩個頁面上. 在這篇教程中我們看到了如何實現(xiàn)這種報表, 該報表在主頁面上用GridView顯示供應(yīng)商列表, 在明細(xì)頁顯示關(guān)聯(lián)的產(chǎn)品列表. 主頁面上的每個供應(yīng)商都包含一個指定明細(xì)頁面的鏈接, 并傳遞 SupplierID值. 這樣的特定行的鏈接使用GridView的HyperLinkField可以很容易實現(xiàn).

　　明細(xì)頁中獲取指定供應(yīng)商的產(chǎn)品是通過調(diào)用ProductsBLL類的GetProductsBySupplierID(supplierID)方法實現(xiàn)的. supplierID參數(shù)值由查詢字符串中指定. 我們同樣也看到了如何在明細(xì)頁中使用FormView顯示供應(yīng)商詳細(xì)信息

　　下一篇教程是主/從報表的最后一部分. 我們將會看到如何在GridView中列出產(chǎn)品, GridView中的每行有一個選擇按鈕. 單擊選擇按鈕會在同一頁的DetailsView中顯示這個產(chǎn)品的詳細(xì)信息.

祝編程愉快!

作者簡介

Scott Mitchell，著有六本ASP/ASP.NET方面的書，是4GuysFromRolla.com的創(chuàng)始人，自1998年以來一直應(yīng)用微軟Web技術(shù)。Scott是個獨立的技術(shù)咨詢顧問，培訓(xùn)師，作家，最近完成了將由Sams出版社出版的新作，24小時內(nèi)精通ASP.NET 2.0。他的聯(lián)系電郵為mitchell@4guysfromrolla.com，也可以通過他的博客http://scottonwriting.net/與他聯(lián)系。