三十五：使用Repeater和DataList單頁(yè)面實(shí)現(xiàn)主從報(bào)表

1、在ASP.NET 2.0中操作數(shù)據(jù)之三十五：使用Repeater和DataList單頁(yè)面實(shí)現(xiàn)主/從報(bào)表作者：heker2007 字體：增加減小 類型：轉(zhuǎn)載 時(shí)間：2016-05-10我要評(píng)論前面已經(jīng)介紹了ASP.NET 2.0中如何使用兩個(gè)頁(yè)面實(shí)現(xiàn)主/從報(bào)表，本文主要講解，如何使用一個(gè)單獨(dú)頁(yè)面實(shí)現(xiàn)主/從報(bào)表。導(dǎo)言在前面一章里我們學(xué)習(xí)了如何用兩個(gè)頁(yè)分別顯示主/從信息。在“主”頁(yè)里我們用Repeater來顯示category。每個(gè)category的name都是一個(gè)鏈到“從”頁(yè)的hyperlink。在從頁(yè)里用一個(gè)兩列的DataList顯示選中的category下的product。本章我們將還是使用單

2、頁(yè)，在左邊顯示category列表，category的名字用LinkButton顯示。點(diǎn)擊其中一個(gè)時(shí)頁(yè)面postback，在右邊以兩列的DataList顯示出相關(guān)的product。除了名字外，左邊的Repeater還會(huì)顯示與該category相關(guān)聯(lián)的product總數(shù)。（見圖1）圖 1: Category的 Name 和 Product總數(shù)顯示在左邊第一步: 在頁(yè)面左部顯示一個(gè)Repeater本章我們將在左邊顯示category，右表顯示它關(guān)聯(lián)的product。web頁(yè)的內(nèi)容可以使用標(biāo)準(zhǔn)HTML元素或者CSS來定位。到目前為止我們都是使用CSS來定位。在母板頁(yè)和站點(diǎn)導(dǎo)航 一章里我們使用絕對(duì)定位

3、來創(chuàng)建導(dǎo)航時(shí)，為導(dǎo)航列表和內(nèi)容之間指定了明確的距離。當(dāng)然CSS也可以用來對(duì)兩個(gè)元素的位置進(jìn)行調(diào)整。打開DataListRepeaterFiltering文件夾下的CategoriesAndProducts.aspx頁(yè)，添加一個(gè)Repeater和DataList.ID分別設(shè)置為Categories和CategoryProducts。然后到源視圖里將它們分別放到元素里。也就是說在Repeater后面加一個(gè)閉合的，在DataList前加一個(gè)開始的。現(xiàn)在你的代碼看起來應(yīng)該和下面差不多：?12345678我們需要使用float屬性來將Repeater放到DataList左邊，見下面代碼：?123456R

4、epeaterDataListfloat:left 將第一個(gè)放到第二個(gè)的左邊。width和padding-right指定了第一個(gè)的寬和內(nèi)容和右邊框的距離。更多的floating元素信息請(qǐng)參考Floatutorial.我們?cè)赟tyles.css里創(chuàng)建一個(gè)新的CSS類，名為Floatleft（而不是直接在的樣式里設(shè)置）：?123456.FloatLeftfloat: left;width: 33%;padding-right: 10px;然后我們用將替換掉。完成以上所講的內(nèi)容后，切換到設(shè)計(jì)視圖。你應(yīng)該看到Repeater已經(jīng)在DataList左邊了（由于還沒有配置數(shù)據(jù)源或模板，這兩個(gè)控件都是灰的）

5、。圖 2: 調(diào)整完位置后的頁(yè)面第二步: 獲取每個(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è)信息. 根據(jù)給定的categoryID我們可以通過ProductsBLL類的GetProductsByCategoryID(categoryID)方法來獲取關(guān)聯(lián)的product總數(shù)。這個(gè)方法返回一個(gè)ProductsDataTable對(duì)象，它的Count屬性表示了我們

6、需要知道的信息。我們可以為Repeater創(chuàng)建一個(gè)ItemDataBound event handler，在每個(gè)category綁定到Repeater時(shí)調(diào)用這個(gè)方法然后將總數(shù)輸出。在DataSet里更新CategoriesDataTable 添加一個(gè)NumberOfProducts列. 我們可以更新CategoriesDataTable的GetCategories()方法來包含這個(gè)信息或者保留這個(gè)方法，再創(chuàng)建一個(gè)新的名為GetCategoriesAndNumberOfProducts()方法。我們來看看這兩種方法。第一種寫起來更簡(jiǎn)單，因?yàn)槲覀儾恍枰翫AL。但是它需要和數(shù)據(jù)庫(kù)更多的連接。在I

7、temDataBound event handler里調(diào)用GetProductsByCategoryID(categoryID)方法又增加了一次數(shù)據(jù)庫(kù)連接（這在每個(gè)category綁定時(shí)會(huì)發(fā)生一次）。這時(shí)一共會(huì)有N+1次對(duì)數(shù)據(jù)庫(kù)的請(qǐng)求（N為Repeater里顯示的category的總數(shù)）。而第二種方法product總數(shù)從GetCategories()(或GetCategoriesAndNumberOfProducts()方法返回，這樣只請(qǐng)求一次數(shù)據(jù)庫(kù)就可以了。在ItemDataBound Event Handler里獲取Products總數(shù)在ItemDataBound event handle

8、r里獲取product總數(shù)不需要修改DAL。只需要直接修改CategoriesAndProducts.aspx頁(yè)。通過Repeater的智能標(biāo)簽添加一個(gè)新的名為CategoriesDataSource的ObjectDataSource。使用CategoriesBLL類的GetCategories()方法配置它。圖 3: 配置 ObjectDataSourceRepeater里的每個(gè)Category都是可點(diǎn)的，而且在點(diǎn)了之后，CategoryProducts DataList會(huì)顯示那些相關(guān)的product。我們可以將每個(gè)category設(shè)為hyperlink，鏈到本頁(yè)(CategoriesAnd

9、Products.aspx)，通過querystring為CategoryID賦值。這種方法的好處是，特定category的product可以通為搜索建立索引和書簽。我們也可以將每個(gè)category設(shè)為L(zhǎng)inkButton，在本章我們使用這個(gè)方法。LinkButton看起來象一個(gè)hyperlink，但是點(diǎn)擊后會(huì)產(chǎn)生一個(gè)postback。DataList的ObjectDataSource會(huì)刷新以顯示選中category相關(guān)聯(lián)的product。在本章使用hyperlink更合理。然而在別的情況下可以使用LinkButton會(huì)好一點(diǎn)。雖然是這樣，我們?cè)谶@里也使用LinkButton。我們將會(huì)看到，使

10、用LinkButton會(huì)有一些使用hyperlink時(shí)碰不到的挑戰(zhàn)。因此我們可以學(xué)習(xí)更好學(xué)習(xí)它，以便以后使用。注意：如果你使用HyperLink或來代替LinkButton來重復(fù)練習(xí)一次本章的內(nèi)容，是最好不過了。下面的標(biāo)記語(yǔ)言是Repeater和ObjectDataSource的，注意Repeater的template將每個(gè)item表示為L(zhǎng)inkButton。?123456789101112131415注意：在本章Repeater的view state必須開啟（Repeater的聲明語(yǔ)法里的EnableViewState=False）。在第三步我們將為ItemCommand事件創(chuàng)建一個(gè)even

11、t handler，在它里面我們要更新DataList的ObjectDataSource的SeleceParameters集合。如果view state 被禁用的話Repeater的ItemCommand不會(huì)被激發(fā)。想了解具體的原因和更多的信息請(qǐng)參考 A Stumper of an ASP.NET Question 和its solution 。ID為ViewCategory的LinkButton還沒有設(shè)置Text屬性。如果我們只需要顯示category名字，我們可以通過綁定語(yǔ)法象下面這樣來直接設(shè)置：?12asp:LinkButton runat=server ID=ViewCategoryT

12、ext= /然而在這里我們需要顯示的是category的name和proudct的總數(shù)。見下面的代碼：?123456789101112131415161718192021protected void Categories_ItemDataBound(object sender, RepeaterItemEventArgs e)/ Make sure were working with a data item.if (e.Item.ItemType = ListItemType.Item |e.Item.ItemType = ListItemType.AlternatingItem)/ Refe

13、rence the CategoriesRow instance bound to this RepeaterItemNorthwind.CategoriesRow category =(Northwind.CategoriesRow) (System.Data.DataRowView) e.Item.DataItem).Row;/ Determine how many products are in this categoryNorthwindTableAdapters.ProductsTableAdapter productsAPI =new NorthwindTableAdapters.

14、ProductsTableAdapter();int productCount =productsAPI.GetProductsByCategoryID(category.CategoryID).Count;/ Reference the ViewCategory LinkButton and set its Text propertyLinkButton ViewCategory = (LinkButton)e.Item.FindControl(ViewCategory);ViewCategory.Text =string.Format(0 (1:N0), category.Category

15、Name, productCount);我們首先要確保我們處理的是data item(ItemType為Item或AlternatingItem)然后引用剛剛綁定到當(dāng)前RepeaterItem的CategoriesRow。然后調(diào)用GetCategoriesByProductID(categoryID)方法，通過Count屬性獲取返回的記錄條數(shù)。最后將ItemTemplate里的ViewCategory LinkButton的Text屬性設(shè)為CategoryName(NumberOfProductsInCategory)。注意：我們也可以在ASP.NET頁(yè)的code-behind里寫一個(gè)格式化功

16、能，接收CategoryName和CategoryID的值，返回CategoryName和product總數(shù)的連接字符串。然后將結(jié)果直接賦給LinkButton的Text屬性，而不需要處理itemDataBound事件。更多的格式化功能信息參考在GridView控件中使用TemplateField 和格式化DataList和Repeater的數(shù)據(jù)。添加完event handler后，在瀏覽器里看看頁(yè)面。見圖4。圖 4: 顯示每個(gè) Category的 Name 和 Products總數(shù)更新CategoriesDataTable和CategoriesTableAdpter來包含每個(gè)Category

17、的Product總數(shù)除了在每個(gè)category綁定到Repeater時(shí)獲取product總數(shù)外,我們還可以修改DAL里CategoriesDataTable和CategoriesTableAdapter來包含這個(gè)信息.我們?cè)贑ategoriesDataTable里加一列.打開App_Code/DAL/Northwind.xsd,右鍵點(diǎn)DataTable,選擇Add/Column.見圖5.圖 5: 為CategoriesaDataSource增加一個(gè)新列這樣會(huì)添加一個(gè)名為Column1的列,你可以很方便的修改它的名字.將它重命名為NumberOfProducts.然后我們需要配置這列的屬性.點(diǎn)這

18、個(gè)列,來到屬性窗口.將DataType從System.String修改為System.Int32.將ReadOnly屬性設(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.會(huì)出現(xiàn)TableAdap

19、ter Query配置向?qū)?選擇SQL statement.圖 7: 選擇SQL Statement圖 8: SQL Statement 返回行數(shù)下一步需要我們寫sql語(yǔ)句.下面的語(yǔ)句返回每個(gè)category的CategoryID,CategoryName,Description和相關(guān)product的總數(shù):?1234SELECT CategoryID, CategoryName, Description,(SELECT COUNT(*) FROM Products p WHERE p.CategoryID = c.CategoryID)as NumberOfProductsFROM Categ

20、ories c圖 9: 使用的sql語(yǔ)句注意計(jì)算product總數(shù)的子查詢的別名為NumberOfProducts.它和CategoriesDataTable的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)的G

21、etCategoriesAndNumberOfProducts方法.?123456System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Select, false)public Northwind.CategoriesDataTable GetCategoriesAndNumberOfProducts()return Adapter.GetCategoriesAndNumberOfProducts();完成DAL和BLL后,我們來將數(shù)據(jù)綁定到Categories Re

22、peater.如果在在ItemDataBound Event Handler里獲取Products總數(shù)那部分里你已經(jīng)為Repeater創(chuàng)建了ObjectDataSource,刪掉它,然后去掉Repeater的DataSourceID屬性,同樣去掉ItemDataBound事件.Repeater現(xiàn)在回到了初始狀態(tài),添加一個(gè)名為CategoriesDataSource的ObjectDataSource.使用CategoriesBLL類的GetCategoriesAndNumberOfProducts()方法來配置它.見圖11.圖 11: 配置ObjectDataSource然后修改ItemTemp

23、late，使用數(shù)據(jù)綁定語(yǔ)法來將CategoryName和NumberOfProducts字段綁定到LinkButton的Text屬性.完整的標(biāo)記語(yǔ)言如下：?123456789101112131415161718asp:LinkButton runat=server ID=ViewCategoryText= /使用這種方法的頁(yè)面看起來和前面一種方法一樣（見圖）第三步: 顯示選中的Category關(guān)聯(lián)的Products現(xiàn)在category和product總數(shù)的部分已經(jīng)完成Repeater將每個(gè)category顯示為L(zhǎng)inkButton，當(dāng)點(diǎn)擊時(shí)產(chǎn)生postback，這時(shí)我們需要將那些關(guān)聯(lián)的prod

24、uct在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í)將從信息在本頁(yè)的DetailsView里顯示出來.GridView的ObjectDataSource用ProductsBLL的GetProducts()返回product信息.而DetailsView的ObjectDataSource用GetProductsByProductID(productID)返回選中的

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

26、類的GetProductsByCategoryID(cateogryID)配置它.由于此DataList只提供只讀功能,因此在INSERT,UPDATE,DELETE標(biāo)簽里選擇None.圖 12: 配置 ObjectDataSource由于GetProductsByCategoryID(categoryID)方法需要一個(gè)輸入?yún)?shù),向?qū)?huì)要求我們指定參數(shù)源.我們使用GridView或DataList列出categories時(shí),可以將參數(shù)源設(shè)為Control,ControlID設(shè)為數(shù)據(jù)控件的ID.然而由于Repeater沒有SelectedValue屬性,所以不能用作參數(shù)源.你可以查看Contro

27、lID下拉列表,它里面只包含一個(gè)控件IDCategoryProducts(DataList).圖 13: 配置參數(shù)配置完數(shù)據(jù)源后,Visual Studio為DataList自動(dòng)產(chǎn)生ItemTemplate.用我們前面使用的template替換默認(rèn)的ItemTemplate.將DataList的RepeatColumns屬性設(shè)為2.完成這些后,你的代碼應(yīng)該和下面的差不多:?123456789101112131415161718Supplied by 目前為止CategoryProductsDataSource ObjectDataSource的categoryID參數(shù)還沒有設(shè)置.所以瀏覽頁(yè)面時(shí)

28、沒有任何的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里.這樣的話,就需要使用LinkButton的CommandName 和CommandArgument .當(dāng)LinkButton被

29、點(diǎn)時(shí),Command事件激發(fā),event handler會(huì)接受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里的ItemTemplate的LinkButton的CommandName屬性(我使用的ListProducts).設(shè)

30、置了值后LinkButton被點(diǎn)后Command事件會(huì)激發(fā).設(shè)置LinkButton的CommandArgument屬性為當(dāng)前item的CategoryID.為Repeater的ItemCommand事件創(chuàng)建一個(gè)event handler.在它里面將傳入的CommandArgument值賦給CategoryProductsDataSource ObjectDataSource的CategoryID參數(shù).下面是完成了1,2步后的標(biāo)記.注意CategoryID是如何通過綁定語(yǔ)法來賦給CommandArgument的.?123456789asp:LinkButton CommandName=List

31、Products runat=serverCommandArgument= ID=ViewCategoryText=由于任何一個(gè)Button,LinkButton或ImageButton的Command事件都會(huì)激發(fā)ItemCommand事件,所以無論在任何時(shí)候創(chuàng)建ItemCommand event handler首先都要小心謹(jǐn)慎的檢查CommandName的值.而由于我們現(xiàn)在只有一個(gè)LinkButton,以后我們可能會(huì)向Repeater添加新的button控件,當(dāng)點(diǎn)被點(diǎn)擊時(shí),激發(fā)同樣的ItemCommand event handler.因此最好確保檢查了CommandName,然后根據(jù)它的值來進(jìn)行邏輯處理.在確保了傳入的CommandName的值等于ListProducts后,event handler將CategoryProductsDataSource ObjectDataSource的CategoryID的參數(shù)設(shè)為傳入的Comm