ASP .NET 四、asp.net+cookie+javascrip制作的购物车
优点：javascrip制作的购物车的加入，可以大大减少对服务器的消耗。
（一）先制作购物介面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="newshopcar1.aspx.cs" Inherits="newshopcar1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<style type="text/css">
#Text_num
{
width: 25px;
}
</style>
<script language="javascript" type="text/javascript">
// <!CDATA[
function btn_addcar_onclick(name) {
var value =0;
if(document.getElementsByName(name)[0].value>0)
{
value = document.getElementsByName(name)[0].value;
setCookie(name, value,10);
//alert(getCookie(name));
}
}
//去除空格,回车
String.prototype.Trim = function()
{
return this.replace(/(^/s*)|(/s*$)/g, "");
}
//设置Cookie
function setCookie(c_name, c_value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie = c_name + "=" + escape(c_value) +
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
//按名字读取Cookie
function getCookie(c_name)
{
if (document.cookie.length>0)
{
var m_car=document.cookie.split(';');
var value=-1;
for (i = 0; i < m_car.length; i++)
{
if(c_name.toString().Trim()==((m_car[i].split('='))[0]).toString().Trim())
{
value = (m_car[i].split('='))[1];
}
}
}
return value;
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" RepeatColumns="4" AlternatingItemStyle-Wrap="true" ItemStyle-Width="100">
<ItemTemplate>
<asp:Image ID="Image2" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem,"product_pic") %>' /><br>
<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"product_name") %>'></asp:Label><br>
<asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"product_price") %>'></asp:Label><br>
<asp:Label ID="Label3" runat="server" Visible="false" Text='<%# DataBinder.Eval(Container.DataItem,"product_id") %>'></asp:Label><br>
<input id="Text_num" type="text" value="1" name='<%# DataBinder.Eval(Container.DataItem,"product_id") %>' maxlength="3"/>件 <br>
<a href="javascript:void(0)" onclick="return btn_addcar_onclick('<%# DataBinder.Eval(Container.DataItem,"product_id") %>')">加入购物车</a>
</ItemTemplate>
</asp:DataList><br>
</form>
</body>
</html>
制作C#代码部份，你会发现，因为javascript的加入,C#的代码变少了
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
public partial class newshopcar1 : System.Web.UI.Page
{
database db = new database();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.DataList1.DataSource = db.select_db("select * from product_list");
this.DataList1.DataBind(); //Convert.ToString();
}
}
}
(二)制做购物车页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="newshopcar2.aspx.cs" Inherits="newshopcar2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
//删除Cookie并删除相应表格行
function btn_delcar_onclick(name,obj) {
deleteCookie(name);//删除cookie
delIndex(obj);//删除表格中的行
}
//删除cookie
function deleteCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
document.cookie = name + "=''" + "; expires="+ exp.toGMTString();
//alert(document.cookie.toString());
}
//删除表格中的行
function delIndex(obj)
{
var rowIndex = obj.parentNode.parentNode.rowIndex;//获得行下标
alert(rowIndex);
var tb = document.getElementById("tb");
tb.deleteRow(rowIndex);//删除当前行
//add(rowIndex);//在当前行插入一行
}
//修改Cookie并修改表格中的行
function btn_modifycar_onclick(name,obj) {
var value =0;
if(document.getElementById(name).value>0)
{
value = document.getElementById(name).value;
document.cookie = name + '=' + value;
modIndex(value,obj);
}
}
//修改表格中的行 www.2cto.com
function modIndex(value,obj)
{
var rowIndex = obj.parentNode.parentNode.rowIndex;//获得行下标
//alert(rowIndex);
var tb = document.getElementById("tb");
tb.rows(rowIndex).cells(3).innerHTML =value;//修改当前行,此处不仅可以修改内容，更可以修改HTML的代码
//add(rowIndex);//在当前行插入一行
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div><asp:Label ID="car_msg" runat="server" Text=""></asp:Label>
</div>
<div>
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate><table border="1" id="tb"></HeaderTemplate>
<ItemTemplate>
<tr>
<td><asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem,"select") %>'/></td>
<td><asp:Label ID="product_id" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"id") %>'></asp:Label></td>
<td><%# DataBinder.Eval(Container.DataItem,"name") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"num") %></td>
<td><input id='<%# DataBinder.Eval(Container.DataItem,"id") %>' type="text" style="width:30px" maxlength="3" value="1"/></td>
<td><a href="javascript:void(0)" onclick="return btn_modifycar_onclick('<%# DataBinder.Eval(Container.DataItem,"id") %>',this)">修改</a></td>
<td><a href="javascript:void(0)" onclick="return btn_delcar_onclick('<%# DataBinder.Eval(Container.DataItem,"id") %>',this)">删除</a></td>
</tr
</ItemTemplate>
<FooterTemplate></table></FooterTemplate>
</asp:Repeater>
</div>
<div>
<asp:LinkButton ID="btn_checkall" runat="server">全选</asp:LinkButton>
</div>
</form>
</body>
</html>
制作C#代码部份，此处主要将Cookie的代码转化成dt，并向数据库中查询数据的名字
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
public partial class newshopcar2 : System.Web.UI.Page
{
DataTable dt = new DataTable();
DataTable dt2 = new DataTable();
database db = new database();
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
return;
this.car_msg.Text = "购物车为空";
dt2.Columns.Add("select", typeof(bool));
dt2.Columns.Add("id");
dt2.Columns.Add("name");
dt2.Columns.Add("num");
//注意，此处我Cookie的开头全为pro
int car_num = 0;
for (int i = 0; i < Request.Cookies.Count;i++ )
{
if (Request.Cookies.Keys[i].Contains("pro"))
{
car_num++;
dt2.Rows.Add(false, Request.Cookies.Keys[i].Trim(), "0", Request.Cookies[i].Value);
}
}
if (car_num > 0)
{
this.car_msg.Text = "共有" + dt2.Rows.Count + "" + "条购物记录";
//因为cookie中不存放产品的名称，所以要进数据库查询一次
string SQL = "select * from product_list where ";
for (int i = 0; i < dt2.Rows.Count - 1; i++)
{
SQL = SQL + "product_id='" + dt2.Rows[i]["id"] + "' or ";
}
SQL = SQL + " product_id='" + dt2.Rows[dt2.Rows.Count - 1]["id"] + "'";
dt = db.select_db(SQL);
//将查询结果加入新的dt2中，并绑定
for (int i = 0; i < dt.Rows.Count; i++)
{
dt2.Rows[i]["name"] = dt.Rows[i]["product_name"];
}
//Response.Write(SQL);
this.Repeater1.DataSource = dt2;
this.Repeater1.DataBind();
}
if (this.car_msg.Text == "购物车为空")
{
this.btn_checkall.Visible = false;
}
else
{
this.btn_checkall.Visible = true;
}
}
}
摘自 南南的空间
