欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP .NET 四、asp.net+cookie+javascrip制作的购物车

程序员文章站 2022-06-25 16:01:15
优点:javascrip制作的购物车的加入,可以大大减少对服务器的消耗。 (一)先制作购物介面   <%@ page language="c#&qu...

优点: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"/>件&nbsp;<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;
        }   

    }
}
 

 

摘自 南南的空间