到目前為止，我幾乎在每一個我參加過的商業C#.net工程中使用了DataGrid控件；因此，當我第一次聽到有關于GridView是如何提高工作效率時，我飛快地試用了它。DataGrid和GridView都是ASP.NET 2.0中提供的新的控件類，它們允許你快速容易地顯示表格式數據；并且當在線觀看它們時，它們都能被轉換為客戶端HTML表格進行顯示。
一. 簡介
這是系列文章的第一篇。在本篇中，我們將通過一個簡單的網上商店示例程序來集中討論GridView控件的一些用法。注意，在每一篇文章中我們都使用相同的源文件。為了觀察本文示例演示效果，你只需要把下載內容解壓到你的web服務器上一個新的目錄并瀏覽到該目錄名即可。例如，如果你把所有的內容解壓到一個你的web服務器根目錄下的目錄"gridviewshop"，并導航到這個目錄：
http://www.yourserver.com/gridviewshop
如果一切順利，那么你應該會看到一個如下圖1所示的站點：
 圖1.本系列文章網上商店演示程序快照。 |
二. GridView
如果你已經使用DataGrid實現了你的系統，包括你自己的定制分頁與排序方案，那么，你真正不需要考慮更新到GridView；因為從終端效果來看，它們都生成相同的內容(都生成一個HTML表格)。然而，如果你剛開始開發一個新的系統，那么，我建議你使用GridView，特別是如果你想利用它內置的分頁與排序功能的話。
通過在設計時刻設置各種屬性，你可以控制GridView從外觀到功能等若干方面。在本系列文章后面，我們將會更為深入地探討這些方面，通過把一些CSS類指派給表格行和表格列頭；當然，還要添加一些事件處理器以便允許用戶與每一行數據進行交互。
填充GridView類似于填充一個DataGrid。你只需創建DataSource，然后使用如下代碼把它綁定到GridView即可：
| myGridView.DataSource = yourDataSource; myGridView.DataBind(); |
當然，借助于.NET 2.0，你還有另一種選擇，那就是創建一個SqlDataSource并把GridView直接綁定到其上。這是通過設置它的DataSourceID以匹配你指派給SqlDataSource的ID實現的，即是：
| ＜!--使用mySqlDataSource的ID創建SqlDataSource--＞ ＜asp:SqlDataSource id="mySqlDataSource" runat="server" DataSourceMode="DataReader" ConnectionString="＜%$ ConnectionStrings:MyNorthwind%＞" SelectCommand="SELECT LastName FROM Employees"＞ ＜/asp:SqlDataSource＞ ＜!--創建GridView并且指派它的DataSourceID以匹配上面的mySqlDataSource--＞ ＜asp:GridView id="myGridView" runat="server" autogeneratecolumns="true" DataSourceID="mySqlDataSource"/＞ |
作為個人，我并不太看重這種方法，盡管它是微軟推薦的建立你的GridView的方法。我比較喜歡更多地控制我的DataSource；因為，這樣以來我能夠手工過濾它的內容甚至更多，這也正是為什么我在這個商店演示程序中沒有使用這個方法的原因。
好，下面讓我們繼續討論構建本文中的商店演示程序。其大致情況是，在一個頁面上存在兩個GridViews；你在前面已經看到這個圖像。一個GridView用于顯示我們的商店的產品，而其它的內容對應于購物籃。你能夠容易地把這兩部分拆分到它們各自的頁面中，但是為了簡化起見，我們把這些內容放到了一起。
如果你打開Default.aspx（它包括在本文相應的zip源碼文件中），你能夠看到這個頁面是如何建立的。大多數HTML僅僅用于實現包裝之目的；需要注意的是，位于頁面頂部的聲明以及主＜form＞標簽和位于其內的＜GridView＞標簽。
三. 頁面聲明
| ＜%@ page inherits="shop.site" src="cs/site.aspx.cs" %＞ |
該頁面聲明簡單地告訴我們的頁面它屬于什么命名空間和類。在這個例子中，我們的命名空間是"shop"而我們的類是"site"。還存在一個稱為"src"的額外屬性定義，它指向包含該站點類的普通的.cs文本文件。
我通常在開發期間，把我的類放在外部.cs文件中，并把它們手工地編譯成.dll文件。當我使用Visual Studio時，在開發期間，我總是習慣使用預編譯的dll，因為稍后，只需要一個簡單的構建即可以生成它們。一旦我完成了相應的工作，我都會把該類構建成預編譯的dll；但是，在開發期間，我比較喜歡把較多的時間花費在編碼方面而不是編譯上。
四. 構建數據
| ＜asp:GridView id="gvBasket" AutoGenerateColumns="false" ShowHeader="True" ShowFooter="True" DataKeyNames="id" OnRowDataBound="gvBasket_RowDataBound" runat="server"＞ ＜Columns＞ ＜asp:ImageField DataImageurlField="thumb" alternatetext="Product Thumbnail" readonly="true" /＞ ＜asp:TemplateField HeaderText="Item"＞ ＜ItemTemplate＞ ＜h3＞＜asp:Literal id="litItemName" runat="server" /＞＜/h3＞ ＜/ItemTemplate＞ ＜FooterTemplate＞ ＜a href="delivery-costs.aspx" title="View the list of delivery charges"＞Delivery Charges＜/a＞ ＜br /＞＜hr /＞ ＜b＞Total＜/b＞ ＜/FooterTemplate＞ ＜/asp:TemplateField＞ ＜/Columns＞ ＜/asp:GridView＞ |
如果你仔細地觀察一下這兩個GridViews，你會注意到它們都把AutoGenerateColumns設置成false。如果沒有這一行，或如果它被設置為true，那么，當我們綁定DataSource時，我們的列就會被創建。通過關閉這個特征，我們能夠使用"Columns"子標簽來定義自己的列。使用這一特征，我們能夠創建許多不同類型的列。在這個演示程序中，我們使用了ImageField和TemplateField列類型。該ImageField列把一個圖像路徑作為它的值（通過DataImageUrlField屬性），然后在它自己的列內顯示該圖像（當生成到該頁面時）。
TemplateField是真正重要的列。它允許你定義一個HeaderTemplate，一個ItemTemplate和一個FooterTemplate。這三個標簽允許你把任何內容放到這些地方。其中，HeaderTemplate和FooterTemplate都引用該列的頁眉和頁腳，而ItemTemplate引用body內容。
如果你觀察一下購物籃GridView，你會看到我們已經使用ItemTemplate來顯示購物籃中每一項的名字，價格和數量；然后，我們在FooterTemplate內顯示運送費用及總價。上面的片斷僅顯示"name"列和它的頁腳；完整的實現，請參考default.aspx源文件。因為每一列的頁眉都是靜態文本，所以我們使用HeaderTemplate跳過，并代之使用了TemplateField的HeaderText屬性。為了觀察一個GridView的頁眉和頁腳，你必須把GridView的ShowHeader和ShowFooter屬性都設置為True。
使用ItemTemplate的另一個原因在于，你可以把其它HTML和.net標簽放于其中。在這個演示程序中，存在若干不同的類型標簽，包括＜input＞，＜br/＞，＜hr/＞，＜asp:Literal＞和＜a＞。把所有這些標簽放到一個ItemTemplate標簽內的唯一問題是，你必須多做一些工作來預填充它們，但是并不需要太多工作。第一步是設置GridView的RowDataBound事件。你可以指派一個函數給這個事件（在我們綁定DataSource后，在每次創建一行時，調用這個事件）。你可以在購物籃的GridView屬性中看到這一點：
OnRowDataBound="gvBasket_RowDataBound"
相比之下，產品GridView相應的對應功能更簡單些，但是它僅顯示如何填充ItemTemplate而不是Header或Footer模板。
五. 一個重要的函數
現在，讓我們看一下本示例程序中位于"cs"文件夾下的主要的類文件"site.aspx.cs"，并且定位到一個稱為gvBasket_RowDataBound的函數。下面是該函數的主要實現（當然，你可以參考下載源碼檢查該文件的其它部分）：
| protected void gvBasket_RowDataBound(object sender， GridViewRowEventArgs e) { switch( e.Row.RowType ) { case DataControlRowType.DataRow: //名稱/描述 ((Literal)e.Row.FindControl("litItemName")).Text = Convert.ToString(((DataRowView)e.Row.DataItem)["name"]); //數量 string quantity = Convert.ToString(((DataRowView)e.Row.DataItem)["quantity"]); ((HtmlInputText)e.Row.FindControl("itProductQuantity")).Value = quantity; //價格 ((Literal)e.Row.FindControl("litPrice")).Text = String.Format("{0:C2}"， Convert.ToDouble(((DataRowView)e.Row.DataItem)["price"]) * Convert.ToInt32(quantity)); break; case DataControlRowType.Footer: DataTable dtShop = getBasketDt(); double total = 0.00; for(int i = 0; i ＜ dtShop.Rows.Count; i++) { total += Convert.ToInt32(dtShop.Rows[i]["quantity"]) * Convert.ToDouble(dtShop.Rows[i]["price"]); } ((Literal)e.Row.FindControl("litTotalQuantity")).Text = Convert.ToString(dtShop.Compute("SUM(quantity)"， "")); ((Literal)e.Row.FindControl("litDeliveryPrice")).Text = String.Format("{0:C2}"， Convert.ToDouble(calcDeliveryCost(total))); ((Literal)e.Row.FindControl("litTotalPrice")).Text = String.Format("{0:C2}"， Convert.ToDouble(calcDeliveryCost(total)) + total); break; } } |
我們要做的第一件事是在RowType屬性上執行一個切換，這樣我們就能夠區別我們在填充一個Header，Footer還是Item模板；因為所有這三個都是單獨調用這同一個函數。對于產品和購物籃來說，我們都取得DataControlRowType.DataRow行類型，因為這是我們的ItemTemplate。
因為我們給HTML頁面中的所有控件都確定了唯一的ID，所以我們能夠使用行中的FindControl函數。這將返回一個"Object"，如果該行中的任何控件有一個相匹配的ID話。我們可以把它強制轉換成我們期望的對象類型，例如一個"Literal"或一個"HtmlInputText"域，然后經由它的TextorValue屬性把數據指派給它。在每次綁定一個行時，它都被經由GridViewRowEventArgs.Row屬性傳遞給該函數。使用這種技術，我們就能夠存取該行的DataItem，它包含來自于DataSource的所有的行數據。然后，由我們來決定我們想從中提取哪些數據以及如何使用它。
在購物籃中，我們從DataItem中提取了名稱，數量和價格三列數據，并且把它們指派給我們嵌入式在ItemTemplate中的相關控件。對于DataControlRowType.Footer，情況基本一致，除了我們從會話狀態提取DataSource的一個副本之外(getBasketDt();)，因為我們想使用所有行中的信息生成總值及運送費用，而不僅僅是傳遞到該函數中的單行數據。
六. 結論
我希望通過本文，你已經掌握了使用GridView控件的基本知識及其它一些技巧。我們分析了實現GridView控件的一種方法以及如何控制其內容的生成。在下一篇中，我們將探討GridView控件的數據來源，并與你共同建立實際的購物籃。