asp.net 购物车的实现浅析

635人浏览 / 0人评论

该购物车的功能如下：
. 通过ajax实现添加和删除车上的物品。
. 删除的物品会显示出来，可以重新添加到购物车。
. 嗯...没有了，具体大家接着看吧。

购物车的结构我打算用一个table来展示，在UserControl里使用ListView展现购物车的物品（因为比拼接字符串要容易维护的多）。具体代码如下（ShopCartTest.ascx）：

复制代码代码如下:

商品编号	商品名称	京东价	返现	赠送积分	商品数量	删除商品
重量总计：kg 原始金额：￥307.00元 - 返现：￥0.00元商品总金额(不含运费)：￥307.00元

style='text-decoration: none'>-name='txtChange' maxlength='4' style='width: 30px'
value='<%#(Container.DataItem as Product).Count %>' />onclick="changeCount('+','');" style='text-decoration: none'>+

删除

我想大家应不用我解释代码的意思了，很简单。
后台代码如下：

复制代码代码如下:

 
public partial class ShopCartTest : System.Web.UI.UserControl 
{ 
List productsList = null; 
protected override void OnPreRender(EventArgs e) 
{ 
base.OnPreRender(e); 
switch (Acion) 
{ 
case "removeProductOnShoppingCart": 
productsList = Product.GetProductsInCart(ProductID); 
break; 
case "changeProductCount": 
productsList = Product.GetProductsInCart(null); 
foreach (var item in productsList) 
{ 
if (item.ID == ProductID) 
{ 
item.Count = "3"; 
} 
} 
break; 
case "AddProduct": 
productsList = Product.GetProductsInCart(null); 
productsList.Add(new Product() { ID = "173233", Name = "ElandMX9470", Price = "399.00", BackMoney = "0.00", Score = "0", Count = "1" }); 
break; 
default: 
productsList = Product.GetProductsInCart(ProductID); 
break; 
} 
ListView1.DataSource = productsList; 
ListView1.DataBind(); 
} 
public string GetProductsWeight() 
{ 
return Product.GetProductsInCart(ProductID).Sum(p => decimal.Parse(p.Price) * decimal.Parse(p.Count)).ToString(); 
} 
public string GetProductsOriginalPrice() 
{ 
return Product.GetProductsInCart(ProductID).Sum(p => decimal.Parse(p.Price) * decimal.Parse(p.Count)).ToString(); 
} 
public string ProductID { get; set; } 
public string Acion { get; set; } 
} 

把对购物车的逻辑都写到这里面，通过action来判断是什么操作，一样简单的代码。再来看看Product类：

复制代码代码如下:

 
public class Product 
{ 
public string ID { get; set; } 
public string Name { get; set; } 
public string Price { get; set; } 
public string BackMoney { get; set; } 
public string Score { get; set; } 
public string Count { get; set; } 

public static List GetProductsInCart(string productID) 
{ 
List list = new List() 
{ 
new Product{ID="173259",Name="毛毛仔妮妮熊MX9470",Price="99.00",BackMoney="0.00",Score="0",Count="1"}, 
new Product{ID="155097",Name="xxxxxx新款轻巧便携式电脑桌（送鼠标垫）",Price="79.00",BackMoney="￥0.00",Score="0",Count="1"}, 
new Product{ID="155098",Name="xxxxxx护眼台灯（理想）STL-T412W-03WT",Price="69.00",BackMoney="￥0.00",Score="0",Count="1"} 
}; 
return list.Where(p => { return p.ID != productID; }).ToList(); 
} 
} 

接下来在ShopCartDetail.aspx页面使用该UserControl：

复制代码代码如下:

通过ajax使用购物车还需要两个类：

复制代码代码如下:

 
public class GetProducts : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
ViewManager viewManager = new ViewManager(); 
ShopCartTest control = viewManager.LoadViewControl("~/ShopCartTest.ascx"); 
control.ProductID = context.Request.QueryString["productId"]; 
control.Acion = context.Request.QueryString["action"]; 
context.Response.Write(viewManager.RenderView(control)); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 

复制代码代码如下:

 
public class ViewManager where T : UserControl 
{ 
private Page m_pageHolder; 
public T LoadViewControl(string path) 
{ 
m_pageHolder = new Page(); 
return this.m_pageHolder.LoadControl(path) as T; 
} 
public string RenderView(T control) 
{ 
StringWriter output = new StringWriter(); 
this.m_pageHolder.Controls.Add(control); 
HttpContext.Current.Server.Execute(this.m_pageHolder, output, false); 
return output.ToString(); 
} 
} 

这两个类是参考老赵提出来的方案完成，具体原理，你可以看这里。
剩下来都是javascript了,这里我并没有使用任何类库或者框架。代码如下：

复制代码代码如下:

" + delProduct.ID + "

" + delProduct.Name + "

" + delProduct.Price + "

" + delProduct.Count + "

重新购买

";
document.getElementById('divDeledProduct').style.display = '';
document.getElementById('divDeledProduct').innerHTML += "

" + dHtml + "

";
}
delProduct = null;
} catch (e) { }
}
function reAddedProduct(reAddDivId) {
try {
debugger;
document.getElementById('divDeledProduct').removeChild(document.getElementById(reAddDivId));
if (document.getElementById('divDeledProduct').childNodes.length == 0) {
document.getElementById('divDeledProduct').style.display = 'none';
}
} catch (e) { }
}

代码依旧很容易看懂，需要解释的就是删除的操作，分为三步：
将需要删除的物品先保存起来：setDelProduct(obj, productId);
在后台购物车清单上面将物品删除，并返回删除后的物品清单：ajaxCommon("action=removeProductOnShoppingCart&productId=" + productId);
将删除的物品输出，放到已删除列表（完全在客户端操作）：setDelProductShow();
还有从删除列表中将删除的物品重新添加到购物车当中，分为两步：
在后台将物品添加到物品清单（和直接添加物品调用同一个方法）：addProduct
从已删除列表中将该物品删除（完全在客户端操作）：reAddedProduct
这样，一个基本的购物车就完成了。但是具体对于数据的操作，需要您进一步处理。本文对于数据的操作只是示例而已。

您可能感兴趣的文章: