Hướng dẫn tạo giỏ hàng trong MVC4

Sau đây mình sẽ hướng dẫn các bạn tạo giỏ hàng trong MVC4. Một phiên bản mới của ASP.net Ở đây mình sẽ sử dụng phiên bản Visual Studio 2012.

Đầu tiên bạn mở Visual Studio và chọn New Project trong menu File của VS. 

 Tiếp theo VS sẽ hỏi bạn loại project muốn tạo, bạn chọn như trong hình dưới 

Nhấn OK và chờ trong một vài giây màn hình VS sẽ hiển thị cấu trúc của website mặc định như hình bên dưới. 

Nhấn F5 để chạy thử project 

Xong các bước cài đặt ban đầu, tiếp theo chúng ta sẽ cần hiển thị sản phẩm lên trang chủ, mỗi sản phẩm sẽ có nút "Mua" và khi click vào sản phẩm sẽ được thêm vào giỏ hàng. Ở đây mình sẽ không demo cách lấy dữ liệu dưới DB lên web mà đơn giản sản phẩm sẽ là HTML (việc lấy thông tin sản phẩm lên thì các bạn tham khảo các bài viết khác nhé) :D

Trong màn hình chính của VS đang hiển thị HomeController, các bạn click chuột phải vào action Index trong khung editor của VS, sau đó chọn "Go to View". 

Bước này sẽ di chuyển chúng ta đến nội dung của trang chủ website. Sau đó chúng ta thay đổi nội dung của trang thành danh sách sản phẩm như sau.
Thay thế đoạn trong hình 

bằng nội dung HTML bên dưới 

Sau khi thay đổi ta nhấn F5 để xem nội dung thay đổi của website

Đến bước này cơ bản ta đã hoàn tất việc hiển thị sản phẩm trên website.

Bước tiếp theo ta sẽ tạo lớp giỏ hàng để lưu thông tin sản phẩm khi chọn. Click phải vào thư mục Models trong Sollution Explorer, chọn  Add new item. 

Trong cửa sổ xuất hiện tạo một class mới với tên gọi ShoppingCart.cs. Nhấn OK để tiếp tục.
Trong cửa sổ hiện ra trên VS chúng ta khai báo class ShoppingCartItem như hình dưới. 

Tiếp theo chúng ta thêm class ShoppingCart vào bên dưới class ShoppingCartItem 

Vậy là hoàn tất việc khai báo class giỏ hàng, việc implement các method của class ShoppingCart các bạn xem trong file demo đính kèm cuối bài nhé.

Tiếp theo chúng ta sẽ tiến hành thêm sản phẩm vào giỏ hàng bằng javascript khi người dùng click vào link Thêm vào giỏ hàng ở trang chủ. Khi click nút Thêm vào giỏ hàng thì chúng ta sẽ gửi yêu cầu thêm sản phẩm với ID sản phẩm tương ứng vào giỏ hàng.

Để làm việc này chúng ta phải khai báo class ShoppingCartController để tiếp nhận yêu cầu khi người dùng click vào nút Thêm vào giỏ hàng .

Click chuột phải vào thư mục Controller trong Sollution Explorer, chọn Add new item, chọn Controller.

Trong cửa sổ xuất hiện tạo ShoppingCartController.cs và nhấn OK. Trong ShoppingCartController chúng ta khai báo method AddToCart để xử lý yêu cầu thêm sản phẩm vào giỏ hàng. 

Tiếp theo chúng ta khai báo method RemoveFromCart để xóa sản phẩm khỏi giỏ hàng.

Method cuối cùng là UpdateQuantity. 

Sau khi hoàn tất bước xử lý ở server chúng ta cần khai báo sự kiện khi click Thêm vào giỏ hàng ở dưới client. Click chọn file View/Home/Index.cshtml trong Sollution Explorer, tiếp theo thêm thuộc tính onclick vào tag a "Thêm vào giỏ hàng".

Sau đó khai báo javascript để xử lý sự kiện khi click Thêm vào giỏ hàng. Trong file Index.cshtml thêm đoạn script sau vào đầu trang. 

Nhấn Ctrl + S để save lại project và nhấn F5 để chạy thử, sau khi click vào nút Thêm vào giỏ hàng ta sẽ thấy trình duyệt thông báo kết quả đã thêm thành công hay không.

Sau khi đã thêm sản phẩm vào giỏ hàng thành công, tiếp theo chúng ta sẽ cần xem và cập nhật, xóa những sản phẩm trong giỏ hàng.
Trong file ShoppingCartController, tìm đến action Inde, click chuột phải và chọn, Add View để tạo trang giỏ hàng. 

 Sau khi hiện ra cửa sổ mới nhấn OK.Khai báo script để xóa và cập nhật số lượng sản phẩm trong giỏ hàng. 

Tiếp theo thêm HTML hiển thị giỏ hàng vào bên dưới file Index.cshtml

Để link đến trang giỏ hàng từ trang chủ, chọn file View/Shared/_Layout.cshtml 

Sau đó thêm link vào như hình dưới

Thêm link đến giỏ hàng vào cuối đoạn text có sẵn. Sau đó nhấn F5 chạy thử, click Thêm vào giỏ hàng và sau đó click đến link giỏ hàng phía trên cùng bên tay phải ta được kết quả sau.

Vậy là chúng ta đã hoàn thành xong giỏ hàng. Các bạn có thể tải source demo tại đây.