XÂY DỰNG TRANG CHỦ 
WEBSITE ASP.NET MVC 5 BOOKSTRORE

 A. MỤC TIÊU:

üTiếp tực phát triển Website trên CSDL và Layout đã thiết kế từ Thiết kế layout.
üXây dựng Model, kết nối CSDL theo mô hình LinQ To SQL 
üTrình bày 5 sản phẩm mới lên trang chủ è Chứa liên kết đế trang Chi tiết sản phẩm.
ü Hiển thị Danh sách chủ đề vào menu trái, chứa liên kết đến trang Sản phẩm theo chủ đề.
üHiển thị Danh mục Nhà xuất bản vào menu trái, chứa liên kết đến trang sản phẩm theo nhà xuất bản.

  B. CÔNG TÁC CHUẨN BI

üCSDL đã thiết kế trong Thiết kế layout
üNhập liệu mẫu cho CSDL
üLưu trữ các hình ảnh sản phẩm nếu có vào thư mục Hinhsanpham của Project
ü Source Website kết quả của Thiết kế Layout .

NỘI DUNG:

1. Khảo sát Layout trang chủ hiện tại:

2.Kết nối CSDL với ứng dụng

üChọn Menu Tools è Connect to Database

üNhập Servername  và chon Database cần kết nối (QLBansach) (username, password nếu có). Chọn Test Connection nếu cần kiểm tra.

üClick phải chuột vào folder  Models => add=> chọn Class

üChọn LINQ to SQL classes ( Vì chúng ta truy xuất dữ liệu bằng LINQ) . Đặt tên cho file Class là dbQLBansach.dbml. Trên thanh Server Explorer kéo thả các bảng của Database sang trang Dataclasses.dbml

2. Hiện thi thông tin 5 quyển sách mới nhất vào trang chủ.  Trong BookStoreController cập nhật code như sau:

Trong View Index của BookStore cập nhật Code như sau:

Kết quả:

Điều chỉnh code như sau :

üBỏ vùng hiện thị các sản phẩm mới trong _LayoutUser

üSao chép code cách trình bày sản phẩm mới để điều chỉnh trong View BookStore/Index

Kết quả :

3. Hiện thị chủ đề sách, trên menu trái  (Sử dụng Partial View) ü Trong BookStore Controller bổ sung Action sau :

Tạo View Chude dạng Partial View: Click phải Action chọn Add/View

Đặt tên View và chọn Create as a Parial View

Code cho Partial View Chude:

Liên kết partial ViewcChude vao _LayoutUser. Code trong _LayoutUesr:

Xem kết quả trang Index đã hiện thị các chủ đề sách:

Trang trí định dạng :  Sử dụng các code định dạng của _LayoutUser chuyển sang Partial View Chude :

üCode của _LayoutUser tai vùng liên kết PartialView:

üCode định dạng của Partial View Chude:

üKết quả trang Index đã hiện thị va trình bày đẹp:

Thực hiện tương tự vớ Nhà xuất bản:
- BookStoreController:

    - PartialView Nhaxuatban:

- Cập nhật code _LayoutUser:

Kết quả: