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"/>件 <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;
        }

}
}

摘自南南的空间

上一篇：搜索与回溯框架(自用)

下一篇：简书网因违反互联网相关规定被网信办责令整顿

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

ASP.NET MVC下的四种验证编程方式[续篇]

ASP.NET MVC 主要的四种过滤器和三种具体实现类

ASP .NET 一、纯asp.net+cookie制作的购物车

ASP.NET中制作各种3D图表的方法

使用Asp.Net Core MVC 开发项目实践[第四篇:基于EF Core的扩展2]

ASP.NET MVC下的四种验证编程方式

Asp.Net服务器控件开发的Grid实现(四)回发事件

ASP .NET 二、纯asp.net+cookie制作的购物车

ASP.NET MVC从控制器传递数据到视图的四种方式详解

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