ASP.NET 2.0打造購物車和支付系統之一

asp.net|購物車

到目前為止，我幾乎在每一個我參加過的商業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＞，
，＜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控制項的資料來源，並與你共同建立實際的購物籃。