服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|JAVA教程|ASP教程|

服务器之家 - 编程语言 - ASP.NET教程 - asp.net 购物车的实现浅析

asp.net 购物车的实现浅析

2019-09-12 11:26asp.net教程网 ASP.NET教程

我从来没有进行过正式的web开发,但是我一直喜欢web,所以这篇文章也是我转行web的一个开始吧。或多或少我也参考了几个网站的实现(当然了,只是看看大概的功能而已),所以也请大家多多指教。

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

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

复制代码代码如下:


<asp:ListView ID="ListView1" runat="server"> 
<LayoutTemplate> 
<table runat="server" cellpadding='0' cellspacing='0' width='100%'> 
<tr> 
<td width='7%' style='height: 30px'> 
商品编号 
</td> 
<td> 
商品名称 
</td> 
<td width='10%'> 
京东价 
</td> 
<td width='8%'> 
返现 
</td> 
<td width='8%'> 
赠送积分 
</td> 
<td width='9%'> 
商品数量 
</td> 
<td width='7%'> 
删除商品 
</td> 
</tr> 
<tr runat="server" id="itemPlaceholder" /> 
<tr> 
<td colspan='7' style='height: 30px'> 
重量总计:<%= this.GetProductsWeight() %>kg   原始金额:¥307.00元 - 返现:¥0.00元<br /> 
<span style='font-size: 14px'><b>商品总金额(不含运费):<span id='cartBottom_price'>¥307.00</span>元</b></span> 
</td> 
</tr> 
</table> 
</LayoutTemplate> 
<ItemTemplate> 
<tr> 
<td style='padding: 5px 0 5px 0;'> 
<%#(Container.DataItem as Product).ID %> 
</td> 
<td> 
<a target='_blank' href='http://www.xxx.com/product/<%#(Container.DataItem as Product).ID %>.html'> 
<%#(Container.DataItem as Product).Name %></a> 
</td> 
<td> 
<span> 
<%#(Container.DataItem as Product).Price %></span> 
</td> 
<td> 
<%#(Container.DataItem as Product).BackMoney %> 
</td> 
<td> 
<%#(Container.DataItem as Product).Score %> 
</td> 
<td> 
<a href='#none' /> 我想大家应不用我解释代码的意思了,很简单。 
后台代码如下: 

复制代码代码如下:


public partial class ShopCartTest : System.Web.UI.UserControl 

List<Product> 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<Product> GetProductsInCart(string productID) 

List<Product> list = new List<Product>() 

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: 

复制代码代码如下:


<div id="products"> 
<demo:ShopCartTest ID="ShopCartTest1" runat="server" /> 
</div> 


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

复制代码代码如下:


public class GetProducts : IHttpHandler 

public void ProcessRequest(HttpContext context) 

context.Response.ContentType = "text/plain"; 
ViewManager<ShopCartTest> viewManager = new ViewManager<ShopCartTest>(); 
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<T> 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了,这里我并没有使用任何类库或者框架。代码如下: 

复制代码代码如下:


function ajaxCommon(requst) { 
2 var xmlHttp = false; 
3 if (window.ActiveXObject) { 
4 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
5 } 
6 else { 
7 if (window.XMLHttpRequest) { 
8 xmlHttp = new XMLHttpRequest(); 
9 } 

xmlHttp.onreadystatechange = function() { getAjaxValue(xmlHttp) } 
xmlHttp.open("GET", "/GetProducts.ashx" + '?roid=' + Math.random() + '&' + requst); 
xmlHttp.send(null); 

function getAjaxValue(xmlHttp) { 
if (xmlHttp.readyState == 4) { 
if (xmlHttp.status == 200) { 
document.getElementById("products").innerHTML = xmlHttp.responseText; 



function addProduct(productID, productCount) { 
ajaxCommon("action=AddProduct&productId=" + productID + "&productCount=" + productCount); 

function removeProductOnShoppingCart(productId, obj) { 
debugger; 
setDelProduct(obj, productId); 
ajaxCommon("action=removeProductOnShoppingCart&productId=" + productId); 
setDelProductShow(); 

function changeCount(type, productID) { 
var changeCount = 0; 
var txtCount = 0; 
if (type == "-") { 
changeCount = -1; 

if (type == "+") { 
changeCount = 1; 

txtCount = document.getElementById("txt" + productID).value; 
ajaxCommon("action=changeProductCount&productId=" + productID + "&productCount=" + txtCount); 

function DeledProductInfo() { 
this.ID = ''; 
this.Name = ''; 
this.Price = ''; 
this.Count = ''; 

var delProduct = null; 
function setDelProduct(obj, productID) { 
try { 
delProduct = new DeledProductInfo(); 
var trObj = obj.parentNode.parentNode; 
delProduct.ID = trObj.cells[0].innerHTML; 
delProduct.Name = trObj.cells[1].innerHTML; 
delProduct.Price = trObj.cells[2].innerHTML; 
delProduct.Count = document.getElementById('txt' + productID).value; 
} catch (e) { } 

function setDelProductShow() { 
try { 
if (document.getElementById('divDeledProduct') == null) return; 
if (delProduct != null && delProduct.ID != '') { 
var dHtml = "<table><tr>"; 
dHtml += "<td style='width:70px'>" + delProduct.ID + "</td>"; 
dHtml += "<td style='text-align:left'>" + delProduct.Name + "</td>"; 
dHtml += "<td>" + delProduct.Price + "</td>"; 
dHtml += "<td>" + delProduct.Count + "</td>"; 
dHtml += "<td><a href='#none' onclick=\"addProduct('" + delProduct.ID + "','" + delProduct.Count + "');reAddedProduct('delProduct" + delProduct.ID + "');\">重新购买</a></td>"; 
dHtml += "</tr></table>"; 
document.getElementById('divDeledProduct').style.display = ''; 
document.getElementById('divDeledProduct').innerHTML += "<div id='delProduct" + delProduct.ID + "'>" + dHtml + "</div>"; 

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 
这样,一个基本的购物车就完成了。但是具体对于数据的操作,需要您进一步处理。本文对于数据的操作只是示例而已。

延伸 · 阅读

精彩推荐