Với một trang web bán hàng thì giỏ hàng là một
phần không thể thiếu. Để hiểu về giỏ hàng thì chúng ta hãy tưởng tượng chúng ta
đang đi siêu thị. Việc đầu tiên khi bạn vào siêu thị là bạn cần lấy một chiếc
xe đẩy để chở hàng, hay một cái giỏ để đựng hàng, tôi xin tạm gọi hai thứ đó là
“giỏ hàng”. Công việc tiếp theo là lựa chọn sản phẩm để mua, bạn có thể nhặt
sản phẩm định mua, đưa vào giỏ hàng, mua bao nhiêu sản phẩm thì bạn nhặt bấy
nhiêu. Sau khi chọn được các sản phẩm mà mình cần, bạn có thể thay đổi ý định,
bỏ bớt một số sản phẩm, hoặc giảm hoặc tăng số lượng sản phẩm mình mua trong
giỏ hàng. Những sản phẩm trong giỏ hàng là những sản phẩm bạn chọn để mua, và
nó chỉ có tính chất lưu trữ tạm thời trước khi thanh toán. Tức là, khi bạn
thanh toán xong giỏ hàng lại trở về trạng thái rỗng.
Câu chuyện về giỏ hàng trong website thương
mại điện tử, nó cũng giống như chiếc xe đẩy chở hàng trong siêu thị. Tức là,
bạn phải làm sao cho người dùng lựa chọn được sản phẩm, đưa vào giỏ hàng, thay
đổi số lượng sản phẩm, xóa sản phẩm trong giỏ hàng. Và bạn nhớ rằng giỏ hàng
chỉ là nơi lưu trữ tạm thời các sản phẩm mà bạn cần mua trước khi thanh toán.
Tôi thấy có khá nhiều bạn sinh viên đau đầu
với bài toán kinh điển này. Để giúp các bạn bớt đau đầu, tôi sẽ hướng dẫn các bạn
những thao tác cơ bản để xây dựng được giỏ hàng trong ASP.net giúp các bạn
mới học
lập trình web với ASP.net có thể tạo chức "năng giỏ hàng" cho web của mình một
cách đơn giản nhất
Để tạo ra được giỏ hàng, chúng ta cần có 3 class cơ bản là ShoppingCart, CartItem, Product được mô tả như class diagram ở dưới đây.
Bước 1: Tạo Class ShoppingCart
Chúng ta cần một nơi để lưu trữ trữ các mục
(item) trong giỏ hàng cũng như cung cấp chức năng để thao tác với những phần tử
đó. Chúng ta sẽ tạo ra một class để làm được việc này. Class này sẽ quản lý
việc lưu trữ session (phiên làm việc).
Đầu tiên, chúng ta phải tạo ra thư mục
App_Code. Để làm được việc này, vào menu “Website”, sau đó chọn “Add
ASP.NET Folder”, rồi chọn “App_Code”. Đây chính là nơi chúng ta đặt toàn bộ
class do mình viết ra. Từ bất kỳ trang web nào cũng có thể truy cập tới code
trong App_Code (chúng ta không cần phải tham chiếu tới nó bằng cách sử dụng
những lệnh kiểu như “include” hay bất cứ cái gì). Sau đó, chúng ta có thể thêm
class vào thư mục này bằng cách kích chuột phải vào folder rồi chọn “Add New
Item”.
Mẹo nhanh: Regions (Khu vực) trong ASP.NET thực sự là một
điều tuyệt vời để tổ chức và nhóm code lại với nhau. Điều tốt đẹp nhất về chúng
là bạn có thể mở và đóng các khu vực để thu gọn số lượng mã mà bạn đang tìm
kiếm hoặc nhanh chóng tìm thấy theo cách của bạn xung quanh một tập tin.
Đây là code của
ShoppingCart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
using System.Collections.Generic;
using System.Web;
/**
* The ShoppingCart
class
*
* Holds the items
that are in the cart and provides methods for their manipulation
*/
public class ShoppingCart
{
#region Properties
public List
Items { get;
private set; }
#endregion
#region Singleton
Implementation
// Readonly
properties can only be set in initialization or in a constructor
public static readonly ShoppingCart
Instance;
// The static
constructor is called as soon as the class is loaded into memory
static ShoppingCart()
{
// If the cart is
not in the session, create one and put it there
// Otherwise, get it
from the session
if (HttpContext.Current.Session["ASPNETShoppingCart"]
== null) {
Instance = new ShoppingCart();
Instance.Items = new List();
HttpContext.Current.Session["ASPNETShoppingCart"]
= Instance;
} else {
Instance =
(ShoppingCart)HttpContext.Current.Session["ASPNETShoppingCart"];
}
}
// A protected
constructor ensures that an object can't be created from outside
protected ShoppingCart()
{ }
#endregion
#region Item
Modification Methods
/**
* AddItem() - Adds
an item to the shopping
*/
public void AddItem(int productId)
{
// Create a new item
to add to the cart
CartItem newItem =
new CartItem(productId);
// If this item
already exists in our list of items, increase the quantity
// Otherwise, add
the new item to the list
if (Items.Contains(newItem))
{
foreach (CartItem
item in Items) {
if (item.Equals(newItem))
{
item.Quantity++;
return;
}
}
} else {
newItem.Quantity =
1;
Items.Add(newItem);
}
}
/**
* SetItemQuantity()
- Changes the quantity of an item in the cart
*/
public void SetItemQuantity(int productId,
int quantity) {
// If we are setting
the quantity to 0, remove the item entirely
if (quantity
== 0) {
RemoveItem(productId);
return;
}
// Find the item and
update the quantity
CartItem updatedItem
= new CartItem(productId);
foreach (CartItem
item in Items) {
if (item.Equals(updatedItem))
{
item.Quantity =
quantity;
return;
}
}
}
/**
* RemoveItem() -
Removes an item from the shopping cart
*/
public void RemoveItem(int productId)
{
CartItem removedItem
= new CartItem(productId);
Items.Remove(removedItem);
}
#endregion
#region Reporting
Methods
/**
* GetSubTotal() -
returns the total price of all of the items
* before tax,
shipping, etc.
*/
public decimal GetSubTotal()
{
decimal subTotal
= 0;
foreach (CartItem
item in Items)
subTotal +=
item.TotalPrice;
return subTotal;
}
#endregion
}
|
Bước 2: Tạo class CartItem và Product
Bên cạnh việc tạo ra một nơi để lưu trữ các
phần tử, chúng ta cũng cần tạo ra nơi để lưu trữ thông tin về mỗi mục (item).
Chúng ta sẽ tạo ra class CartItem để làm việc này. Chúng ta cũng sẽ tạo ra một
class Product đơn giản, nó sẽ chứa thông tin cơ bản về sản phẩm chúng ta đang
bán.
Đây là CartItem class
Đây là CartItem class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
using System;
/**
* The CartItem Class
*
* Basically a structure for
holding item data
*/
public class CartItem
: IEquatable<CartItem> {
#region Properties
// A place to store the
quantity in the cart
// This property has an implicit
getter and setter.
public int Quantity
{ get; set; }
private int _productId;
public int ProductId
{
get
{ return _productId;
}
set
{
// To ensure that the Prod object
will be re-created
_product = null;
_productId = value;
}
}
private Product
_product = null;
public Product
Prod {
get
{
// Lazy initialization - the
object won't be created until it is needed
if
(_product == null) {
_product = new Product(ProductId);
}
return _product;
}
}
public string Description
{
get
{ return Prod.Description;
}
}
public decimal UnitPrice
{
get
{ return Prod.Price;
}
}
public decimal TotalPrice
{
get
{ return UnitPrice
* Quantity; }
}
#endregion
// CartItem constructor just needs
a productId
public CartItem(int productId)
{
this.ProductId = productId;
}
/**
* Equals() - Needed to implement
the IEquatable interface
* Tests whether
or not this item is equal to the parameter
* This method is
called by the Contains() method in the List class
* We used this
Contains() method in the ShoppingCart AddItem() method
*/
public bool Equals(CartItem
item) {
return item.ProductId
== this.ProductId;
}
}
|
Đây là Product class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
/**
* The Product class
*
* This is just to simulate some
way of accessing data about our products
*/
public class Product
{
public int Id
{ get; set; }
public decimal Price
{ get; set; }
public string Description
{ get; set; }
public Product(int id)
{
this.Id = id;
switch (id)
{
case
1:
this.Price = 19.95m;
this.Description =
"Shoes";
break;
case
2:
this.Price = 9.95m;
this.Description =
"Shirt";
break;
case
3:
this.Price = 14.95m;
this.Description =
"Pants";
break;
}
}
}
|
Một “property” (thuộc tính) là một biến trong
một class mà nó kèm theo setter, getter hoặc cả hai. Trong class Product chúng
ta khai báo các thuộc tính của sản phẩm thông qua các property: Id, Price,
Description. Ngoài ra, class Product còn khởi tạo một vài sản phẩm (3 sản phẩm)
để chúng ta dễ dàng kiểm tra phần giỏ hàng.
Bước 3: Thêm vào giỏ hàng
Sau khi code rất nhiều, giờ là lúc chúng ta
làm cái gì đó thật trực quan. Chúng ta sẽ tạo ra một page đơn giản để thêm các mục
vào trong giỏ hàng. Tất cả, chúng ta có một vài mục cùng với link “Add to Cart”
. Nào chúng ta hãy cùng code trang Default.aspx.
Đây phần design của
trang Default.aspx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<%@ Page
Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>My
Store</title>
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<h1>My Store</h1>
<div class="products">
<div>Shoes -
<asp:LinkButton runat="server"
ID="btnAddShirt" OnClick="btnAddShoes_Click">Add
To Cart</asp:LinkButton></div>
<div>Shirt -
<asp:LinkButton runat="server"
ID="btnAddShorts" OnClick="btnAddShirt_Click">Add
To Cart</asp:LinkButton></div>
<div>Pants -
<asp:LinkButton runat="server"
ID="btnAddShoes" OnClick="btnAddPants_Click">Add
To Cart</asp:LinkButton></div>
</div>
<a href="ViewCart.aspx">View
Cart</a>
</div>
</form>
</body>
</html>
|
Còn đây là phần code
behind để xử lý các sự kiện Default.aspx.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
using System;
public partial class _Default
: System.Web.UI.Page {
protected void Page_Load(object sender,
EventArgs e) {
}
protected void btnAddShoes_Click(object sender,
EventArgs e) {
// Add product 1 to the shopping
cart
ShoppingCart.Instance.AddItem(1);
// Redirect the user to view their
shopping cart
Response.Redirect("ViewCart.aspx");
}
protected void btnAddShirt_Click(object sender,
EventArgs e) {
ShoppingCart.Instance.AddItem(2);
Response.Redirect("ViewCart.aspx");
}
protected void btnAddPants_Click(object sender,
EventArgs e) {
ShoppingCart.Instance.AddItem(3);
Response.Redirect("ViewCart.aspx");
}
}
|
Bước 4: Hiển thị giỏ hàng
Tất cả những gì chúng ta làm ở trên chỉ là để
chuẩn bị cho shopping cart! Giờ chúng ta hãy nhìn trang ViewCart.aspx.
Đây là code của trang ViewCart.aspx. Về cơ bản
chúng ta sẽ sử dụng GridView để hiển thị thông tin trong giỏ hàng. Cột
Description trong GridView chúng ta sẽ sử dụng BoundFiled. Còn cột Quantity
chứa số lượng sản phẩm sẽ mua, ta cần sử dụng TemplateFiled, để có thể đưa
TextBox và link Remove luôn vào đó. Để hiển thị thông tin như Price,
Description …. trên GridView chúng ta cần dùng tới <%#
Eval("PropertyName") %>.
Chi tiết code của
ViewCart.aspx ở đây
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<%@ Page
Language="C#" AutoEventWireup="true"
CodeFile="ViewCart.aspx.cs" Inherits="ViewCart" %>
<!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>Shopping
Cart</title>
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<h1>Shopping Cart</h1>
<a href="Default.aspx"><
Back to Products</a>
<br /><br />
<asp:GridView runat="server" ID="gvShoppingCart" AutoGenerateColumns="false" EmptyDataText="There
is nothing in your shopping cart."
GridLines="None" Width="100%" CellPadding="5" ShowFooter="true" DataKeyNames="ProductId" OnRowDataBound="gvShoppingCart_RowDataBound" OnRowCommand="gvShoppingCart_RowCommand">
<HeaderStyle HorizontalAlign="Left" BackColor="#3D7169" ForeColor="#FFFFFF" />
<FooterStyle HorizontalAlign="Right" BackColor="#6C6B66" ForeColor="#FFFFFF" />
<AlternatingRowStyle BackColor="#F8F8F8" />
<Columns>
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtQuantity" Columns="5" Text='<%#
Eval("Quantity") %>'></asp:TextBox><br />
<asp:LinkButton runat="server" ID="btnRemove" Text="Remove" CommandName="Remove" CommandArgument='<%#
Eval("ProductId") %>' style="font-size:12px;"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="UnitPrice" HeaderText="Price" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" DataFormatString="{0:C}" />
<asp:BoundField DataField="TotalPrice" HeaderText="Total" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" DataFormatString="{0:C}" />
</Columns>
</asp:GridView>
<br />
<asp:Button runat="server" ID="btnUpdateCart" Text="Update
Cart" OnClick="btnUpdateCart_Click" />
</div>
</form>
</body>
</html>
|
Kết quả
Bây giờ, chúng ta đã có một shopping cart khá
là đẹp mắt !
Bài này mới chỉ dừng lại ở việc hướng dẫn bạn
xây dựng giỏ hàng bằng ASP.NET sử dụng C#, nhưng từ đây bạn hoàn toàn có thể
thể triển khai cách làm này với các ngôn ngữ khác. Chúc bạn thành công với
những website thương mại điện tử của mình !
Các bạn có thể tham gia làm bài test kiến thức lập trình web để biết được chính xác khả năng của bạn
trong lĩnh vực này.