ASP.NET 2.0打造購(gòu)物車和支付系統(tǒng)之一

2024-07-10 13:06:05

字體：大中小

供稿：網(wǎng)友

到目前為止，我?guī)缀踉诿恳粋€(gè)我參加過的商業(yè)c#.net工程中使用了datagrid控件；因此，當(dāng)我第一次聽到有關(guān)于gridview是如何提高工作效率時(shí)，我飛快地試用了它。datagrid和gridview都是asp.net 2.0中提供的新的控件類，它們?cè)试S你快速容易地顯示表格式數(shù)據(jù)；并且當(dāng)在線觀看它們時(shí)，它們都能被轉(zhuǎn)換為客戶端html表格進(jìn)行顯示。

　　一. 簡(jiǎn)介

　　這是系列文章的第一篇。在本篇中，我們將通過一個(gè)簡(jiǎn)單的網(wǎng)上商店示例程序來集中討論gridview控件的一些用法。注意，在每一篇文章中我們都使用相同的源文件。為了觀察本文示例演示效果，你只需要把下載內(nèi)容解壓到你的web服務(wù)器上一個(gè)新的目錄并瀏覽到該目錄名即可。例如，如果你把所有的內(nèi)容解壓到一個(gè)你的web服務(wù)器根目錄下的目錄"gridviewshop"，并導(dǎo)航到這個(gè)目錄：
http://www.yourserver.com/gridviewshop

　　如果一切順利，那么你應(yīng)該會(huì)看到一個(gè)如下圖1所示的站點(diǎn)：

圖1.本系列文章網(wǎng)上商店演示程序快照。

　　二. gridview

　　如果你已經(jīng)使用datagrid實(shí)現(xiàn)了你的系統(tǒng)，包括你自己的定制分頁(yè)與排序方案，那么，你真正不需要考慮更新到gridview；因?yàn)閺慕K端效果來看，它們都生成相同的內(nèi)容(都生成一個(gè)html表格)。然而，如果你剛開始開發(fā)一個(gè)新的系統(tǒng)，那么，我建議你使用gridview，特別是如果你想利用它內(nèi)置的分頁(yè)與排序功能的話。

　　通過在設(shè)計(jì)時(shí)刻設(shè)置各種屬性，你可以控制gridview從外觀到功能等若干方面。在本系列文章后面，我們將會(huì)更為深入地探討這些方面，通過把一些css類指派給表格行和表格列頭；當(dāng)然，還要添加一些事件處理器以便允許用戶與每一行數(shù)據(jù)進(jìn)行交互。

　　填充gridview類似于填充一個(gè)datagrid。你只需創(chuàng)建datasource，然后使用如下代碼把它綁定到gridview即可：

mygridview.datasource = yourdatasource;
mygridview.databind();

　　當(dāng)然，借助于.net 2.0，你還有另一種選擇，那就是創(chuàng)建一個(gè)sqldatasource并把gridview直接綁定到其上。這是通過設(shè)置它的datasourceid以匹配你指派給sqldatasource的id實(shí)現(xiàn)的，即是：

＜!--使用mysqldatasource的id創(chuàng)建sqldatasource--＞
＜asp:sqldatasource
id="mysqldatasource"
runat="server"
datasourcemode="datareader"
connectionstring="＜%$ connectionstrings:mynorthwind%＞"
selectcommand="select lastname from employees"＞
＜/asp:sqldatasource＞
＜!--創(chuàng)建gridview并且指派它的datasourceid以匹配上面的mysqldatasource--＞
＜asp:gridview
id="mygridview"
runat="server"
autogeneratecolumns="true"
datasourceid="mysqldatasource"/＞

　　作為個(gè)人，我并不太看重這種方法，盡管它是微軟推薦的建立你的gridview的方法。我比較喜歡更多地控制我的datasource；因?yàn)椋@樣以來我能夠手工過濾它的內(nèi)容甚至更多，這也正是為什么我在這個(gè)商店演示程序中沒有使用這個(gè)方法的原因。

　　好，下面讓我們繼續(xù)討論構(gòu)建本文中的商店演示程序。其大致情況是，在一個(gè)頁(yè)面上存在兩個(gè)gridviews；你在前面已經(jīng)看到這個(gè)圖像。一個(gè)gridview用于顯示我們的商店的產(chǎn)品，而其它的內(nèi)容對(duì)應(yīng)于購(gòu)物籃。你能夠容易地把這兩部分拆分到它們各自的頁(yè)面中，但是為了簡(jiǎn)化起見，我們把這些內(nèi)容放到了一起。

　　如果你打開default.aspx（它包括在本文相應(yīng)的zip源碼文件中），你能夠看到這個(gè)頁(yè)面是如何建立的。大多數(shù)html僅僅用于實(shí)現(xiàn)包裝之目的；需要注意的是，位于頁(yè)面頂部的聲明以及主＜form＞標(biāo)簽和位于其內(nèi)的＜gridview＞標(biāo)簽。

　　三. 頁(yè)面聲明

＜%@ page inherits="shop.site" src="cs/site.aspx.cs" %＞

　　該頁(yè)面聲明簡(jiǎn)單地告訴我們的頁(yè)面它屬于什么命名空間和類。在這個(gè)例子中，我們的命名空間是"shop"而我們的類是"site"。還存在一個(gè)稱為"src"的額外屬性定義，它指向包含該站點(diǎn)類的普通的.cs文本文件。

　　我通常在開發(fā)期間，把我的類放在外部.cs文件中，并把它們手工地編譯成.dll文件。當(dāng)我使用visual studio時(shí)，在開發(fā)期間，我總是習(xí)慣使用預(yù)編譯的dll，因?yàn)樯院螅恍枰粋€(gè)簡(jiǎn)單的構(gòu)建即可以生成它們。一旦我完成了相應(yīng)的工作，我都會(huì)把該類構(gòu)建成預(yù)編譯的dll；但是，在開發(fā)期間，我比較喜歡把較多的時(shí)間花費(fèi)在編碼方面而不是編譯上。

四. 構(gòu)建數(shù)據(jù)

＜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＞

　　如果你仔細(xì)地觀察一下這兩個(gè)gridviews，你會(huì)注意到它們都把a(bǔ)utogeneratecolumns設(shè)置成false。如果沒有這一行，或如果它被設(shè)置為true，那么，當(dāng)我們綁定datasource時(shí)，我們的列就會(huì)被創(chuàng)建。通過關(guān)閉這個(gè)特征，我們能夠使用"columns"子標(biāo)簽來定義自己的列。使用這一特征，我們能夠創(chuàng)建許多不同類型的列。在這個(gè)演示程序中，我們使用了imagefield和templatefield列類型。該imagefield列把一個(gè)圖像路徑作為它的值（通過dataimageurlfield屬性），然后在它自己的列內(nèi)顯示該圖像（當(dāng)生成到該頁(yè)面時(shí)）。

　　templatefield是真正重要的列。它允許你定義一個(gè)headertemplate，一個(gè)itemtemplate和一個(gè)footertemplate。這三個(gè)標(biāo)簽允許你把任何內(nèi)容放到這些地方。其中，headertemplate和footertemplate都引用該列的頁(yè)眉和頁(yè)腳，而itemtemplate引用body內(nèi)容。

　　如果你觀察一下購(gòu)物籃gridview，你會(huì)看到我們已經(jīng)使用itemtemplate來顯示購(gòu)物籃中每一項(xiàng)的名字，價(jià)格和數(shù)量；然后，我們?cè)趂ootertemplate內(nèi)顯示運(yùn)送費(fèi)用及總價(jià)。上面的片斷僅顯示"name"列和它的頁(yè)腳；完整的實(shí)現(xiàn)，請(qǐng)參考default.aspx源文件。因?yàn)槊恳涣械捻?yè)眉都是靜態(tài)文本，所以我們使用headertemplate跳過，并代之使用了templatefield的headertext屬性。為了觀察一個(gè)gridview的頁(yè)眉和頁(yè)腳，你必須把gridview的showheader和showfooter屬性都設(shè)置為true。

　　使用itemtemplate的另一個(gè)原因在于，你可以把其它html和.net標(biāo)簽放于其中。在這個(gè)演示程序中，存在若干不同的類型標(biāo)簽，包括＜input＞，
，＜hr/＞，＜asp:literal＞和＜a＞。把所有這些標(biāo)簽放到一個(gè)itemtemplate標(biāo)簽內(nèi)的唯一問題是，你必須多做一些工作來預(yù)填充它們，但是并不需要太多工作。第一步是設(shè)置gridview的rowdatabound事件。你可以指派一個(gè)函數(shù)給這個(gè)事件（在我們綁定datasource后，在每次創(chuàng)建一行時(shí)，調(diào)用這個(gè)事件）。你可以在購(gòu)物籃的gridview屬性中看到這一點(diǎn)：
onrowdatabound="gvbasket_rowdatabound"

　　相比之下，產(chǎn)品gridview相應(yīng)的對(duì)應(yīng)功能更簡(jiǎn)單些，但是它僅顯示如何填充itemtemplate而不是header或footer模板。

　　五. 一個(gè)重要的函數(shù)

　　現(xiàn)在，讓我們看一下本示例程序中位于"cs"文件夾下的主要的類文件"site.aspx.cs"，并且定位到一個(gè)稱為gvbasket_rowdatabound的函數(shù)。下面是該函數(shù)的主要實(shí)現(xiàn)（當(dāng)然，你可以參考下載源碼檢查該文件的其它部分）：

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"]);
　　　//數(shù)量
　　　string quantity = convert.tostring(((datarowview)e.row.dataitem)["quantity"]);
((htmlinputtext)e.row.findcontrol("itproductquantity")).value = quantity;
　　　//價(jià)格
　　　((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屬性上執(zhí)行一個(gè)切換，這樣我們就能夠區(qū)別我們?cè)谔畛湟粋€(gè)header，footer還是item模板；因?yàn)樗羞@三個(gè)都是單獨(dú)調(diào)用這同一個(gè)函數(shù)。對(duì)于產(chǎn)品和購(gòu)物籃來說，我們都取得datacontrolrowtype.datarow行類型，因?yàn)檫@是我們的itemtemplate。

　　因?yàn)槲覀兘ohtml頁(yè)面中的所有控件都確定了唯一的id，所以我們能夠使用行中的findcontrol函數(shù)。這將返回一個(gè)"object"，如果該行中的任何控件有一個(gè)相匹配的id話。我們可以把它強(qiáng)制轉(zhuǎn)換成我們期望的對(duì)象類型，例如一個(gè)"literal"或一個(gè)"htmlinputtext"域，然后經(jīng)由它的textorvalue屬性把數(shù)據(jù)指派給它。在每次綁定一個(gè)行時(shí)，它都被經(jīng)由gridviewroweventargs.row屬性傳遞給該函數(shù)。使用這種技術(shù)，我們就能夠存取該行的dataitem，它包含來自于datasource的所有的行數(shù)據(jù)。然后，由我們來決定我們想從中提取哪些數(shù)據(jù)以及如何使用它。
在購(gòu)物籃中，我們從dataitem中提取了名稱，數(shù)量和價(jià)格三列數(shù)據(jù)，并且把它們指派給我們嵌入式在itemtemplate中的相關(guān)控件。對(duì)于datacontrolrowtype.footer，情況基本一致，除了我們從會(huì)話狀態(tài)提取datasource的一個(gè)副本之外(getbasketdt();)，因?yàn)槲覀兿胧褂盟行兄械男畔⑸煽傊导斑\(yùn)送費(fèi)用，而不僅僅是傳遞到該函數(shù)中的單行數(shù)據(jù)。

　　六. 結(jié)論

　　我希望通過本文，你已經(jīng)掌握了使用gridview控件的基本知識(shí)及其它一些技巧。我們分析了實(shí)現(xiàn)gridview控件的一種方法以及如何控制其內(nèi)容的生成。在下一篇中，我們將探討gridview控件的數(shù)據(jù)來源，并與你共同建立實(shí)際的購(gòu)物籃。

上一篇：asp.net調(diào)用存儲(chǔ)過程方法新解

下一篇：asp.net 2.0防止同一用戶同時(shí)登陸