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

來源:互聯網
上載者:User
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控制項的資料來源,並與你共同建立實際的購物籃。




相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。