我从来没有进行过正式的web开发,但是我一直喜欢web,所以这篇文章也是我转行web的一个开始吧。或多或少我也参考了几个网站的实现(当然了,只是看看大概的功能而已),所以也请大家多多指教。该购物车的功能如下:
1. 通过ajax实现添加和删除车上的物品。
2. 删除的物品会显示出来,可以重新添加到购物车。
3. 嗯...没有了,具体大家接着看吧。
购物车的结构我打算用一个table来展示,在UserControl里使用ListView展现购物车的物品(因为比拼接字符串要容易维护的多)。具体代码如下(ShopCartTest.ascx):
1 <asp:ListView ID="ListView1" runat="server">
2 <LayoutTemplate>
3 <table runat="server" cellpadding='0' cellspacing='0' width='100%'>
4 <tr>
5 <td width='7%' style='height: 30px'>
6 商品编号
7 </td>
8 <td>
9 商品名称
10 </td>
11 <td width='10%'>
12 京东价
13 </td>
14 <td width='8%'>
15 返现
16 </td>
17 <td width='8%'>
18 赠送积分
19 </td>
20 <td width='9%'>
21 商品数量
22 </td>
23 <td width='7%'>
24 删除商品
25 </td>
26 </tr>
27 <tr runat="server" id="itemPlaceholder" />
28 <tr>
29 <td colspan='7' style='height: 30px'>
30 重量总计:<%= this.GetProductsWeight() %>kg 原始金额:¥307.00元 - 返现:¥0.00元<br />
31 <span style='font-size: 14px'><b>商品总金额(不含运费):<span id='cartBottom_price'>¥307.00</span>元</b></span>
32 </td>
33 </tr>
34 </table>
35 </LayoutTemplate>
36 <ItemTemplate>
37 <tr>
38 <td style='padding: 5px 0 5px 0;'>
39 <%#(Container.DataItem as Product).ID %>
40 </td>
41 <td>
42 <a target='_blank' href='http://www.xxx.com/product/<%#(Container.DataItem as Product).ID %>.html'>
43 <%#(Container.DataItem as Product).Name %></a>
44 </td>
45 <td>
46 <span>
47 <%#(Container.DataItem as Product).Price %></span>
48 </td>
49 <td>
50 <%#(Container.DataItem as Product).BackMoney %>
51 </td>
52 <td>
53 <%#(Container.DataItem as Product).Score %>
54 </td>
55 <td>
56 <a href='#none' title='减一' onclick="changeCount('-','<%#(Container.DataItem as Product).ID %>','sku');"
57 style='text-decoration: none'>-</a><input type='text' id='txt<%#(Container.DataItem as Product).ID %>'
58 name='txtChange<%#(Container.DataItem as Product).ID %>' maxlength='4' style='width: 30px'
59 value='<%#(Container.DataItem as Product).Count %>' /><a href='#none' title='加一'
60 onclick="changeCount('+','<%#(Container.DataItem as Product).ID %>');" style='text-decoration: none'>+</a>
61 </td>
62 <td>
63 <a href='#none' id='btn_del_173259' onclick="removeProductOnShoppingCart('<%#(Container.DataItem as Product).ID %>',this)">
64 删除</a>
65 </td>
66 </tr>
67 </ItemTemplate>
68 </asp:ListView>