Để hiểu về giỏ hàng thì chúng ta hãy tưởng tượng chúng ta đang đi siêu thị nhé. Việc đầu tiên khi bạn vào siêu thị là bạn làm gì? Tôi chắc rằng bạn sẽ cần tới 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 nhặt một hồi, 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.
Để 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 Propertiespublic List Items { get; private set; }#endregion#region Singleton Implementation// Readonly properties can only be set in initialization or in a constructorpublic static readonly ShoppingCart Instance;// The static constructor is called as soon as the class is loaded into memorystatic ShoppingCart() {// If the cart is not in the session, create one and put it there// Otherwise, get it from the sessionif (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 outsideprotected 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 cartCartItem newItem = new CartItem(productId);// If this item already exists in our list of items, increase the quantity// Otherwise, add the new item to the listif (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 entirelyif (quantity == 0) {RemoveItem(productId);return;}// Find the item and update the quantityCartItem 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
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"><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"><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 !
No comments:
Post a Comment