Analysis on the realization of asp.net shopping cart

The function of the shopping cart is as follows:
. Add and remove items from your car via Ajax.
. Deleted items are displayed and can be added back to the shopping cart.
. Well... No, the specific people continue to see it.

The structure of the shopping cart I'm going to use a table to show that the UserControl uses ListView to show the items in the cart (because it's much easier to maintain than stitching strings). The specific code is as follows (Shopcarttest.ascx):
Copy CodeThe code is as follows:
<asp:listview id= "ListView1" runat= "Server" >
<LayoutTemplate>
<table runat= "Server" cellpadding= ' 0 ' cellspacing= ' 0 ' width= ' 100% ' >
<tr>
&LT;TD width= ' 7% ' style= ' height:30px ' >
Product number
</td>
<td>
Product Name
</td>
&LT;TD width= ' 10% ' >
Jing Dong Price
</td>
&LT;TD width= ' 8% ' >
Return to present
</td>
&LT;TD width= ' 8% ' >
Complimentary points
</td>
&LT;TD width= ' 9% ' >
Number of items
</td>
&LT;TD width= ' 7% ' >
Delete Merchandise
</td>
</tr>
&LT;TR runat= "Server" id= "Itemplaceholder"/>
<tr>
&LT;TD colspan= ' 7 ' style= ' height:30px ' >
Weight total: <%= this. Getproductsweight ()%>kg Original amount: ￥ 307.00 yuan-return: ￥ 0.00 Yuan <br/>
<span style= ' font-size:14px ' ><b> total merchandise amount (excluding freight): <span id= ' Cartbottom_price ' >￥307.00</span> yuan </b></span>
</td>
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
&LT;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 ' title= ' minus one '
Style= ' Text-decoration:none ' >-</a><input type= ' text ' id= ' txt<%# (Container.DataItem as Product). ID% > '
Name= ' txtchange<%# (Container.DataItem as Product). ID%> ' maxlength= ' 4 ' style= ' width:30px '
Value= ' <%# (Container.DataItem as Product). Count%> '/><a href= ' #none ' title= ' plus one '
Style= ' Text-decoration:none ' >+</a>
</td>
<td>
<a href= ' #none ' id= ' btn_del_173259 ' >
Delete </a>
</td>
</tr>
</ItemTemplate>
</asp:ListView>

I think we should not explain the meaning of the code, very simple.
The background code is as follows:
Copy CodeThe code is as follows:
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", C Ount = "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;}
}

Write the logic of the shopping cart here, by action to determine what is the operation, the same simple code. Look at the product class again:
Copy CodeThe code is as follows:
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= "Maomaozai Nini Bear MX9470", price= "99.00", Backmoney= "0.00", score= "0", count= "1"},
New product{id= "155097", name= "xxxxxx new lightweight portable computer table (mouse pad)", price= "79.00", backmoney= "￥0.00", score= "0", count= "1"},
New product{id= "155098", name= "xxxxxx eye lamp (ideal) stl-t412w-03wt", price= "69.00", backmoney= "￥0.00", score= "0", count= "1" }
};
Return list. Where (P => {return p.id!= ProductID;}). ToList ();
}
}

Next, use the UserControl on the shopcartdetail.aspx page:
Copy CodeThe code is as follows:
<div id= "Products" >
<demo:shopcarttest id= "ShopCartTest1" runat= "Server"/>
</div>

Two more classes are needed to use the shopping cart via Ajax:
Copy CodeThe code is as follows:
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;
}
}
}

Copy CodeThe code is as follows:
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 ();
}
}

These two categories are referred to by the old Zhao proposed to complete the program, the specific principle, you can see here.
The rest is JavaScript, and I'm not using any class libraries or frameworks. The code is as follows:
Copy CodeThe code is as follows:
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 ();
3 ·
}
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 + "); Readdedpro Duct (' delproduct "+ delproduct.id +"); \ "> Re-buy </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) {}
}

Code is still easy to understand, need to explain the deletion of the operation, divided into three steps:
Save the items that need to be deleted first: setdelproduct (obj, productId);
Delete items on the back shopping cart list and return the Deleted Items list: Ajaxcommon ("action=removeproductonshoppingcart&productid=" + productId);
The deleted item output is dropped to the deleted list (fully on-client operation): Setdelproductshow ();
There are two steps to adding deleted items from the delete list back to the cart:
Add items to the item list in the background (and call the same method by adding items directly): Addproduct
Remove the item from the deleted list (full client action): Readdedproduct
In this way, a basic shopping cart is completed. However, the specific operation of the data, you need to further processing. This article is just an example of the operation of the data.