導(dǎo)言
在前面的使用DropDownList過濾的主/從報表一章里我們使用GridView創(chuàng)建的主/從表,顯示一些"主"記錄.用戶可以根據(jù)主記錄來查看"從"(詳細)的內(nèi)容.主/從表在呈現(xiàn)一對多關(guān)系和含多列的表的信息時是一個好的選擇.在前面我們已經(jīng)學過如何使用GridView和DetailsView來實現(xiàn).本章和后面兩章我們將重新復(fù)習一下這些概念,但是主要學習使用DataList和Repeater來實現(xiàn).本章我們將學習使用DropDownList包含主記錄,而在DataList里顯示從記錄.
第一步: 增加主/從教程頁
首先增加本教程會用到的文件夾(DataListRepeaterFiltering)和頁.新建頁的時候記得選擇Site.master.
Default.aspx
FilterByDropDownList.aspx
CategoryListMaster.aspx
ProductsForCategoryDetails.aspx
CategoriesAndProducts.aspx
圖 1: 創(chuàng)建DataListRepeaterFiltering文件夾和頁
然后打開Default.aspx頁,將SectionLevelTutorialListing.ascx用戶控件拖進來.
圖2: 在Default.aspx頁里增加SectionLevelTutorialListing.ascx
我們需要將主/從教程添加到site map里.打開Web.sitemap,將下面的標記添加到“Displaying Data with the DataList and Repeater”節(jié)點后:
siteMapNode title="Master/Detail Reports with the DataList and Repeater" description="Samples of Reports that Use the DataList and Repeater Controls" url="~/DataListRepeaterFiltering/Default.aspx"> siteMapNode title="Filter by Drop-Down List" description="Filter results using a drop-down list." url="~/DataListRepeaterFiltering/FilterByDropDownList.aspx" /> siteMapNode title="Master/Detail Across Two Pages" description="Master records on one page, detail records on another." url="~/DataListRepeaterFiltering/CategoryListMaster.aspx" /> siteMapNode title="Maser/Detail on One Page" description="Master records in the left column, details on the right, both on the same page." url="~/DataListRepeaterFiltering/CategoriesAndProducts.aspx" /> /siteMapNode>
圖 3: 更新之后的Site Map
第二步: 在DropDownList里顯示Categories
我們的主/從表將在DropDownList里列出categories ,然后將選擇的item的product用DataList顯示出來.打開DataListRepeaterFiltering文件夾里的FilterByDropDownList.aspx頁,拖一個DropDownList進來.將DropDownList的ID設(shè)為Categories.在智能標簽上選擇選擇數(shù)據(jù)源,創(chuàng)建一個名為CategoriesDataSource的ObjectDataSource
圖 4: 添加一個名為CategoriesDataSource的 ObjectDataSource
使用CategoriesBLL類的GetCategories()方法配置ObjectDataSource.然后為DropDownList的text和value配置字段(分別為CategoryName和CategoryID).
圖 5: 配置DropDownList的Text和Value
現(xiàn)在DropDownList里已經(jīng)列出了Categories表里記錄.見圖6.
圖 6: 完成后的DropDownList
第三步: 添加Products DataList
下面將選擇的category關(guān)聯(lián)的product列出來.添加一個DataList,創(chuàng)建一個名為ProductsByCategoryDataSource的ObjectDataSource.用ProductsBLL類的GetProductsByCategoryID(categoryID)來配置它.因為我們的報表是只讀的,所以在INSERT,UPDATE和DELETE標簽里選擇None.
圖 7: 選擇GetProductsByCategoryID(categoryID)方法
點下一步,向?qū)崾疚覀優(yōu)閏ategoryID參數(shù)選擇source.將Parameter source設(shè)為Control,ControlID設(shè)為Categories.
圖 8: 設(shè)置categoryID參數(shù)為Categories DropDownList
完成上面的配置后,Visual Studio會為DataList自動生成一個ItemTemplate來顯示每個字段的name和value.我們來做一些改進,只顯示product的name,category,supplier,quantity和price,并在每個item之間加一個hr>元素(SeoaratorTemplate).我們將使用DataList和Repeater來顯示數(shù)據(jù) 的ItemTemplate例子.ObjectDataSource的標記語言應(yīng)該和下面差不多:
asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
DataSourceID="ProductsByCategoryDataSource" EnableViewState="False">
ItemTemplate>
h4>
asp:Label ID="ProductNameLabel" runat="server"
Text='%# Eval("ProductName") %>' />
/h4>
table border="0">
tr>
td class="ProductPropertyLabel">Category:/td>
td>asp:Label ID="CategoryNameLabel" runat="server"
Text='%# Eval("CategoryName") %>' />/td>
td class="ProductPropertyLabel">Supplier:/td>
td>asp:Label ID="SupplierNameLabel" runat="server"
Text='%# Eval("SupplierName") %>' />/td>
/tr>
tr>
td class="ProductPropertyLabel">Qty/Unit:/td>
td>asp:Label ID="QuantityPerUnitLabel" runat="server"
Text='%# Eval("QuantityPerUnit") %>' />/td>
td class="ProductPropertyLabel">Price:/td>
td>asp:Label ID="UnitPriceLabel" runat="server"
Text='%# Eval("UnitPrice", "{0:C}") %>' />/td>
/tr>
/table>
/ItemTemplate>
SeparatorTemplate>
hr />
/SeparatorTemplate>
/asp:DataList>
asp:ObjectDataSource ID="ProductsByCategoryDataSource" runat="server"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetProductsByCategoryID" TypeName="ProductsBLL">
SelectParameters>
asp:ControlParameter ControlID="Categories" Name="categoryID"
PropertyName="SelectedValue" Type="Int32" />
/SelectParameters>
/asp:ObjectDataSource>
在瀏覽器里看一下頁面.第一次訪問時,和Beverager關(guān)聯(lián)的product都顯示出來了(圖9),但是改變DropDownList不會更新數(shù)據(jù),這是因為還更新DataList需要postback.我們將DropDownList的AutoPostBack屬性設(shè)為true.
圖 9: 第一次訪問時, 顯示Beverage的 Products
圖 10: 選擇一個新的category(Produce),更新DataList
添加一個 “-- Choose a Category --” List Item第一次訪問頁面時,Beveages默認被選中,并且在DataList里顯示它的product.在使用DropDownList過濾的主/從報表 里我們添加了“-- Choose a Category --”選項(默認項),顯示所有的product.在GridView里顯示product時這樣很方便.而對DataList而言,每個product要占很大一塊屏幕,因此在選擇“-- Choose a Category --”時底下將不顯示product.在DropDownList的屬性里選擇Items屬性,添加一個Text為“-- Choose a Category --”,Value為0的項.
圖 11: 添加 “-- Choose a Category --” 項
你也可以直接在DropDownList的標記語言里添加以下代碼:
asp:DropDownList ID="categories" runat="server" AutoPostBack="True" DataSourceID="CategoriesDataSource" DataTextField="CategoryName" DataValueField="CategoryID" EnableViewState="False"> asp:ListItem Value="0">-- Choose a Category --/asp:ListItem> /asp:DropDownList>
另外我們需要將DropDownList的AppendDataBoundItems設(shè)為true.因為如果為false(默認),當categories綁定到DropDownList時將覆蓋手工添加的list item.
圖 12: Set the AppendDataBoundItems Property to True
我們將“-- Choose a Category --” 的value設(shè)為0是因為系統(tǒng)里沒有categories的value為0,因此當選擇這條category時不會有product返回.瀏覽一下網(wǎng)頁來確認這點.見圖13.
圖 13: 選中“-- Choose a Category --” 時, 沒有Products 被顯示
如果你想在選擇“-- Choose a Category --” 時顯示所有的product,將它的value設(shè)為1.細心的讀者會記起來在使用DropDownList過濾的主/從報表 里我們更新了ProductsBLL類的GetProductsByCategoryID(categoryID)方法,如果categoryID為1時所有的product記錄會被返回.
總結(jié)
當顯示層次關(guān)系的數(shù)據(jù)時,使用主/從表來展示數(shù)據(jù)很有幫助.用戶可以通過它從最高層的數(shù)據(jù)開始,逐漸進入最細節(jié)的數(shù)據(jù).在本章我們學習了一個簡單的主/從表來顯示選中的category下的product.我們用DropDownList列出dategory,DataList來顯示product.在下章我們將學習將主/從記錄分開到兩個頁面.在第一個頁里,顯示所有的"主"記錄,并有一個鏈接到"從"信息的link.點這個link用戶會看到顯示細節(jié)信息的頁.
祝編程愉快!
作者簡介
Scott Mitchell，著有六本ASP/ASP.NET方面的書，是4GuysFromRolla.com的創(chuàng)始人，自1998年以來一直應(yīng)用 微軟Web技術(shù)。Scott是個獨立的技術(shù)咨詢顧問，培訓師，作家，最近完成了將由Sams出版社出版的新作，24小時內(nèi)精通ASP.NET 2.0。他的聯(lián)系電郵為mitchell@4guysfromrolla.com，也可以通過他的博客http://ScottOnWriting.NET與他聯(lián)系。
