优点：javascrip制作的购物车的加入，可以大大减少对服务器的消耗。
（一）先制作购物介面
<%@ page language=”c#” autoeventwireup=”true” codefile=”newshopcar1.x.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=””>
<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”>
<p>
<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=””>
<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);
}
}
//修改表格中的行
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”>
<p><asp:label id=”car_msg” runat=”server” text=””></asp:label>
</p>
<p>
<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>
</p>
<p>
<asp:linkbutton id=”btn_checkall” runat=”server”>全选</asp:linkbutton>
</p>
</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;
}
}
}
摘自 南南的空间
