asp.net 购物车的实现浅析(2)

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>" + delProduct.ID + "</td>";
dHtml += "<td>" + 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>" + 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
这样，一个基本的购物车就完成了。但是具体对于数据的操作，需要您进一步处理。本文对于数据的操作只是示例而已。

您可能感兴趣的文章: