Code giỏ hàng bằng ASP.NET MVC

Với các website thương mại điện tử thì việc có tích hợp giỏ hàng là vô cùng cần thiết, nó đem lại sự tiện lợi cho các khách hàng khi mua sắm trên website của bạn giống như việc đi mua ở các siêu thị vậy, khách hàng chỉ việc lựa chọn và khi sau khi chọn được các mặt hàng, lựa chọn lại các sản phẩm và thanh toán. Hôm nay mình sẽ hướng dẫn các bạn tạo một giỏ hàng như vậy, các bạn có thể tích hợp áp dụng ngay trên website của bạn. Code này được mình lấy từ chính dự án mình đã làm, có sử dụng Session để lưu giỏ hàng, bạn nào chưa biết về Session vui lòng đọc thêm về Session nha.

Yêu cầu:

– Phần mềm VS 2013

– Ngôn ngữ ASP.NET MVC

Mình sẽ không hướng dẫn các bạn theo kiểu cầm tay chỉ dẫn, vẫn là Step by Step vô cùng dễ hiểu.

Bước 1: Bạn tạo trong Model 1 class mới ShoppingCart để định nghĩa các thuộc tính của sản phẩm sẽ được lưu trong giỏ hàng, và các phương thức thêm vào giỏ hàng, cập nhật lại giỏ hàng, xóa sản phẩm khỏi giỏ hàng, và xóa toàn bộ giỏ hàng ( sau khi khách hàng thanh toán ).

Cụ thể như sau:

public class ShoppingCart
 {
 public ShoppingCart()
 {
 ListItem = new List<ShoppingCartItem>();
 }
 public List<ShoppingCartItem> ListItem { get; set; }
 public void AddToCart(ShoppingCartItem item)
 {
 if(ListItem.Where(s=>s.ProductName.Equals(item.ProductName)).Any())
 {
 var myItem = ListItem.Single(s => s.ProductName.Equals(item.ProductName));
 myItem.Quanlity += item.Quanlity;
 myItem.Total += item.Quanlity * Convert.ToDouble(item.Price.Trim().Replace(",",string.Empty).Replace(".",string.Empty));
 }
 else
 {
 ListItem.Add(item);
 }
 }
 public bool RemoveFromCart(int lngProductSellID)
 {
 ShoppingCartItem existsItem = ListItem.Where(x => x.ProductID == lngProductSellID).SingleOrDefault();
 if (existsItem != null)
 {
 ListItem.Remove(existsItem);
 }
 return true;
 }
 public bool UpdateQuantity(int lngProductSellID, int intQuantity)
 {
 ShoppingCartItem existsItem = ListItem.Where(x => x.ProductID == lngProductSellID).SingleOrDefault();
 if (existsItem != null)
 {
 existsItem.Quanlity= intQuantity;
 existsItem.Total = existsItem.Quanlity * Convert.ToDouble(existsItem.Price.Replace(",",string.Empty).Replace(".",string.Empty));
 }
 return true;
 }
 public bool EmptyCart()
 {
 ListItem.Clear();
 return true;
 }
 }
 public class ShoppingCartItem
 {
 public int ProductID { get; set; }
 public string ProductName { get; set; }
 public string Price { get; set; }
 public int Quanlity { get; set; }
 public double Total { get; set; }
 }

Tạo mới trong Model một class ShoppingCartModels để lấy thông tin giỏ hàng từ Session:

public class ShoppingCartModels
 {
 // gio hang duoc luu tru trong session
 public ShoppingCart Cart { get; set; }
 }

Bước 2: Tại trang View cần đặt button Add to cart hoặc thêm vào giỏ hàng bạn chỉ cần thêm đường dẫn để Controller thực hiện công việc thêm sản phẩm vào giỏ hàng, đường dẫn nên chứa ID của sản phẩm như trong ví dụ là

@Model.First().ProductID :
<a data-toggle="modal" href="/giohang/ThemVaoGioHang/@Model.First().ProductID" data-target="#myModal" class="btn btn-default" role="button">Thêm vào giỏ hàng</a>

Bước 3: Tạo Controller Giỏ hàng tên giohangcontroller.cs để thực hiện các công việc thêm vào giỏ hàng, cập nhật giỏ hàng:

// xóa sản phẩm có id trong giỏ hàng đã có sẵn
 public ActionResult XoaSanPham(int id)
 {
 ShoppingCart objCart = (ShoppingCart)Session["Cart"];
 if (objCart != null)
 {
 objCart.RemoveFromCart(id);
 Session["Cart"] = objCart;
 }
 return RedirectToAction("index");
 }
// thêm vào giỏ hàng 1 sản phẩm có id = id của sản phẩm
 public ActionResult ThemVaoGioHang(int id)
 {
 var P = db.Products.Single(s => s.ProductID.Equals(id));
 if(P!=null)
 {
 ShoppingCart objCart = (ShoppingCart)Session["Cart"];
 if(objCart==null)
 {
 objCart = new ShoppingCart();
 }
 ShoppingCartItem item = new ShoppingCartItem()
 {
 ProductName = P.Name,
 ProductID = P.ProductID,
 Price = P.Price,
 Quanlity=1,
 Total=Convert.ToDouble(P.Price.Trim().Replace(",",string.Empty).Replace(".",string.Empty))
 };
 objCart.AddToCart(item);
 Session["Cart"] = objCart;
 return View(P);
 }
 return View(P);
 }
// cập nhật giỏ hàng theo loại sản phẩm và số lượng
 public ActionResult UpdateQuantity(string proID, int quantity)
 {
 int id = Convert.ToInt32(proID.Substring(7, proID.Length - 7));
 ShoppingCart objCart = (ShoppingCart)Session["Cart"];
 if (objCart != null)
 {
 objCart.UpdateQuantity(id, quantity);
 Session["Cart"] = objCart;
 }
 return RedirectToAction("index");
 }
// giỏ hàng mặc định, nếu session = null thì hiện không có hàng trong giỏ, nếu có thì trả lại list các sản phẩm
 public ActionResult Index()
 {
 ViewBag.Title = "Giỏ hàng";
 ShoppingCartModels model = new ShoppingCartModels();
 model.Cart= (ShoppingCart)Session["Cart"];
 return View(model);
 }

Bước 4: Tạo View cho controller giỏ hàng:

@model ChamSocSauSinh.Models.ShoppingCartModels
 <script type="text/javascript">
 $(document).ready(function () {
 $(".Quanlity").change(function () {
 var quanlity = $(this).val();
 var proID = $(this).attr("id");
 $.ajax({
 url: '@Url.Action("UpdateQuantity")',
 data: { "proID": proID, "quantity": quanlity}
 });
 window.location = '/GioHang';
 });
 });
 </script>
<img src="~/Content/themes/base/images/ShoppingCart.png" />
@if (Model != null && Model.Cart != null)
{
<table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid">
<tr>
 <th>Tên sản phẩm</th>
 <th>Giá</th>
 <th>Số lượng</th>
 <th>Thành tiền</th>
</tr>
@{
 double total = 0;
}
 @foreach (var item in Model.Cart.ListItem)
 {
 total += item.Total;
 <tr>
 <td>@item.ProductName (@Html.ActionLink("Xóa", "XoaSanPham", new {id=item.ProductID }))</td>
 <td>@item.Price VND/ 1SP</td>
 <td>@Html.DropDownList("product"+item.ProductID.ToString(), new SelectList(
 new List<Object> {
 new { value="0", text = "0"},
 new { value="1", text = "1"},
 new { value="2", text = "2"},
 new { value="3", text = "3"},
 new { value="4", text = "4"},
 new { value="5", text = "5"},
 }, "value", "text", item.Quanlity), new {@class="Quanlity"})</td>
 <td>@item.Total.ToString("#,##0") VND</td>
 </tr>
 }
 <tr>
 <td colspan="3"><b>Tổng tiền</b></td>
 <td><b>@total.ToString("#,##0") VND</b></td>
 </tr>
</table>
 <div class="span6" style="text-align:right">
 <a href="/giohang/ThongTinKhachHang" class="btn btn-success">Thanh Toán</a>
 </div>
 }
 else
 {
 <table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid">
 <tr>
 <th>Tên sản phẩm</th>
 <th>Giá</th>
 <th>Số lượng</th>
 <th>Thành tiền</th>
 </tr>
 <tr>
 <td colspan="4"> Hiện chưa có sản phẩm nào trong giỏ hàng</td>
 </tr>
 </table>
 }
 <hr />
 @Html.Partial("~/Views/Shared/_LocationPartial.cshtml")

Và đây là kết quả:
gio-hangcode-gio-hangLưu ý: đối với bạn nào chưa quen với sử dụng session cần lưu ý rắng session lưu đối tượng nào thì khi lấy dữ liệu từ session phải là kiểu dữ liệu đó, như lưu string thì lấy ra phải là string, là list thì là list. Nếu không sẽ không lấy được dữ liệu.
Good Luck!
Có gì không hiểu để lại comment nha!

Comments

comments