Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.

Net MVC 5
Lab 05:
XÂY DỰNG
TRANG GIỎ HÀNG ĐỂ ĐẶT HÀNG TRÊN WEBSITE
A. MỤC TIÊU:
 Tiếp tự c phá t triển Website trên kết quả đã hoà n chỉnh đến Lab04.
 Thự c hiện trang giỏ hà ng
B. CÔNG TÁC CHUẨN BI
 CSDL đã thiết kế trong Lab01
 Dự á n đã hoà n chỉnh đến Lab04 (Source Lab04).
NỘI DUNG:
1. Xâ y dự ng trang giỏ hà ng
 Xem lạ i cấ u trú c cá c Table có liên quan đền Giỏ hà ng trong CSDL:

 Tạ o Class Giohang trong Models:

o Khai bá o cá c thuộ c tính cho Giỏ hà ng.

http://www.thayphet.net 1
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
o Constructor khở i tạ o Giỏ hà ng, vớ i tham số truyền và o là Mã sá ch.

 Tạ o mớ i Controller: GiohangController
o Cậ p nhậ t phương thứ c Lấ y giỏ hàng từ Session[« Giohang »] nếu có , nếu
khô ng sẽ khở i tạ o giỏ hà ng rỗ ng.

http://www.thayphet.net 2
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

o Cậ p nhậ t phương thứ c ThemGiohang()

o Cậ p nhậ t phương thứ c tính tổ ng số lượ ng

o Cậ p nhậ t phương thứ c tính Tongtien()

http://www.thayphet.net 3
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

o Cậ p nhậ t phương thứ c xử lý hiện thị Giỏ hà ng : GioHang()

 Từ Phương thứ c GioHang() xâ y dự ng View GioHang.cshtml tương ứ ng như sau :

 Xem và cậ p nhậ t lạ i liên kết dẫ n đến trang Giỏ hà ng : Trang Details.cshtml

http://www.thayphet.net 4
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
 Thự c thi xem Kết quả  : Tư trang Details : Click và o liên kết đặ t mua (Thự c hiện trên mộ t
số sả n phẩ m, và thự c hiện lặ p lạ i và i lầ n trên 1 sả n phẩ m.)

 Thự c hiện truy cậ p và o trang: http://localhost:1456/GioHang/Giohang Kết quả : Cá c sả n

phẩ m đượ c chọ n đã lưu và o Session[“Giohang”]

 Đặ t thô ng tin Giỏ hà ng lên Menu củ a trang Layout

o Tạ o mộ t Action GiohangPartial trả về PartialView, truyền cá c ViewBag thô ng tin
về số lượ ng và tổ ng tiền củ a giỏ hà ng.

http://www.thayphet.net 5
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

o Tạ o PartialView cho Action Giohangpartial

Cậ p nhậ t code cho View : GiohangPartial

 Cậ p nhậ t _Layout_User cho Menu ngang, hiện thị PartialView Giỏ hà ng

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
@Html.ActionLink("TRANG CHỦ", "Index", "BookStore")
</li>
<li>
@Html.ActionLink("ĐĂNG KÝ", "Dangky", "Nguoidung")
</li>
<li>
@Html.ActionLink("ĐĂNG NHẬP", "Dangnhap" ,"Nguoidung")
</li>
<li>
@Html.Action("GiohangPartial","Giohang")
</li>
</ul>
</div>
<!-- /.navbar-collapse -->

 Kết quả :

http://www.thayphet.net 6
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

 Cậ p nhậ t liên kết “Chi tiết” và “Xó a” trong View Giohang.cshtml

 Click và o liên kết “Chi tiết” sẽ mở trang Details.

http://www.thayphet.net 7
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

 Xử lý xó a giỏ hà ng:
o Cậ p nhậ t Action XoaGiohang () và o GiohangController

Kết quả  : Click « Xó a » để xó a mặ t hà ng ra khỏ i giỏ .

 Bổ sung tiếp chứ c nă ng “Cậ p nhậ t » dù ng cho phép điều chỉnh số lượ ng và cậ p nhậ t lạ i
thà nh tiền và tổ ng tiền.

http://www.thayphet.net 8
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5
o Cậ p nhậ t GioHangController : Bổ sung Action CapnhatGiohang()

o Điều chỉnh View : Giohang.cshtml có bổ sung thêm Form chứ a button “Cậ p nhậ t”

o Kết quả : Khi ngườ i dù ng điều chỉnh Số lượ ng và Click Cậ p nhậ t, hệ thố ng
sẽ cậ p nhậ t lạ i số lượ ng, tính lạ i thà nh tiền, tổ ng số lượ ng và tổ ng tiền và
load lạ i trang GioHang.

http://www.thayphet.net 9
 Lab hướng dẫn thực hành Xây dựng Website Bán sách với ASP.Net MVC 5

 Bổ sung tiếp chứ c nă ng “Xó a Giỏ Hà ng » cho phép xó a tấ t cả thô ng tin trong Giỏ hà ng.
o Cậ p nhậ t GioHangController : Bổ sung Action XoaTatcaGiohang()

o Cậ p nhậ t View: Giohang.cshtml bổ sung liên kết “Xó a Giỏ Hà ng”

o Kết quả : Tạ i trang Giỏ Hà ng khi Click “Xó a Giỏ hà ng”, hệ thố ng sẽ xó a tấ t cả
thô ng tin trong Giỏ hà ng và trở về trang chủ .

--------------------Hết Lab 05---------------

http://www.thayphet.net 10