Tin tức

Thiết kế web ASP.NET 4.5 - Xây dựng giỏ hàng - Phần 1

05/02/2013

Trong việc thiết kế web nói chung, đặc biệt là thiết kế web thương mại điện tử bằng ASP.NET, tính năng giỏ hàng là một tính năng quan trọng, cho phép thực hiện việc đặt hàng trong quá trình mua sắm qua mạng.

Trong hướng dẫn này sẽ mô tả yêu cầu logic để thêm giỏ hàng vào ứng dụng web ASP.NET Web Forms Wingtip Toys ASP.NET Web Forms. Bài hướng dẫn này được xây dựng dựa trên bài viết trước “Hiển thị chi tiết các mục dữ liệu” và là một phần của chuỗi bài viết về thiết kế web cho ứng dụng web mẫu Wingtip Toy Store. Khi hoàn thành bài hướng dẫn này, người sử dụng ứng dụng của bạn có thể thêm, xóa và sửa thông tin sản phẩm trong giỏ hàng của họ.

Trong chuỗi bài viết này bạn sẽ được hướng dẫn:

Cách tạo một giỏ hàng cho ứng dụng web.
Cách cho phép  người dùng thêm sản phẩm vào giỏ hàng.
Thêm điều khiển GridView để hiển thị chi tiết giỏ hàng.
TÍnh toán và hiển thị tổng giá trị đơn hàng.
Xóa và cập nhật sản phẩm trong giỏ hàng.
Cách bao gồm biến đếm cho giỏ hàng.

Mã trong chuỗi bài viết này bao gồm:

Entity Framework Code First
Dữ liệu chú thích
Điều khiển dữ liệu Strongly typed
Mô hình liên kết dữ liệu

Tạo một giỏ hàng

Trong loạt bài hướng dẫn về thiết kế web bằng ASP.NET Web Form trước, bạn đã thêm các trang và mã để xem dữ liệu sản phẩm từ một cơ sở dữ liệu. Trong hướng dẫn này, bạn sẽ tạo ra một giỏ mua hàng để quản lý các sản phẩm mà người dùng quan tâm trong việc mua. Người dùng có thể duyệt và thêm các sản phẩm vào giỏ mua hàng ngay cả khi họ không đăng ký hoặc đăng nhập. Để quản lý truy cập giỏ hàng, bạn sẽ gán cho người dùng một ID duy nhất bằng cách sử dụng một định danh duy nhất (GUID) khi người dùng truy cập vào giỏ hàng lần đầu tiên. Bạn sẽ lưu trữ ID này bằng cách sử dụng các trạng thái phiên ASP.NET (Session).

Lưu ý
Trạng thái phiên trong ASP.NET (Session) là một nơi thuận tiện để lưu trữ thông tin người sử dụng chỉ định và nó sẽ hết hạn sau khi người dùng rời khỏi trang web. Trong khi sử dụng các trạng thái phiên có thể có tác động đến hiệu năng trên các trang web lớn, sử dụng trạng thái phiên làm việc chỉ tốt cho mục đích trình diễn.


Thêm giỏ hàng dưới dạng mô hình lớp (Model Class)

Trong bài viết trước về bắt đầu thiết kế web bằng ASP.NET của chuỗi bài hướng dẫn này, bạn đã định nghĩa lược đồ cho các hạng mục và dữ liệu sản phẩm bằng cách tạo ra các lớp Category Product trong thư mục Models. Bây giờ, thêm một lớp mới để định nghĩa lược đồ cho các giỏ hàng. Sau đó trong hướng dẫn này, bạn sẽ thêm một lớp để xử lý truy cập dữ liệu vào bảng CartItem. Lớp này sẽ cung cấp nghiệp vụ logic để thêm, loại bỏ, và cập nhật các mục trong giỏ hàng.

1. Bấm chuột phải lên thư mục Models và chọn Add -> New Item
thiết kế web

2. Hộp hội thoại Add New Item được hiển thị.  Chọn Code, sau đó chọn Class.
thiết kế web

3. Đặt tên file cho lớp mới là CartItem.cs.
4. Bấm Add. file của lớp mới được hiển thị trong trình soạn thảo.
5. Thay thế mã mặc định bằng mã sau:
using System.ComponentModel.DataAnnotations;
 
namespace WingtipToys.Models
{
    public class CartItem
    {
        [Key]
        public string ItemId { get; set; }
 
        public string CartId { get; set; }
 
        public int Quantity { get; set; }
 
        public System.DateTime DateCreated { get; set; }
 
        public int ProductId { get; set; }
 
        public virtual Product Product { get; set; }
 
    }
}

Lớp CartItem chứa lược đồ sẽ định nghĩa từng sản phẩm người dùng thêm vào giỏ hàng. Lớp này là tương tự như các lược đồ lớp khác mà bạn đã tạo trước đó trong loạt bài hướng dẫn này. Theo quy ước, Entity Framework Code-First  có khóa chính cho bảng CartItem sẽ là hoặc CartItemId hoặc ID. Tuy nhiên, các mã được ghi đè lên hành vi mặc định bằng cách sử dụng các chú thích thuộc tính [Key]. Trong trường hợp này thuộc tính ItemID là khóa chính

Thuộc tính CartId chỉ định mã ID của người sử dụng được kết hợp với mục sản phẩm cần mua. Bạn sẽ thêm mã để tạo ra ID người dùng khi người dùng truy cập các giỏ hàng. ID này cũng sẽ được lưu trữ như là một biến Session ASP.NET.

Cập nhật ngữ cảnh sản phẩm

Ngoài ra để thêm lớp CartItem, bạn sẽ cần phải cập nhật các lớp ngữ cảnh cơ sở dữ liệu quản lý các lớp thực thể và cung cấp truy cập dữ liệu vào cơ sở dữ liệu. Để làm điều này, bạn sẽ thêm lớp mô hình CartItem cho lớp ProductContext.
1. Trong Solution Explorer, tìm và mở file ProductContext.cs, trong thư mục Models.
2. Thêm vào mã được đánh dấu như dưới đây vào tệp ProductContext.cs.
using System.Data.Entity;
  
namespace WingtipToys.Models
{
    public class ProductContext : DbContext
    {
        public ProductContext()
            : base("WingtipToys")
        {
        }
  
        public DbSet<Category> Categories { get; set; }
        public DbSet<Product> Products { get; set; }
        public DbSet<CartItem> ShoppingCartItems { get; set; }
    }
}

Như đã đề cập trước đó trong loạt bài hướng dẫn này, các mã trong các tập tin ProductContext.cs thêm không gian tên System.Data.Entity để bạn có thể truy cập tất cả các chức năng cốt lõi Entity Framework. Chức năng này bao gồm khả năng truy vấn, chèn, cập nhật, và xóa dữ liệu bằng cách làm việc với các đối tượng định kiểu. Lớp ProductContext thêm truy cập tới mô hình lớp CartItem vừa được thêm vào.

Thiet ke web mien phi,  Hoc thiet ke web

ESVN- Nơi hội tụ giải pháp

Công ty cổ phần Eastern Sun Việt Nam