1、在前面一章里我們學(xué)習(xí)了如何用兩個(gè)頁分別顯示主/從信息。在“主”頁里我們用Repeater來顯示category。每個(gè)category的name都是一個(gè)鏈到“從”頁的hyperlink。在從頁里用一個(gè)兩列的DataList顯示選中的category下的product。本章我們將還是使用單頁，在左邊顯示category列表，category的名字用LinkButton顯示。點(diǎn)擊其中一個(gè)時(shí)頁面postback，在右邊以兩列的DataList顯示出相關(guān)的product。除了名字外，左邊的Repeater還會顯示與該category相關(guān)聯(lián)的product總數(shù)。（見圖1）圖 1: Category的 Na

2、me 和 Product總數(shù)顯示在左邊第一步: 在頁面左部顯示一個(gè)Repeater本章我們將在左邊顯示category，右表顯示它關(guān)聯(lián)的product。web頁的內(nèi)容可以使用標(biāo)準(zhǔn)HTML元素或者CSS來定位。到目前為止我們都是使用CSS來定位。在母板頁和站點(diǎn)導(dǎo)航 一章里我們使用絕對定位來創(chuàng)建導(dǎo)航時(shí)，為導(dǎo)航列表和內(nèi)容之間指定了明確的距離。當(dāng)然CSS也可以用來對兩個(gè)元素的位置進(jìn)行調(diào)整。打開DataListRepeaterFiltering文件夾下的CategoriesAndProducts.aspx頁，添加一個(gè)Repeater和DataList.ID分別設(shè)置為Categories和Category

3、Products。然后到源視圖里將它們分別放到<div>元素里。也就是說在Repeater后面加一個(gè)閉合的</div>，在DataList前加一個(gè)開始的<div>?，F(xiàn)在你的代碼看起來應(yīng)該和下面差不多：ASP.NET              <div>            <asp:Repeater ID=&qu

4、ot;Categories" runat="server">            </asp:Repeater>            </div>            <div> &

5、#160;          <asp:DataList ID="CategoryProducts" runat="server">            </asp:DataList>            </div

6、>             我們需要使用float屬性來將Repeater放到DataList左邊，見下面代碼：ASP.NET              <div style="float: left; width: 33%; padding-right: 10px;">    &

7、#160;       Repeater            </div>            <div>            DataList   

8、         </div>              float:left 將第一個(gè)<div>放到第二個(gè)的左邊。width和padding-right指定了第一個(gè)<div>的寬和<div>內(nèi)容和右邊框的距離。更多的floating元素信息請參考Floatutorial.我們在Styles.css里創(chuàng)建一個(gè)新的CSS類，名為Floatle

9、ft（而不是直接在<p>的樣式里設(shè)置）：CSS              .FloatLeft                        float: left;       

10、;     width: 33%;            padding-right: 10px;                         然后我們用<div class="FloatLeft&q

11、uot;>將<div style="float:left">替換掉。完成以上所講的內(nèi)容后，切換到設(shè)計(jì)視圖。你應(yīng)該看到Repeater已經(jīng)在DataList左邊了（由于還沒有配置數(shù)據(jù)源或模板，這兩個(gè)控件都是灰的）。圖 2: 調(diào)整完位置后的頁面第二步: 獲取每個(gè)Category關(guān)聯(lián)的Products總數(shù) 完成了樣式設(shè)置后，我們現(xiàn)在來將category數(shù)據(jù)綁定到Repeater。如圖1所示，除了category名字外，我們需要顯示和它關(guān)聯(lián)的product總數(shù)，為了獲取這個(gè)信息我們可以：在ASP.NET page的code-behind 里獲取這個(gè)信息.

12、 根據(jù)給定的categoryID我們可以通過ProductsBLL類的GetProductsByCategoryID(categoryID)方法來獲取關(guān)聯(lián)的product總數(shù)。這個(gè)方法返回一個(gè)ProductsDataTable對象，它的Count屬性表示了我們需要知道的信息。我們可以為Repeater創(chuàng)建一個(gè)ItemDataBound event handler，在每個(gè)category綁定到Repeater時(shí)調(diào)用這個(gè)方法然后將總數(shù)輸出。在DataSet里更新CategoriesDataTable 添加一個(gè)NumberOfProducts列. 我們可以更新CategoriesDataTable的

13、GetCategories()方法來包含這個(gè)信息或者保留這個(gè)方法，再創(chuàng)建一個(gè)新的名為GetCategoriesAndNumberOfProducts()方法。 我們來看看這兩種方法。第一種寫起來更簡單，因?yàn)槲覀儾恍枰翫AL。但是它需要和數(shù)據(jù)庫更多的連接。在ItemDataBound event handler里調(diào)用GetProductsByCategoryID(categoryID)方法又增加了一次數(shù)據(jù)庫連接（這在每個(gè)category綁定時(shí)會發(fā)生一次）。這時(shí)一共會有N+1次對數(shù)據(jù)庫的請求（N為Repeater里顯示的category的總數(shù)）。而第二種方法product總數(shù)從GetCateg

14、ories()(或GetCategoriesAndNumberOfProducts()方法返回，這樣只請求一次數(shù)據(jù)庫就可以了。在ItemDataBound Event Handler里獲取Products總數(shù)在ItemDataBound event handler里獲取product總數(shù)不需要修改DAL。只需要直接修改CategoriesAndProducts.aspx頁。通過Repeater的智能標(biāo)簽添加一個(gè)新的名為CategoriesDataSource的ObjectDataSource。使用CategoriesBLL類的GetCategories()方法配置它。圖 3: 配置 Objec

15、tDataSourceRepeater里的每個(gè)Category都是可點(diǎn)的，而且在點(diǎn)了之后，CategoryProducts DataList會顯示那些相關(guān)的product。我們可以將每個(gè)category設(shè)為hyperlink，鏈到本頁(CategoriesAndProducts.aspx)，通過querystring為CategoryID賦值。這種方法的好處是，特定category的product可以通為搜索建立索引和書簽。我們也可以將每個(gè)category設(shè)為LinkButton，在本章我們使用這個(gè)方法。LinkButton看起來象一個(gè)hyperlink，但是點(diǎn)擊后會產(chǎn)生一個(gè)postback。

16、DataList的ObjectDataSource會刷新以顯示選中category相關(guān)聯(lián)的product。在本章使用hyperlink更合理。然而在別的情況下可以使用LinkButton會好一點(diǎn)。雖然是這樣，我們在這里也使用LinkButton。我們將會看到，使用LinkButton會有一些使用hyperlink時(shí)碰不到的挑戰(zhàn)。因此我們可以學(xué)習(xí)更好學(xué)習(xí)它，以便以后使用。注意：如果你使用HyperLink或<a>來代替LinkButton來重復(fù)練習(xí)一次本章的內(nèi)容，是最好不過了。下面的標(biāo)記語言是Repeater和ObjectDataSource的，注意Repeater的template

17、將每個(gè)item表示為LinkButton。ASP.NET              <asp:Repeater ID="Categories" runat="server" DataSourceID="CategoriesDataSource">            <HeaderTemp

18、late>            <ul>            </HeaderTemplate>            <ItemTemplate>      &#

19、160;     <li><asp:LinkButton runat="server" ID="ViewCategory"></asp:LinkButton></li>            </ItemTemplate>          

20、0; <FooterTemplate>            </ul>            </FooterTemplate>            </asp:Repeater>   &

21、#160;        <asp:ObjectDataSource ID="CategoriesDataSource" runat="server"            OldValuesParameterFormatString="original_0"        

22、;    SelectMethod="GetCategories" TypeName="CategoriesBLL">            </asp:ObjectDataSource>             注意：在本章Repeater的view state必須開啟（Repe

23、ater的聲明語法里的EnableViewState="False"）。在第三步我們將為ItemCommand事件創(chuàng)建一個(gè)event handler，在它里面我們要更新DataList的ObjectDataSource的SeleceParameters集合。如果view state 被禁用的話Repeater的ItemCommand不會被激發(fā)。想了解具體的原因和更多的信息請參考 A Stumper of an ASP.NET Question 和its solution 。ID為ViewCategory的LinkButton還沒有設(shè)置Text屬性。如果我們只需要顯示cate

24、gory名字，我們可以通過綁定語法象下面這樣來直接設(shè)置：ASP.NET              <asp:LinkButton runat="server" ID="ViewCategory" Text='<%# Eval("CategoryName") %>' />        &#

25、160;    然而在這里我們需要顯示的是category的name和proudct的總數(shù)。見下面的代碼：C#              protected void Categories_ItemDataBound(object sender, RepeaterItemEventArgs e)             

26、0;          / Make sure we're working with a data item.            if (e.Item.ItemType = ListItemType.Item |            e.Item.ItemType = Lis

27、tItemType.AlternatingItem)                        / Reference the CategoriesRow instance bound to this RepeaterItem            Northwin

28、d.CategoriesRow category =            (Northwind.CategoriesRow) (System.Data.DataRowView) e.Item.DataItem).Row;            / Determine how many products are in this category   

29、;         NorthwindTableAdapters.ProductsTableAdapter productsAPI =            new NorthwindTableAdapters.ProductsTableAdapter();            int produ

30、ctCount =            productsAPI.GetProductsByCategoryID(category.CategoryID).Count;            / Reference the ViewCategory LinkButton and set its Text property     

31、;       LinkButton ViewCategory = (LinkButton)e.Item.FindControl("ViewCategory");            ViewCategory.Text =            string.Format("0 (1:N

32、0)", category.CategoryName, productCount);                                     我們首先要確保我們處理的是data item(ItemType為Item或Alternati

33、ngItem)然后引用剛剛綁定到當(dāng)前RepeaterItem的CategoriesRow。然后調(diào)用GetCategoriesByProductID(categoryID)方法，通過Count屬性獲取返回的記錄條數(shù)。最后將ItemTemplate里的ViewCategory LinkButton的Text屬性設(shè)為"CategoryName(NumberOfProductsInCategory)"。注意：我們也可以在ASP.NET頁的code-behind里寫一個(gè)格式化功能，接收CategoryName和CategoryID的值，返回CategoryName和product總數(shù)

34、的連接字符串。然后將結(jié)果直接賦給LinkButton的Text屬性，而不需要處理itemDataBound事件。更多的格式化功能信息參考在GridView控件中使用TemplateField 和格式化DataList和Repeater的數(shù)據(jù)。添加完event handler后，在瀏覽器里看看頁面。見圖4。圖 4: 顯示每個(gè) Category的 Name 和 Products總數(shù)更新CategoriesDataTable和CategoriesTableAdpter來包含每個(gè)Category的Product總數(shù)除了在每個(gè)category綁定到Repeater時(shí)獲取product總數(shù)外,我們還可以修

35、改DAL里CategoriesDataTable和CategoriesTableAdapter來包含這個(gè)信息.我們在CategoriesDataTable里加一列.打開App_Code/DAL/Northwind.xsd,右鍵點(diǎn)DataTable,選擇Add/Column.見圖5.圖 5: 為CategoriesaDataSource增加一個(gè)新列這樣會添加一個(gè)名為Column1的列,你可以很方便的修改它的名字.將它重命名為NumberOfProducts.然后我們需要配置這列的屬性.點(diǎn)這個(gè)列,來到屬性窗口.將DataType從System.String修改為System.Int32.將Read

36、Only屬性設(shè)為True.見圖6.圖 6: 設(shè)置新列的屬性現(xiàn)在CategoriesDataTable里已經(jīng)包含了NumberOfProducts列,但它的值還沒有設(shè)置.我們可以修改GetCategories()方法,當(dāng)每次獲取category信息的時(shí)候返回它的信息.在這里由于只是本章用到了這個(gè)數(shù)據(jù),我們來創(chuàng)建一個(gè)新的名為GetCategoriesAndNumberOfProducts().右鍵點(diǎn)CategoriesTableAdapter,選擇New Query.會出現(xiàn)TableAdapter Query配置向?qū)?選擇SQL statement.圖 7: 選擇SQL Statement圖 8:

37、 SQL Statement 返回行數(shù)下一步需要我們寫sql語句.下面的語句返回每個(gè)category的CategoryID,CategoryName,Description和相關(guān)product的總數(shù):SQL              SELECT CategoryID, CategoryName, Description,            (SELECT COU

38、NT(*) FROM Products p WHERE p.CategoryID = c.CategoryID) as NumberOfProducts            FROM Categories c             圖 9: 使用的sql語句注意計(jì)算product總數(shù)的子查詢的別名為NumberOfProducts.它和CategoriesData

39、Table的NumberOfProducts列關(guān)聯(lián).最后一步是寫方法的名字.分別為Fill a DataTable和Return a DataTable命名為FillWithNumberOfProducts和GetCategoriesAndNumberOfProducts.圖 10: 為新的TableAdapter的方法命名現(xiàn)在DAL已經(jīng)修改完了.由于我們所有展現(xiàn)層,BLL,DAL是逐層調(diào)用,所以我們需要在CategoriesBLL類的添加相應(yīng)的GetCategoriesAndNumberOfProducts方法.C#       &

40、#160;      System.ComponentModel.DataObjectMethodAttribute            (System.ComponentModel.DataObjectMethodType.Select, false)            public Northwind.Categori

41、esDataTable GetCategoriesAndNumberOfProducts()                        return Adapter.GetCategoriesAndNumberOfProducts();           

42、60;            完成DAL和BLL后,我們來將數(shù)據(jù)綁定到Categories Repeater.如果在"在ItemDataBound Event Handler里獲取Products總數(shù)"那部分里你已經(jīng)為Repeater創(chuàng)建了ObjectDataSource,刪掉它,然后去掉Repeater的DataSourceID屬性,同樣去掉ItemDataBound事件.Repeater現(xiàn)在回到了初始狀態(tài),添加一個(gè)名為CategoriesDataSource的O

43、bjectDataSource.使用CategoriesBLL類的GetCategoriesAndNumberOfProducts()方法來配置它.見圖11.圖 11: 配置ObjectDataSource然后修改ItemTemplate，使用數(shù)據(jù)綁定語法來將CategoryName和NumberOfProducts字段綁定到LinkButton的Text屬性.完整的標(biāo)記語言如下：ASP.NET              <asp:Repeater ID="C

44、ategories" runat="server" DataSourceID="CategoriesDataSource">            <HeaderTemplate>            <ul>       &#

45、160;    </HeaderTemplate>            <ItemTemplate>            <li><asp:LinkButton runat="server" ID="ViewCategory"   &

46、#160;        Text='<%# String.Format("0 (1:N0)", _            Eval("CategoryName"), Eval("NumberOfProducts") %>' />        

47、    </li>            </ItemTemplate>            <FooterTemplate>            </ul>  

48、60;         </FooterTemplate>            </asp:Repeater>            <asp:ObjectDataSource ID="CategoriesDataSource" runat=&qu

49、ot;server"            OldValuesParameterFormatString="original_0"            SelectMethod="GetCategoriesAndNumberOfProducts" TypeName="CategoriesBLL">&#

50、160;           </asp:ObjectDataSource>             使用這種方法的頁面看起來和前面一種方法一樣（見圖）第三步: 顯示選中的Category關(guān)聯(lián)的Products現(xiàn)在category和product總數(shù)的部分已經(jīng)完成Repeater將每個(gè)category顯示為LinkButton，當(dāng)點(diǎn)擊時(shí)產(chǎn)生postback，這時(shí)我們

51、需要將那些關(guān)聯(lián)的product在CategoryProducts DataList里顯示出來現(xiàn)在我們面臨的一個(gè)挑戰(zhàn)是如何將特定category下的product在DataList里顯示出拉一.在使用GridView 和DetailView實(shí)現(xiàn)的主/從報(bào)表一章里我們學(xué)習(xí)了創(chuàng)建一個(gè)GirdView,當(dāng)選擇它的一行時(shí)將"從"信息在本頁的DetailsView里顯示出來.GridView的ObjectDataSource用ProductsBLL的GetProducts()返回product信息.而DetailsView的ObjectDataSource用GetProductsByP

52、roductID(productID)返回選中的product信息.productID參數(shù)通過GirdView的SelectedValue屬性來提供.不幸的是,Repeater沒有SelectedValue屬性.注意:這是我們在Repeater里使用LinkButton的其中一個(gè)挑戰(zhàn).如果我們使用hperlink,可以通過querystring來傳遞CategoryID.在我們解決這個(gè)問題前,首先將ObjectDataSource綁定到DataList,然后指定ItemTemplate.從DataList的智能標(biāo)簽添加一個(gè)名為CategoryProductsDataSource的ObjectD

53、ataSource,并使用ProductsBLL類的GetProductsByCategoryID(cateogryID)配置它.由于此DataList只提供只讀功能,因此在INSERT,UPDATE,DELETE標(biāo)簽里選擇None.圖 12: 配置 ObjectDataSource由于GetProductsByCategoryID(categoryID)方法需要一個(gè)輸入?yún)?shù),向?qū)笪覀冎付▍?shù)源.我們使用GridView或DataList列出categories時(shí),可以將參數(shù)源設(shè)為Control,ControlID設(shè)為數(shù)據(jù)控件的ID.然而由于Repeater沒有SelectedValue

54、屬性,所以不能用作參數(shù)源.你可以查看ControlID下拉列表,它里面只包含一個(gè)控件IDCategoryProducts(DataList).圖 13: 配置參數(shù)配置完數(shù)據(jù)源后,Visual Studio為DataList自動產(chǎn)生ItemTemplate.用我們前面使用的template替換默認(rèn)的ItemTemplate.將DataList的RepeatColumns屬性設(shè)為2.完成這些后,你的代碼應(yīng)該和下面的差不多:ASP.NET              <asp:

55、DataList ID="CategoryProducts" runat="server" DataKeyField="ProductID"            DataSourceID="CategoryProductsDataSource" RepeatColumns="2"         

56、   EnableViewState="False">            <ItemTemplate>            <h5><%# Eval("ProductName") %></h5>     

57、60;      <p>            Supplied by <%# Eval("SupplierName") %><br />            <%# Eval("UnitPrice", "0:C") %>

58、;            </p>            </ItemTemplate>            </asp:DataList>       

59、0;    <asp:ObjectDataSource ID="CategoryProductsDataSource"            OldValuesParameterFormatString="original_0"  runat="server"          &#

60、160; SelectMethod="GetProductsByCategoryID" TypeName="ProductsBLL">            <SelectParameters>            <asp:Parameter Name="categoryID" Type=&

61、quot;Int32" />            </SelectParameters>            </asp:ObjectDataSource>             目前為止CategoryProdu

62、ctsDataSource ObjectDataSource的categoryID參數(shù)還沒有設(shè)置.所以瀏覽頁面時(shí)沒有任何的product顯示出來.我們現(xiàn)在需要將它設(shè)置為Repeater中的被點(diǎn)擊的category的CategoryID.這里有兩個(gè)問題,第一是我們?nèi)绾闻袛嗍裁磿r(shí)候Repeater的ItemTemplate被點(diǎn)了.二是哪個(gè)被點(diǎn)了.和Button,ImageButton一樣,LinkButton有一個(gè)Click event和一個(gè)Command event.Click事件僅僅用來說明LinkButton被點(diǎn)擊了.有時(shí)候我們需要傳遞更多的信息到event handler里.這樣的話,就需

63、要使用LinkButton的CommandName 和CommandArgument .當(dāng)LinkButton被點(diǎn)時(shí),Command事件激發(fā),event handler會接受CommandName和CommandArgument的值.當(dāng)Repeater里的template里激發(fā)了一個(gè)Command事件時(shí),Rpeater的ItemCommand事件被激發(fā).并將被點(diǎn)擊的LinkButton(或者Button和ImageButton)的CommandName和CommandArgument的值傳進(jìn)來.因此,判斷category LinkButton什么時(shí)候被點(diǎn)擊了,我們需要:設(shè)置Rpeater里的I

64、temTemplate的LinkButton的CommandName屬性(我使用的"ListProducts").設(shè)置了值后LinkButton被點(diǎn)后Command事件會激發(fā). 設(shè)置LinkButton的CommandArgument屬性為當(dāng)前item的CategoryID. 為Repeater的ItemCommand事件創(chuàng)建一個(gè)event handler.在它里面將傳入的CommandArgument值賦給CategoryProductsDataSource ObjectDataSource的CategoryID參數(shù). 下面是完成了1,2步后的標(biāo)記.注意CategoryI

65、D是如何通過綁定語法來賦給CommandArgument的.ASP.NET              <ItemTemplate>            <li>            <asp:LinkButton Comman

66、dName="ListProducts"  runat="server"            CommandArgument='<%# Eval("CategoryID") %>' ID="ViewCategory"            Text='

67、<%# string.Format("0 (1:N0)", _            Eval("CategoryName"), Eval("NumberOfProducts") %>'>            </asp:LinkButton>            </li>            </ItemTemplate>             由于任何一個(gè)Button,LinkButto