導(dǎo)言

　　除了需要了解產(chǎn)品的單價(jià)、庫(kù)存量和訂貨量，并按等級(jí)排序之外，用戶可能還對(duì)統(tǒng)計(jì)信息感興趣，比如說平均價(jià)格、庫(kù)存總量等等。這些統(tǒng)計(jì)信息常常顯示在報(bào)表最下面的一個(gè)統(tǒng)計(jì)行中。GridView控件可以含有一個(gè)頁(yè)腳行，我們可以通過編程將統(tǒng)計(jì)數(shù)據(jù)插入到它的單元格里面去。這個(gè)任務(wù)給了我們以下3個(gè)挑戰(zhàn)：

1.配置GridView以顯示它的頁(yè)腳行

2.確定統(tǒng)計(jì)數(shù)據(jù)。即我們應(yīng)該如何計(jì)算平均價(jià)格還有庫(kù)存總量？

3.將統(tǒng)計(jì)信息插入到頁(yè)腳行的相應(yīng)的單元格中

　　在本節(jié)教程中，我們將會(huì)看到如何去征服這些挑戰(zhàn)。另外呢，我們將創(chuàng)建一個(gè)頁(yè)面，它含有一個(gè)列出所有“類別”的下拉框，選擇一個(gè)“類別”就可以在GridView中顯示這個(gè)類別的產(chǎn)品。GridView中包含一個(gè)頁(yè)腳行，用于顯示此類產(chǎn)品的平均價(jià)格、庫(kù)存總量和訂貨總量。

圖一：統(tǒng)計(jì)信息顯示在GridView的頁(yè)腳行中

　　由于含有“類別”到“產(chǎn)品”的主/從界面，所有本節(jié)是建立在前面的“使用DropDownList進(jìn)行主/從過濾”節(jié)中所討論的那些概念的基礎(chǔ)上的。如果你還沒有看過那一節(jié)的話，在繼續(xù)本節(jié)的學(xué)習(xí)之前，還是去看看比較好。

第一節(jié)：添加“類別”下拉框和“產(chǎn)品”GridView

　　往GridView中添加頁(yè)腳行之前，讓我們先來(lái)簡(jiǎn)單的建立一個(gè)主/從報(bào)表。一旦我們完成了這第一步的工作，我們就可以來(lái)看看如何加入統(tǒng)計(jì)數(shù)據(jù)了。

　　首先打開CustomFormatting文件夾中的SummaryDataInFooter.aspx頁(yè)面。添加一個(gè)DropDownList控件，并將其ID設(shè)置為Categories。然后，在這個(gè)DropDownList的智能標(biāo)簽上點(diǎn)擊“選擇數(shù)據(jù)源（Choose Data Source）”，添加一個(gè)新的調(diào)用CategoriesBLL類的GetCategories ()方法的ObjectDataSource控件，將這個(gè)ObjectDataSource命名為CategoriesDataSource。

圖二：添加一個(gè)新的名為CategoriesDataSource的ObjectDataSource控件

圖三：使這個(gè)ObjectDataSource控件調(diào)用CategoriesBLL類的GetCategories ()方法

　　再配置了了ObjectDataSource之后，向?qū)?huì)將我們返回到DropDownList的數(shù)據(jù)源配置向?qū)抢?，在這兒我們可以指定哪個(gè)字段需要顯示以及哪個(gè)字段應(yīng)該作為DropDownList的ListItem的值。我們將CategoryName字段拿來(lái)顯示，而把CategoryID拿來(lái)作為值。

圖四：分別使用CategoryName和CategoryID來(lái)作為L(zhǎng)istItem的文本和值

　　現(xiàn)在，我們便在系統(tǒng)中有了一個(gè)能列出類別的DropDownList了?，F(xiàn)在我們需要添加一個(gè)根據(jù)所選的類別來(lái)列出產(chǎn)品的GridView。不過，在此之前，讓我們先花點(diǎn)時(shí)間到DropDownList的智能標(biāo)簽中勾上“啟用自動(dòng)回發(fā)（Enable AutoPostBack）”復(fù)選框。我們?cè)谇懊娴摹笆褂肈ropDownList進(jìn)行主/從過濾 lidong6”節(jié)中討論過，在將DropDownList的AutoPostBack屬性設(shè)置為true之后，只要DropDownList的值發(fā)生了變化，頁(yè)面就會(huì)回發(fā)。這樣就可以刷新GridView以顯示新選擇的類別的產(chǎn)品了。如果AutoPostBack屬性設(shè)置為false（默認(rèn)值），改變類別將不會(huì)導(dǎo)致回發(fā)，因此也就不能刷新產(chǎn)品列表了。

圖五：在DropDownList的智能標(biāo)簽中勾上“啟用自動(dòng)回發(fā)”復(fù)選框

　　添加一個(gè)GridView控件到頁(yè)面上以便可以根據(jù)選定的類別來(lái)顯示產(chǎn)品。將這個(gè)GridView的ID設(shè)置為ProductsInCategory，并將其綁定到一個(gè)新的名為ProductsInCategoryDataSource的ObjectDataSource上。

圖六：添加一個(gè)新的名為ProductsInCategoryDataSource的ObjectDataSource

配置這個(gè)ObjectDataSource，以使其調(diào)用ProductsBLL類的GetProductsByCategoryID(categoryID)方法。

圖七：使這個(gè)ObjectDataSource調(diào)用GetProductsByCategoryID(categoryID)方法

　　由于GetProductsByCategoryID(categoryID)方法需要一個(gè)參數(shù)，所以在向?qū)У淖詈笠徊嚼铮覀兛梢灾付▍?shù)值的數(shù)據(jù)源。為了根據(jù)顯示所選的類別來(lái)顯示產(chǎn)品，這個(gè)參數(shù)應(yīng)該從Categories下拉框中獲取。

圖八：從Catefories下拉框中獲取categoryID參數(shù)

　　完成了向?qū)е?，這個(gè)GridView將會(huì)包含一些對(duì)應(yīng)于產(chǎn)品的每一個(gè)屬性的BoundField。讓我們來(lái)清理一下這些BoundField，剩下要顯示的ProductName、UnitPrice、UnitsInStock以及UnitsOnOrder就可以了。然后你可以隨便的給剩下的這些BoundField添加一些字段級(jí)的設(shè)置（比如說將UnitPrice格式化為貨幣形式）。做了這些更改之后，這個(gè)GridView的聲明標(biāo)記應(yīng)該是這個(gè)樣子：

<asp:GridView ID="ProductsInCategory" runat="server"
  AutoGenerateColumns="False" DataKeyNames="ProductID"
  DataSourceID="ProductsInCategoryDataSource" EnableViewState="False">
  <Columns>
    <asp:BoundField DataField="ProductName" HeaderText="Product"
     SortExpression="ProductName" />
    <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
      HeaderText="Price"
      HtmlEncode="False" SortExpression="UnitPrice">
      <ItemStyle HorizontalAlign="Right" />
    </asp:BoundField>
    <asp:BoundField DataField="UnitsInStock"
     HeaderText="Units In Stock" SortExpression="UnitsInStock">
      <ItemStyle HorizontalAlign="Right" />
    </asp:BoundField>
    <asp:BoundField DataField="UnitsOnOrder"
      HeaderText="Units On Order" SortExpression="UnitsOnOrder">
      <ItemStyle HorizontalAlign="Right" />
    </asp:BoundField>
  </Columns>
</asp:GridView>

現(xiàn)在，我們就擁有了一個(gè)可以根據(jù)所選類別來(lái)顯示相關(guān)的產(chǎn)品的名稱、單價(jià)、庫(kù)存量以及訂貨量的功能齊全的主/從報(bào)表了。

圖九：現(xiàn)在的效果（譯者注：估計(jì)原文這里弄錯(cuò)了，寫得跟圖八的一樣。這里的原文是“Figure 9: Get the categoryID Parameter Value from the Selected Categories DropDownList”，圖八的原文是“Figure 8: Get the categoryID Parameter Value from the Selected Categories DropDownList”）

第二步：在GridView中顯示頁(yè)腳

　　GridView控件可以顯示頁(yè)眉和頁(yè)腳行。這些行的顯示與否分別取決于ShowHeader和ShowFooter屬性，默認(rèn)情況下，ShowHeader的值為true，而ShowFooter的值為false。要顯示頁(yè)腳行的話，我們只需簡(jiǎn)單的將ShowFooter屬性設(shè)置為true就可以了。

圖十：將GridView的ShowFooter屬性設(shè)置為true

　　GridView中所定義的每一個(gè)字段都在頁(yè)腳行中有一個(gè)對(duì)應(yīng)的單元格，不過這些單元格默認(rèn)是空的?；c(diǎn)時(shí)間到瀏覽器中看看我們的成果。由于我們將GridView的ShowFooter屬性設(shè)置為true了，所以GridView現(xiàn)在包含了一個(gè)空的頁(yè)腳行。

圖十一：現(xiàn)在，GridView有了一個(gè)頁(yè)腳行

　　圖十一中的頁(yè)腳行并不明顯，因?yàn)樗谋尘笆前咨?。讓我們?cè)赟tyles.css中創(chuàng)建一個(gè)名為FooterStyle的CSS類，用它來(lái)指定一個(gè)深紅色的背景，并在DataWebControls主題中配置GridView.skin這個(gè)皮膚文件（Skin file）以將此CSS類分配給此GridView的FooterStyle的CssClass屬性。如果你需要復(fù)習(xí)一下皮膚和主題的相關(guān)內(nèi)容，請(qǐng)參考“使用ObjectDataSource顯示數(shù)據(jù)”。

先給Styles.css添加以下的CSS類：

.FooterStyle
{
  background-color: #a33;
  color: White;
  text-align: right;
}

　　FooterStyle這個(gè)CSS類跟HeaderStyle類是一樣的，只是HeaderStyle的背景色要深一點(diǎn)且文本是粗體顯示的而已。此外，頁(yè)腳的文本是右對(duì)齊的，而頁(yè)眉的文本是居中的。然后，為了將這個(gè)CSS類關(guān)聯(lián)到每一個(gè)GridView的頁(yè)腳上，在DataWebControls主題中打開GridView.skin文件并設(shè)置FooterStyle的CssClass屬性。作了這個(gè)添加之后，文件的標(biāo)記代碼應(yīng)該是這個(gè)樣子：

<asp:GridView runat="server" CssClass="DataWebControlStyle">
  <AlternatingRowStyle CssClass="AlternatingRowStyle" />
  <RowStyle CssClass="RowStyle" />
  <HeaderStyle CssClass="HeaderStyle" />
  <FooterStyle CssClass="FooterStyle" />
  <SelectedRowStyle CssClass="SelectedRowStyle" />
</asp:GridView>

就像下面這個(gè)屏幕截圖所顯示的那樣，這個(gè)更改使頁(yè)腳清晰的顯示出來(lái)了。

圖十二：GridView的頁(yè)腳現(xiàn)在有了一個(gè)紅紅的背景色

第三步：計(jì)算統(tǒng)計(jì)數(shù)據(jù)

在顯示了GridView的頁(yè)腳之后，下一個(gè)面對(duì)我們的挑戰(zhàn)就是如何計(jì)算統(tǒng)計(jì)數(shù)據(jù)。有兩個(gè)計(jì)算統(tǒng)計(jì)信息的途徑：

1.通過一個(gè)SQL查詢——我們可以向數(shù)據(jù)庫(kù)發(fā)出一個(gè)額外的查詢來(lái)為某個(gè)特定的類別計(jì)算統(tǒng)計(jì)信息。SQL包含一系列的聚合函數(shù)，并由GROUP BY子句指定應(yīng)該根據(jù)什么數(shù)據(jù)來(lái)進(jìn)行統(tǒng)計(jì)。下面的SQL查詢將會(huì)返回我們所需要的信息：

SELECT CategoryID, AVG(UnitPrice), SUM(UnitsInStock), SUM(UnitsOnOrder)
FROM Products
WHERE CategoryID = categoryID
GROUP BY CategoryID

當(dāng)然，你也可能不喜歡直接在SummaryDataInFooter.aspx頁(yè)面中直接執(zhí)行這個(gè)查詢，而是希望在ProductsTableAdapter 和ProductsBLL 中創(chuàng)建一個(gè)方法來(lái)干這個(gè)事情。

2.由于這些信息已經(jīng)添加到GridView中了，所以可以直接計(jì)算——就像在“基于數(shù)據(jù)的自定義格式化”中討論的那樣，在GridView的數(shù)據(jù)綁定之后，GridView的RowDataBound事件處理方法會(huì)在添加每一行數(shù)據(jù)時(shí)被執(zhí)行一次。為這個(gè)事件創(chuàng)建了事件處理方法之后，我們就可以保持一個(gè)累積的合計(jì)值了。在最后一行數(shù)據(jù)被綁定到DataGrid上之后，我們就有了一個(gè)合計(jì)值以及需要計(jì)算平均值的信息了。

　　一般來(lái)說，我還是喜歡第二種方法的，因?yàn)樗?jié)省了一次到數(shù)據(jù)庫(kù)的往返，而且要達(dá)到這個(gè)效果還需要在數(shù)據(jù)訪問層和業(yè)務(wù)邏輯層中實(shí)現(xiàn)統(tǒng)計(jì)功能，不過話說回來(lái)了，其實(shí)兩種辦法都行的。在這本教程中，我們還是使用第二個(gè)辦法吧，并使用RowDataBound事件處理方法來(lái)記錄這個(gè)累積合計(jì)。

　　給GridView新建一個(gè)RowDataBound事件處理方法，你可以在設(shè)計(jì)器中選擇GridView，然后在屬性窗口中點(diǎn)擊那個(gè)帶閃電符號(hào)的圖標(biāo)，找到RowDataBound事件并雙擊它就可以了。這樣就會(huì)在SummaryDataInFooter.aspx頁(yè)面的后置代碼類中添加一個(gè)新的名為ProductsInCategory_RowDataBound的事件處理方法了。

protected void ProductsInCategory_RowDataBound
  (object sender, GridViewRowEventArgs e)
{
}

為了可以維護(hù)一個(gè)累積合計(jì)，我們需要在這個(gè)事件處理方法的外面定義一些變量。創(chuàng)建以下4個(gè)頁(yè)面級(jí)的變量：

·_totalUnitPrice，類型為decimal

·_totalNonNullUnitPriceCount，類型為int

·_totalUnitsInStock，類型為int

·_totalUnitsOnOrder，類型為int

然后，在RowDataBound事件處理方法中寫一些代碼，使每一個(gè)數(shù)據(jù)行都可以增加這些變量的值。

// Class-scope, running total variables...
decimal _totalUnitPrice = 0m;
int _totalNonNullUnitPriceCount = 0;
int _totalUnitsInStock = 0;
int _totalUnitsOnOrder = 0;
protected void ProductsInCategory_RowDataBound(object sender,
 GridViewRowEventArgs e)
{
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
    // Reference the ProductsRow via the e.Row.DataItem property
    Northwind.ProductsRow product =
     (Northwind.ProductsRow)
     ((System.Data.DataRowView)e.Row.DataItem).Row;
    // Increment the running totals (if they are not NULL!)
    if (!product.IsUnitPriceNull())
    {
      _totalUnitPrice += product.UnitPrice;
      _totalNonNullUnitPriceCount++;
    }
    if (!product.IsUnitsInStockNull())
      _totalUnitsInStock += product.UnitsInStock;
    if (!product.IsUnitsOnOrderNull())
      _totalUnitsOnOrder += product.UnitsOnOrder;
  }
} 

　　在RowDataBound事件處理方法中，我們首先應(yīng)該確保我們正在操作一個(gè)DataRow。一旦確定了是這么回事，e.Row中那個(gè)剛剛綁定到GridViewRow對(duì)象的Northwind.ProductsRow實(shí)例就可以賦值給product變量了。接著，累積合計(jì)就被當(dāng)前產(chǎn)品的相關(guān)值（當(dāng)然了，我們還是應(yīng)該要確保它們不會(huì)含有一個(gè)數(shù)據(jù)庫(kù)NULL值）增加了。我們同時(shí)記錄了累積的UnitPrice合計(jì)以及非空UnitPrice記錄的條數(shù)，因?yàn)槠骄鶅r(jià)格是這兩個(gè)數(shù)的商。

第四步：在頁(yè)腳中顯示統(tǒng)計(jì)數(shù)據(jù)

　　計(jì)算了統(tǒng)計(jì)數(shù)據(jù)之后，最后一個(gè)步驟就是在GridView的頁(yè)腳上顯示它了。同樣，這個(gè)任務(wù)也可以通過RowDataBound事件處理方法來(lái)完成?；貞浺幌翿owDataBound事件處理方法，它會(huì)在每一行綁定到GridView的時(shí)候被觸發(fā)，頁(yè)腳行也不例外。因此，我們可以擴(kuò)展我們的事件處理方法，讓它可以通過如下的代碼來(lái)在頁(yè)腳行中顯示數(shù)據(jù)：

protected void ProductsInCategory_RowDataBound
  (object sender, GridViewRowEventArgs e)
{
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
   ... Increment the running totals ...
  }
  else if (e.Row.RowType == DataControlRowType.Footer)
  {
   ... Display the summary data in the footer ...
  }
}

　　因?yàn)轫?yè)腳行是在所有的數(shù)據(jù)行都已經(jīng)添加之后才添加到GridView中的，所以我們可以相信在將統(tǒng)計(jì)數(shù)據(jù)顯示在頁(yè)腳中之前，累積合計(jì)值都已經(jīng)計(jì)算完畢了。最后一步就是將這些值放到頁(yè)腳的單元格中了。

　　要在頁(yè)腳的特定單元格中顯示文本，可以使用use e.Row.Cells[index].Text = value，單元格的索引是從0開始的。下面的代碼計(jì)算了平均價(jià)格（總的價(jià)格除以產(chǎn)品的數(shù)量）并將其與庫(kù)存量和訂貨量一起顯示到GridView頁(yè)腳的相應(yīng)單元格中。

protected void ProductsInCategory_RowDataBound
  (object sender, GridViewRowEventArgs e)
{
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
   ... <i>Increment the running totals</i> ...
  }
  else if (e.Row.RowType == DataControlRowType.Footer)
  {
   // Determine the average UnitPrice
   decimal avgUnitPrice = _totalUnitPrice / (decimal) _totalNonNullUnitPriceCount;
   // Display the summary data in the appropriate cells
   e.Row.Cells[1].Text = "Avg.: " + avgUnitPrice.ToString("c");
   e.Row.Cells[2].Text = "Total: " + _totalUnitsInStock.ToString();
   e.Row.Cells[3].Text = "Total: " + _totalUnitsOnOrder.ToString();
  }
}

圖十三展示了添加了這段代碼之后這個(gè)報(bào)表的樣子。注意ToString("c")是如何讓平均價(jià)格這個(gè)統(tǒng)計(jì)信息格式化成貨幣形式的。

圖十三：現(xiàn)在的效果（譯者注：估計(jì)原文這里又弄錯(cuò)了，寫得跟圖十二的一樣。這里的原文是“Figure 13: The GridView's Footer Row Now Has a Reddish Background Color”，圖十二的一樣。這里的原文是“Figure 13: The GridView's Footer Row Now Has a Reddish B的原文是“Figure 12: The GridView's Footer Row Now Has a Reddish Background Color”）

總結(jié)

　　顯示統(tǒng)計(jì)信息是一個(gè)常見的報(bào)表需求，而GridView控件可以在頁(yè)腳行中包含這樣的信息，而且它將這個(gè)操作變得非常簡(jiǎn)單。當(dāng)GridView的ShowFooter屬性被設(shè)置為true時(shí)就可以顯示頁(yè)腳行了，并且通過RowDataBound事件處理方法可以將這些信息顯示在它的不同的單元格中?？梢酝ㄟ^重新查詢數(shù)據(jù)庫(kù)的數(shù)據(jù)，也可以在ASP.NET頁(yè)面的后置代碼類中通過編程的方式來(lái)計(jì)算這些統(tǒng)計(jì)數(shù)據(jù)。

　　本節(jié)教程結(jié)束了我們關(guān)于GridView、DetailsView以及FormView控件的自定義格式化的學(xué)習(xí)。接下來(lái)的教程中，我們會(huì)開始一個(gè)使用這些控件來(lái)進(jìn)行增刪改操作的探索。

編程愉快！

關(guā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)論