三十三：基于DataList和Repeater使用DropDownList過濾的主從報表

1、在ASP.NET 2.0中操作數(shù)據(jù)之三十三：基于DataList和Repeater使用DropDownList過濾的主/從報表作者：heker2007 字體：增加 減小 類型：轉(zhuǎn)載 時間：2016-05-09 我要評論前面已經(jīng)介紹過使用DropDownList過濾的主/從報表，不過當時是基于GridView，本文算是復習一下，基于DataList和Repeater再次實現(xiàn)一下相同的功能。導言在前面的使用DropDownList過濾的主/從報表一章里我們使用GridView創(chuàng)建的主/從表,顯示一些"主"記錄.用戶可以根據(jù)主記錄來查看"從"

2、;(詳細)的內(nèi)容.主/從表在呈現(xiàn)一對多關(guān)系和含多列的表的信息時是一個好的選擇.在前面我們已經(jīng)學過如何使用GridView和DetailsView來實現(xiàn).本章和后面兩章我們將重新復習一下這些概念,但是主要學習使用DataList和Repeater來實現(xiàn).本章我們將學習使用DropDownList包含主記錄,而在DataList里顯示從記錄.第一步: 增加主/從教程頁首先增加本教程會用到的文件夾(DataListRepeaterFiltering)和頁.新建頁的時候記得選擇Site.master.Default.aspxFilterByDropDownList.aspxCategoryListMa

3、ster.aspxProductsForCategoryDetails.aspxCategoriesAndProducts.aspx圖 1: 創(chuàng)建DataListRepeaterFiltering文件夾和頁然后打開Default.aspx頁,將SectionLevelTutorialListing.ascx用戶控件拖進來.圖2: 在Default.aspx頁里增加SectionLevelTutorialListing.ascx我們需要將主/從教程添加到site map里.打開Web.sitemap,將下面的標記添加到“Displaying Data with the DataList and

4、Repeater”節(jié)點后:?12345678910111213141516171819202122<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">

5、60;  <siteMapNode title="Filter by Drop-Down List" description="Filter results using a drop-down list." url="/DataListRepeaterFiltering/FilterByDropDownList.aspx" />   <siteMapNode title="Master/Detail Across Tw

6、o 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 th

7、e 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用D

8、ataList顯示出來.打開DataListRepeaterFiltering文件夾里的FilterByDropDownList.aspx頁,拖一個DropDownList進來.將DropDownList的ID設(shè)為Categories.在智能標簽上選擇選擇數(shù)據(jù)源,創(chuàng)建一個名為CategoriesDataSource的ObjectDataSource圖 4: 添加一個名為CategoriesDataSource的 ObjectDataSource使用CategoriesBLL類的GetCategories()方法配置ObjectDataSource.然后為DropDownList的text和va

9、lue配置字段(分別為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)來配置它.因為我

10、們的報表是只讀的,所以在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

11、的name,category,supplier,quantity和price,并在每個item之間加一個<hr>元素(SeoaratorTemplate).我們將使用DataList和Repeater來顯示數(shù)據(jù) 的ItemTemplate例子.ObjectDataSource的標記語言應(yīng)該和下面差不多:?123456789101112131415161718192021222324252627282930313233343536373839<asp:DataList ID="DataList1" runat="server" DataK

12、eyField="ProductID" DataSourceID="ProductsByCategoryDataSource" EnableViewState="False"> <ItemTemplate> <h4>  <asp:Label ID="ProductNameLabel" runat="server"  Text='<%# Eval("ProductNam

13、e") %>' /> </h4> <table border="0">  <tr>  <td class="ProductPropertyLabel">Category:</td>  <td><asp:Label ID="CategoryNameLabel" runat="server"   Text

14、='<%# Eval("CategoryName") %>' /></td>  <td class="ProductPropertyLabel">Supplier:</td>  <td><asp:Label ID="SupplierNameLabel" runat="server"   Text='<%# Eval("SupplierN

15、ame") %>' /></td>  </tr>  <tr>  <td class="ProductPropertyLabel">Qty/Unit:</td>  <td><asp:Label ID="QuantityPerUnitLabel" runat="server"   Text='<%# Eval(

16、"QuantityPerUnit") %>' /></td>  <td class="ProductPropertyLabel">Price:</td>  <td><asp:Label ID="UnitPriceLabel" runat="server"   Text='<%# Eval("UnitPrice", "0:C&quo

17、t;) %>' /></td>  </tr> </table> </ItemTemplate> <SeparatorTemplate> <hr /> </SeparatorTemplate></asp:DataList>  <asp:ObjectDataSource ID="ProductsByCategoryDataSource" runat="serv

18、er" OldValuesParameterFormatString="original_0" SelectMethod="GetProductsByCategoryID" TypeName="ProductsBLL"> <SelectParameters> <asp:ControlParameter ControlID="Categories" Name="categoryID"  PropertyN

19、ame="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: 選擇一個新的ca

20、tegory(Produce),更新DataList添加一個 “- Choose a Category -” List Item第一次訪問頁面時,Beveages默認被選中,并且在DataList里顯示它的product.在使用DropDownList過濾的主/從報表 里我們添加了“- Choose a Category -”選項(默認項),顯示所有的product.在GridView里顯示product時這樣很方便.而對DataList而言,每個product要占很大一塊屏幕,因此在選擇“- Choose a Category -”時底下將不顯示product.在DropDownList的屬

21、性里選擇Items屬性,添加一個Text為“- Choose a Category -”,Value為0的項.圖 11: 添加 “- Choose a Category -” 項你也可以直接在DropDownList的標記語言里添加以下代碼:?1234567<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>   另外我們需要將Dr