ASP. NET 4. Shopping Cart created by asp.net + cookie + javascrip

Last Update:2013-12-10 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Advantage: the addition of Shopping Cart produced by the shopping Crip can greatly reduce the consumption on the server.
(1) create a shopping interface first

<% @ 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> No title page </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 ));
}
}

// Remove spaces and press ENTER
String. prototype. Trim = function ()
{
Return this. replace (/(^ \ s *) | (\ s * $)/g ,"");
}

// Set 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 ());
}

// Read the Cookie by name
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"/> & nbsp; <br>
<A href = "javascript: void (0)" onclick = "return btn_addcar_onclick ('<% # DataBinder. eval (Container. dataItem, "product_id") %> ') "> Add to shopping cart </a>
</ItemTemplate>
</Asp: DataList> <br>
</Form>
</Body>
</Html>

Make the C # code part and you will find that the C # code is reduced because javascript is added.

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 ();
}
}
}

(2) Shopping Cart creation page

<% @ 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> No title page </title>
<Script language = "javascript" type = "text/javascript">
// <! CDATA [

// Delete the Cookie and delete the corresponding table row
Function btn_delcar_onclick (name, obj ){
DeleteCookie (name); // delete a cookie
DelIndex (obj); // Delete rows in the table
}

// Delete the cookie
Function deleteCookie (name)
{
Var exp = new Date ();
Exp. setTime (exp. getTime ()-1 );
Document. cookie = name + "='' "+"; expires = "+ exp. toGMTString ();
// Alert (document. cookie. toString ());
}

// Delete rows in the table
Function delIndex (obj)
{
Var rowIndex = obj. parentNode. parentNode. rowIndex; // obtain the row subscript.
Alert (rowIndex );
Var tb = document. getElementById ("tb ");
Tb. deleteRow (rowIndex); // Delete the current row
// Add (rowIndex); // insert a row in the current row
}

// Modify the Cookie and modify the rows in the table
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 );
}
}

// Modify the row www.2cto.com In the table
Function modIndex (value, obj)
{
Var rowIndex = obj. parentNode. parentNode. rowIndex; // obtain the row subscript.
// Alert (rowIndex );
Var tb = document. getElementById ("tb ");
Tb. rows (rowIndex). cells (3). innerHTML = value; // modify the current row. You can modify not only the content, but also the HTML code.
// Add (rowIndex); // insert a row in the current row
}

//]>
</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) "> modify </a> </td>
<Td> <a href = "javascript: void (0)" onclick = "return btn_delcar_onclick ('<% # DataBinder. eval (Container. dataItem, "id") %> ', this) "> Delete </a> </td>
</Tr
</ItemTemplate>
<FooterTemplate> </table> </FooterTemplate>
</Asp: Repeater>
</Div>
<Div>
<Asp: LinkButton ID = "btn_checkall" runat = "server"> select all </asp: LinkButton>
</Div>
</Form>
</Body>
</Html>

Make the C # code section. Here, we mainly convert the Cookie code into dt and query the data name in the database.

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 = "the shopping cart is empty ";
Dt2.Columns. Add ("select", typeof (bool ));
Dt2.Columns. Add ("id ");
Dt2.Columns. Add ("name ");
Dt2.Columns. Add ("num ");

// Note that all cookies start with 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 = "Total" + dt2.Rows. Count + "" + "shopping records ";

// Because the cookie does not store the product name, you need to query it once in the database.
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 );

// Add the query result to the new dt2 and bind it
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 = "Empty cart ")
{
This. btn_checkall.Visible = false;
}
Else
{
This. btn_checkall.Visible = true;
}

}
}

From South-South Space

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

ASP. NET 4. Shopping Cart created by asp.net + cookie + javascrip

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support