2.6　購(gòu)物車管理頁(yè)設(shè)計(jì)

2.6.1　購(gòu)物車管理頁(yè)概述

購(gòu)物車功能的實(shí)現(xiàn)是本網(wǎng)站的關(guān)鍵，主要用于顯示及管理用戶的購(gòu)物信息。用戶在瀏覽商品的過(guò)程中，如果遇到想要購(gòu)買的商品，單擊商品下方的“購(gòu)買”按鈕，即可將該商品的信息添加到購(gòu)物車中，通過(guò)單擊頁(yè)面頂部導(dǎo)航欄中的“購(gòu)物車”鏈接進(jìn)入購(gòu)物車管理頁(yè)面，可以進(jìn)行查看和編輯商品信息等操作。購(gòu)物車管理頁(yè)包括的功能如下：

　將商品添加到購(gòu)物車。

　瀏覽購(gòu)物車中的商品信息。

　修改購(gòu)物車中的商品數(shù)量。

　刪除購(gòu)物車中的商品。

　清空購(gòu)物車。

購(gòu)物車管理頁(yè)（shopCart.aspx）的運(yùn)行效果如圖2.25所示。

圖2.25　購(gòu)物車頁(yè)面運(yùn)行效果

2.6.2　購(gòu)物車管理頁(yè)技術(shù)分析

在實(shí)現(xiàn)購(gòu)物車管理頁(yè)的功能時(shí)主要應(yīng)考慮兩點(diǎn)：一是如何區(qū)分用戶與購(gòu)物車的對(duì)應(yīng)關(guān)系；二是購(gòu)物車中商品存放的結(jié)構(gòu)。

（1）用戶與購(gòu)物車的對(duì)應(yīng)關(guān)系

用戶與購(gòu)物車的對(duì)應(yīng)關(guān)系，即每個(gè)用戶都有自己的購(gòu)物車，購(gòu)物車不能混用，而且必須保證當(dāng)用戶退出系統(tǒng)時(shí)，其購(gòu)物車也隨之消失。這種特性正是Session對(duì)象的特性，所以使用Session對(duì)象在用戶登錄期間傳遞購(gòu)物信息。

（2）購(gòu)物車中商品存放的結(jié)構(gòu)

實(shí)現(xiàn)購(gòu)物功能的實(shí)質(zhì)是增加一個(gè)（商品名，商品個(gè)數(shù)）的（名，值）對(duì)，該結(jié)構(gòu)正是一個(gè)哈希表（Hashtable）的結(jié)構(gòu)（哈希表是鍵／值對(duì)的集合），所以使用哈希表（Hashtable）來(lái)表示用戶的購(gòu)買情況。

在.NET Framework中，哈希表是System.Collections命名空間提供的一個(gè)容器，用于處理和表現(xiàn)類似key/value的鍵值對(duì)，其中key通常用來(lái)快速查找，同時(shí)key是區(qū)分大小寫；value用于存儲(chǔ)對(duì)應(yīng)的key值。Hashtable中key/value鍵值對(duì)均為object類型，所以Hashtable可以支持任何類型的key/value鍵值對(duì)。

哈希表的一些簡(jiǎn)單操作介紹如下。

（1）在哈希表中添加一個(gè)key/value鍵值對(duì)：HashtableObject.Add(key,value)。

（2）在哈希表中移出某個(gè)鍵值對(duì)：HashtableObject.Remove(key)。

（3）在哈希表中移出所有元素：HashtableObject.Clear()。

根據(jù)以上兩點(diǎn)的講解，下面具體看一下如何應(yīng)用哈希表和Session對(duì)象來(lái)實(shí)現(xiàn)購(gòu)物車功能。以用戶向購(gòu)物車中添加商品為例，首先判斷用戶是否已經(jīng)有了購(gòu)物車，即判斷Session["ShopCart"]對(duì)象是否為空，如果Session["ShopCart"]對(duì)象為空，表示用戶沒有購(gòu)物車，則添加一個(gè)（名，值）對(duì)（“名”是這個(gè)商品的ID代號(hào)，“值”為1，表示購(gòu)買了一個(gè)商品）；如果Session["ShopCart"]對(duì)象不為空，獲取其購(gòu)物車，首先判斷購(gòu)物車中是否已經(jīng)有該商品，如果有，則這個(gè)商品的“值”，即數(shù)量加1。代碼如下：

例程14　代碼位置：資源包\TM\02\B2C\B2C\Default.aspx.cs

代碼貼士

?CommandArgument屬性：獲取或設(shè)置可選參數(shù)，該參數(shù)與關(guān)聯(lián)的CommandName一起被傳遞到Command事件。

語(yǔ)法格式如下：

public string CommandArgument { get; set; }

屬性值：與關(guān)聯(lián)的CommandName一起被傳遞到Command事件的可選參數(shù)。默認(rèn)值為String.Empty。

盡管可以單獨(dú)設(shè)置CommandArgument屬性，但該屬性通常也只在設(shè)置了CommandName屬性時(shí)才使用。

2.6.3　購(gòu)物車管理頁(yè)實(shí)現(xiàn)過(guò)程

本模塊使用的數(shù)據(jù)表：tb_BookInfo

1. 設(shè)計(jì)步驟

（1）在應(yīng)用程序中新建一個(gè)Web窗體，命名為shopCart.aspx，將其作為MasterPage.master母版頁(yè)的內(nèi)容頁(yè)，并設(shè)置為起始頁(yè)。

（2）在頁(yè)面中通過(guò)bootstrap+div為整個(gè)頁(yè)面布局。從“工具箱”選項(xiàng)卡中拖放兩個(gè)Label控件、一個(gè)GridView控件和4個(gè)LinkButton控件，通過(guò)屬性窗口設(shè)置控件的屬性。shopCart.aspx頁(yè)面中各個(gè)控件的屬性設(shè)置及其用途如表2.4所示。

表2.4　shopCart.aspx頁(yè)面中各個(gè)控件的屬性設(shè)置及其用途

2. 實(shí)現(xiàn)代碼

在該頁(yè)的后臺(tái)shopCart.aspx.cs頁(yè)中編寫代碼前，首先需要定義CommonClass類對(duì)象和DBClass類對(duì)象，以便在編寫代碼時(shí)調(diào)用該類中的方法，然后再定義3個(gè)全局變量。代碼如下：

例程15　代碼位置：資源包\TM\02\B2C\B2C\shopCart.Aspx.cs

在Page_Load事件中，創(chuàng)建一個(gè)自定義數(shù)據(jù)源，并將其綁定到GridView控件中，顯示購(gòu)物車中的商品信息。代碼如下：

例程16　代碼位置：資源包\TM\02\B2C\B2C\shopCart.Aspx.cs

在購(gòu)物車信息顯示框中，數(shù)量的顯示是通過(guò)一個(gè)可寫的TextBox控件來(lái)實(shí)現(xiàn)的，如果用戶要修改商品的數(shù)量，可以在相應(yīng)的文本框中進(jìn)行修改。單擊“更新購(gòu)物車”鏈接按鈕，購(gòu)物車中的商品數(shù)量將會(huì)被更新。“更新購(gòu)物車”的Click事件代碼如下：

例程17　代碼位置：資源包\TM\02\B2C\B2C\shopCart.aspx.cs

當(dāng)用戶需要?jiǎng)h除購(gòu)物車中某一類商品時(shí)，可以在購(gòu)物車信息顯示框中，單擊該類商品后的“刪除”鏈接按鈕，將該商品從購(gòu)物車中刪除。“刪除”鏈接按鈕的Click事件代碼如下：

例程18　代碼位置：資源包\TM\02\B2C\B2C\shopCart.Aspx.cs

當(dāng)用戶單擊“清空購(gòu)物車”鏈接按鈕時(shí)，將會(huì)清空購(gòu)物車中的所有商品。“清空購(gòu)物車”鏈接按鈕的Click事件代碼如下：

例程19　代碼位置：資源包\TM\02\B2C\B2C\shopCart.aspx.cs

當(dāng)用戶單擊“繼續(xù)購(gòu)物”鏈接按鈕時(shí)，將會(huì)跳轉(zhuǎn)到前臺(tái)首頁(yè)，繼續(xù)購(gòu)買商品。“繼續(xù)購(gòu)物”鏈接按鈕的Click事件代碼如下：

例程20　代碼位置：資源包\TM\02\B2C\B2C\shopCart.aspx.cs

protected void lnkbtnContinue_Click(object sender, EventArgs e)
{
   Response.Redirect("Default.aspx");
}

當(dāng)用戶已購(gòu)買完商品后，可以單擊“前往服務(wù)臺(tái)”鏈接按鈕，將會(huì)跳轉(zhuǎn)到服務(wù)臺(tái)頁(yè)（checkOut.asp）進(jìn)行結(jié)算并提交訂單。“前往服務(wù)臺(tái)”鏈接按鈕的Click事件代碼如下：

例程21　代碼位置：資源包\TM\02\B2C\B2C\shopCart.Aspx.cs

2.6.4　單元測(cè)試

在開發(fā)完購(gòu)物車模塊后，為了保證程序正常運(yùn)行，一定要對(duì)模塊進(jìn)行單元測(cè)試。單元測(cè)試在程序開發(fā)中非常重要，只有通過(guò)單元測(cè)試才能發(fā)現(xiàn)模塊中的不足之處，才能及時(shí)地彌補(bǔ)程序中出現(xiàn)的錯(cuò)誤，在開發(fā)購(gòu)物車模塊時(shí)需注意如下問(wèn)題：

當(dāng)本網(wǎng)站的會(huì)員購(gòu)?fù)曜约旱纳唐酚榭促?gòu)物車時(shí)，如果編寫以下代碼將會(huì)出現(xiàn)如圖2.26所示的提示錯(cuò)誤。

例程22　代碼位置：資源包\TM\02\B2C\B2C\shopCart.aspx.cs

圖2.26　編寫購(gòu)物車頁(yè)時(shí)出現(xiàn)的錯(cuò)誤信息

原因分析如下：

出現(xiàn)該錯(cuò)誤主要是由于數(shù)組的索引值出現(xiàn)問(wèn)題。從數(shù)組Rows[i][j]中取值時(shí)，應(yīng)該從第一個(gè)下標(biāo)元素開始取值，即Rows[0][0]，而出現(xiàn)上面的錯(cuò)誤就是數(shù)組Rows[i][j]的初始值是Rows[1][0]，說(shuō)明數(shù)組是從第二個(gè)元素開始取值的，所以會(huì)在應(yīng)用程序中提示“確保列表中的最大索引小于列表的大小”錯(cuò)誤信息。

解決方法：

應(yīng)用foreach循環(huán)語(yǔ)句將數(shù)組中的元素值賦予新的商品數(shù)量，從數(shù)組$array中取值時(shí)，應(yīng)該從第一個(gè)下標(biāo)元素（即數(shù)組的第0個(gè)元素）開始取值到數(shù)組的最大下標(biāo)-1結(jié)束，即可正確獲取自己的購(gòu)物車功能。更改后的代碼如下：

例程23　代碼位置：資源包\TM\02\B2C\B2C\shopCart.aspx.cs