導(dǎo)言

　　在前面的使用DropDownList過濾的主/從報(bào)表一章里我們使用GridView創(chuàng)建的主/從表,顯示一些"主"記錄.用戶可以根據(jù)主記錄來(lái)查看"從"(詳細(xì))的內(nèi)容.主/從表在呈現(xiàn)一對(duì)多關(guān)系和含多列的表的信息時(shí)是一個(gè)好的選擇.在前面我們已經(jīng)學(xué)過如何使用GridView和DetailsView來(lái)實(shí)現(xiàn).本章和后面兩章我們將重新復(fù)習(xí)一下這些概念,但是主要學(xué)習(xí)使用DataList和Repeater來(lái)實(shí)現(xiàn).本章我們將學(xué)習(xí)使用DropDownList包含主記錄,而在DataList里顯示從記錄.

第一步: 增加主/從教程頁(yè)

首先增加本教程會(huì)用到的文件夾(DataListRepeaterFiltering)和頁(yè).新建頁(yè)的時(shí)候記得選擇Site.master.

Default.aspx
FilterByDropDownList.aspx
CategoryListMaster.aspx
ProductsForCategoryDetails.aspx
CategoriesAndProducts.aspx

圖 1: 創(chuàng)建DataListRepeaterFiltering文件夾和頁(yè)

然后打開Default.aspx頁(yè),將SectionLevelTutorialListing.ascx用戶控件拖進(jìn)來(lái).

圖2: 在Default.aspx頁(yè)里增加SectionLevelTutorialListing.ascx

我們需要將主/從教程添加到site map里.打開Web.sitemap,將下面的標(biāo)記添加到“Displaying Data with the DataList and Repeater”節(jié)點(diǎn)后:

<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顯示出來(lái).打開DataListRepeaterFiltering文件夾里的FilterByDropDownList.aspx頁(yè),拖一個(gè)DropDownList進(jìn)來(lái).將DropDownList的ID設(shè)為Categories.在智能標(biāo)簽上選擇選擇數(shù)據(jù)源,創(chuàng)建一個(gè)名為CategoriesDataSource的ObjectDataSource

圖 4: 添加一個(gè)名為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列出來(lái).添加一個(gè)DataList,創(chuàng)建一個(gè)名為ProductsByCategoryDataSource的ObjectDataSource.用ProductsBLL類的GetProductsByCategoryID(categoryID)來(lái)配置它.因?yàn)槲覀兊膱?bào)表是只讀的,所以在INSERT,UPDATE和DELETE標(biāo)簽里選擇None.

圖 7: 選擇GetProductsByCategoryID(categoryID)方法

點(diǎn)下一步,向?qū)?huì)提示我們?yōu)閏ategoryID參數(shù)選擇source.將Parameter source設(shè)為Control,ControlID設(shè)為Categories.

圖 8: 設(shè)置categoryID參數(shù)為Categories DropDownList

　　完成上面的配置后,Visual Studio會(huì)為DataList自動(dòng)生成一個(gè)ItemTemplate來(lái)顯示每個(gè)字段的name和value.我們來(lái)做一些改進(jìn),只顯示product的name,category,supplier,quantity和price,并在每個(gè)item之間加一個(gè)<hr>元素(SeoaratorTemplate).我們將使用DataList和Repeater來(lái)顯示數(shù)據(jù) 的ItemTemplate例子.ObjectDataSource的標(biāo)記語(yǔ)言應(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>

　　在瀏覽器里看一下頁(yè)面.第一次訪問時(shí),和Beverager關(guān)聯(lián)的product都顯示出來(lái)了(圖9),但是改變DropDownList不會(huì)更新數(shù)據(jù),這是因?yàn)檫€更新DataList需要postback.我們將DropDownList的AutoPostBack屬性設(shè)為true.

圖 9: 第一次訪問時(shí), 顯示Beverage的 Products

圖 10: 選擇一個(gè)新的category(Produce),更新DataList

　　添加一個(gè) “-- Choose a Category --” List Item第一次訪問頁(yè)面時(shí),Beveages默認(rèn)被選中,并且在DataList里顯示它的product.在使用DropDownList過濾的主/從報(bào)表 里我們添加了“-- Choose a Category --”選項(xiàng)(默認(rèn)項(xiàng)),顯示所有的product.在GridView里顯示product時(shí)這樣很方便.而對(duì)DataList而言,每個(gè)product要占很大一塊屏幕,因此在選擇“-- Choose a Category --”時(shí)底下將不顯示product.在DropDownList的屬性里選擇Items屬性,添加一個(gè)Text為“-- Choose a Category --”,Value為0的項(xiàng).

圖 11: 添加 “-- Choose a Category --” 項(xiàng)

你也可以直接在DropDownList的標(biāo)記語(yǔ)言里添加以下代碼:

<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.因?yàn)槿绻麨閒alse(默認(rèn)),當(dāng)categories綁定到DropDownList時(shí)將覆蓋手工添加的list item.

圖 12: Set the AppendDataBoundItems Property to True

　　我們將“-- Choose a Category --” 的value設(shè)為0是因?yàn)橄到y(tǒng)里沒有categories的value為0,因此當(dāng)選擇這條category時(shí)不會(huì)有product返回.瀏覽一下網(wǎng)頁(yè)來(lái)確認(rèn)這點(diǎn).見圖13.

圖 13: 選中“-- Choose a Category --” 時(shí), 沒有Products 被顯示

　　如果你想在選擇“-- Choose a Category --” 時(shí)顯示所有的product,將它的value設(shè)為1.細(xì)心的讀者會(huì)記起來(lái)在使用DropDownList過濾的主/從報(bào)表 里我們更新了ProductsBLL類的GetProductsByCategoryID(categoryID)方法,如果categoryID為1時(shí)所有的product記錄會(huì)被返回.

總結(jié)

　　當(dāng)顯示層次關(guān)系的數(shù)據(jù)時(shí),使用主/從表來(lái)展示數(shù)據(jù)很有幫助.用戶可以通過它從最高層的數(shù)據(jù)開始,逐漸進(jìn)入最細(xì)節(jié)的數(shù)據(jù).在本章我們學(xué)習(xí)了一個(gè)簡(jiǎn)單的主/從表來(lái)顯示選中的category下的product.我們用DropDownList列出dategory,DataList來(lái)顯示product.在下章我們將學(xué)習(xí)將主/從記錄分開到兩個(gè)頁(yè)面.在第一個(gè)頁(yè)里,顯示所有的"主"記錄,并有一個(gè)鏈接到"從"信息的link.點(diǎn)這個(gè)link用戶會(huì)看到顯示細(xì)節(jié)信息的頁(yè).

　　祝編程愉快!

作者簡(jiǎn)介

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

最新評(píng)論