本文将介绍在InterDev中实现网上商店购物车功能的方法，具体步骤如下：

　　一、 数据库结构：

　　产品数据表(Products): 存放产品信息

产品名	ProductName
产品编号	ProductID
单价	Price
分类编号	CategoryID

　　 Cart：购物车数据表，临时存放客户的订单

产品编号	ProductID
产品名	ProductName
价格	Price
客户Session标号	SessionID
订购数量	Quantity

　　Orders：订单，当用户确认订单后，订货数据将由Cart表转存入此表

产品编号	ProductID
客户Session编号	SessionID
订购数量	Quantity

　　Customers：客户，实现客户登录时将使用该表

　　二、 建立数据库连接：

　　1、 添加数据源：在控制面板中选择：管理工具/ODBC数据源，单击添加，选择数据库驱动程序为Microsoft Access Driver，单击"完成"，在弹出的对话框中为数据源命名为"Store"，单击选择，找到建立好的.mdb文件，然后单击确定

　　2、 建立连接：在InterDev中的Project Exlporer中右击选择Add Data Connection，选择数据源，命名为Con，连接建立后的所有数据存取都将基于此连接。

　　三、 购物车要实现的基本功能和对应的文件：

产品浏览和选购	Products.asp
放入购物车	AddtoCart.asp
浏览购物车	ViewCart.asp
删除一个产品	DeleteItem.asp
更新购物车	UpdateCart.asp
确认订单	SaveOrder.asp

　　四、 Products.asp

　　本页以表格显示客户所选的产品分类中的所有商品，每一个商品后都有一个"添加到购物车"按钮，指向AddtoCart.asp。

　　1、 添加prodRec控件，设定记录源为Products表。

　　2、 添加Grid控件，设定其数据源为prodRec

　　3、 添加"选购此产品"链接

　　在Grid的属性页中单击Add Unbound Column，在Header中输入："选购此产品"，在Field/expression中输入：="＜A href=AddtoCart.asp?ProductID="+[ProductID]+"＞选购"+"＜/A＞"。此语句的作用是，将当前选定的产品的产品编号存放在变量ProductID中传递给AddtoCart.asp，在AddtoCart.asp中将根据此产品编号为购物车添加记录。

　　五、 AddtoCart.asp

　　本页提供用户所选商品的详细信息，用户在此页可以修改订购数量。

　　1、 添加一个记录集，命名为prodRec，设定记录源为SQL statement，输入：SELECT * FROM Products。在＜Head＞区中输入如下代码：

＜Script Language=Javascript Runat=Server＞ 　function prodRec_onbeforeopen(){ 　newSQL="Select * From Products Where ProductID="+Request("ProductID"); 　prodRec.setSQLText(newSQL); } ＜/Script＞

　　此段代码在记录集打开之前执行，根据Products.asp传递来的ProductID参数，过滤记录集，获得用户选择的商品。

　　2、 再添加一个记录集，命名为cartRec，该记录集的作用是根据用户的Session编号和选定的产品编号，确定所选商品是否已经在购物车中，如果已经在购物车中，则提取Cart表中的记录，提示用户该商品已选购，并让用户更改选购数量：

＜Script Language=Javascript Runat=Server＞ 　Var Incart; //是否在购物车中 　Var QtyinCart; //用户已经选购的数量 　function cartRec_onbeforeopen(){ 　　newSQL="Select * From Cart Where (SessionID="+'Session.SessionID'+") 　　　　　　 and (ProductID="+Request("ProductID")+")"; 　　cartRec.setSQLText(newSQL); 　} 　function cartRec_ondatasetcomplete(){ 　　if(cartRecrdset.getCount()==1) 　　　//过滤后记录集不为空，用户已选购了该商品 　　｛ 　　　Incart=true; 　　　QtyinCart=cartRec.fields.getValue("Quantity"); 　　　//取出用户已经选购的数量 　　　｝ ＜/Script＞

　　3、 ＜Body＞中的代码：

＜Form Action="UpdateCart.asp" Method="Post"＞ 您选定的商品为： ＜%=prodRecorset.fields.getValue("ProductNAME")%＞ ＜%If Incart=true Then%＞ 您的购物车中已有 ＜%=QtyinCart%＞件此商品，请更新您选购的数量： ＜Input Type="Text" Name="OrderQty" Value="＜%=QtyinCart%＞"＞ ＜%Else%＞ 请输入您的选购数量： ＜Input Type="Text" Name="OrderQty" Value="1"＞ ＜%End If%＞ ＜Input Name="prodID" Type="hidden" Value="＜%=prodRec.fields.getValue("ProductID")%＞"＞ //使用一个隐藏的编辑框，存放用户选定的产品编号，供UpdateCart.asp使用。 ＜Input Name="prodName" Type="hidden" Value="＜%=prodRec.fields.getValue("ProductName")%＞"＞ ＜Input Name="prodPrice" Type="hidden" Value="＜%=prodRec.fields.getValue("Price")%＞"＞ //使用三个隐含编辑框，向UpdataCart.asp传递产品编号、名称和价格。 ＜Input Type="Submit" Value="添加至购物车"＞ ＜/Form＞

　　六、 UpdateCart.asp

　　 接收AddtoCart.asp传递来的prodID、prodName、prodPrice和OrderQty，加上客户的Session编号，存入Cart表中。

　　1、 添加记录集cartRec，设置数据源为Select * From Cart

　　2、 添加更新数据的代码：

＜Script Language=Javascript Runat=Server＞ function cartRec_onbeforeopen(){ if(Request("InCart")==0) { newSQL="Select * From Cart"; }//不在购物车中，取出所有数据 else { newSQL="Select * From Cart Where SessionID="+Session.SessionID; }//已经在购物车中，取出唯一的数据，准备修改数据 cartRec.setSQLText(newSQL); } function cartRec_ondatasetcomplete(){ if(Request("InCart")==0) //如果不在购物车中，添加新纪录 { fields=new Array("ProductID","ProductName"Quantity","SessionID"); values=new Array(Request("prodID"),Request("prodName"),Request("OrderQty"),Session.SessionID); cartRec.AddImmeidate(fields,values); } else//如果已经在购物车中，更新购买数量 { cartRec.fields.setValue("Quantity",Request("OrderQty")); } Response.Redirect("ViewCart.asp")； ＜/Script＞

　　七、 ViewCart.asp

　　1、 添加记录集，命名为cartRec，设置数据源为Select * From Cart

　　2、 添加Grid控件，设定数据源为cartRec，显示三个字段：ProductName、Quantity、Price。添加两个Unbounded Column：

　　　1) 显示总价格，Field/Expression为：＝[Quantity]*[Price]。

　　　2) 编辑/删除按钮，Field/Expression为：＝"＜A Href=AddtoCart.asp?ProductID="+[ProductID]+"编辑/A＞/＜AHref=DeleteItem.asp?ProductID="+[ProductID]+"＞删除＜/A＞"。这两个超链接分别将ProductID传递给AddtoCart.asp和DeleteItem.asp。

　　3、 添加指向SaveOrder.asp的链接

　　　＜A href="SaveOrder.asp"＞确认订单＜/A＞

　　八、 DeleteItem.asp删除用户选定的一条购物车记录

　　　1、 添加记录集cartRec，设置数据源为Select * From Cart

　　　2、 添加代码：

＜Script Language=Javascript Runat=Server＞ function cartRec_onbeforeopen() { newSQL="Select * from Cart Where (SessionID="+'Session.SessionID'+") And (ProductID="+Request("ProductID")+")"; cartRec.setSQLText(newSQL); }//过滤记录集得到当前用户选定要删除的购物车记录 function cartRec_ondatasetcomplete() ｛ cartRec.deleteRecord()； Response.Redirect("ViewCart.asp")； ｝//删除客户选定的购物车记录，然后转向ViewCart.asp

　　十、SaveOrder.asp保存购物车中的临时数据至Order表

　　1、 添加记录集cartRec，设定数据源为Select * From Cart，在onbeforeopen()中过滤用Select * From Cart Wher SessionID=Session.SessionID过滤记录集，得到当前用户的所有未保存购物车记录

　　2、 添加记录集orderRec，设定数据源为表Order

　　3、 捕获cartRec的ondatasetcomplete()事件，输入代码：

function cartRec_ondatasetcomplete() { 　while(!cartRec.EOF) 　｛ 　　fields=new Array("ProductID","SessionID","Quantity"); 　　values=new Array(cartRec.fields.getValue("ProductID"), 　　carRec.fields.getValue("SessionID"), 　　carRec.fields.getValue("Quantity")); 　　orderRec.Addimediate(fields,values);//向Order表中添加新记录 　　cartRec.deleteRecord()；//删除购物车中的一条记录 　　cartRec.Movenext()；//继续处理下一条记录 　｝ 　Response.Redirect("ViewCart.asp"); }

C5UHTML5中文学习网 - HTML5先行者学习网
C5UHTML5中文学习网 - HTML5先行者学习网