Xây dựng website bán hàng MVC 4

Cần lưu ý ở đây là khi nhấp nút Say Hello thì dữ liệu form được chuyển đến Action SayHello trong HomeController Bước 4: Xây dựng lớp UserInfo Để tiếp nhận thông tin từ form Index.cshtml

Xây dựng website bán hàng MVC 4

Bài 1 : Say Hello

MỤC TIÊU

 Biết cách tạo project

 Hiểu các thành phần Model, View, Controller và nguyên lý hoạt động của ứng dụng MVC4

MÔ TẢ

 Trong bài này bạn phải tạo ra một ứng dụng MVC4 có hoạt động theo mô tả giao diện sau



THỰC HIỆN

 Bước 1: Mở project mẫu

 Bước 2: Tạo HomeController

 Bước 3: Thiết kế View Index.cshtml

 Bước 4: Xây dựng lớp UserInfo

 Bước 5: Thêm Action SayHello()

 Bước 6: Thiết kế View SayHello.cshtml

Bước 1: Mở project mẫu

Để tập trung vào phần việc chính là khai thác Entity Framework nên buổi học hôm nay cho sẵn project mẫu Các bạn chỉ việc mở ra và bổ sung thêm mã theo yêu cầu là được Phải chuột vào file solution sau đó chọn VS2012 để chạy như hướng dẫn của hình sau:

Để thêm một Controller vào project, bạn chỉ việc phải chuột lên thư mục Controllers sau

đó chọn Add>>Controller>> Đặt tên cho controller Tên của một Controller phải có phần tiếp cuối ngữ là Controller

Ví dụ: HomeController, ProductController, SupplierController là các tên hợp lệ

Bước 2: Tạo HomeController

Bước 3: Thiết kế View Index.cshtml

Để thêm một view cho một action của một controller vào project, bạn chỉ việc mở

controller đó và phải chuột lênaction>>Add View>> Đặt tên (nên giữ nguyên tên gợi ý trên hộp thoại)

Cần lưu ý ở đây là khi nhấp nút Say Hello thì dữ liệu form được chuyển đến Action

SayHello() trong HomeController

Bước 4: Xây dựng lớp UserInfo

Để tiếp nhận thông tin từ form Index.cshtml và chứa thông tin để trình bày trên trang kết quả sau khi nhập nút [SayHello], bạn cần định nghĩa một lớp UserInfo gồm các thuộc tính cần thiết sau đây

Name và Gender là 2 thuộc tính dùng để nhận thông tin từ form Greeting và Photo được

sử dụng để chứa thông tin trình bày trên trang kết quả

Bước 5: Thêm Action SayHello()

Action này được gọi khi nhấp nút [Say Hello] trên form của Index.cshtml Với MVC4 các tham số sẽ tự động chuyển vào các thuộc tính cùng tên trong tham số model của action SayHello() Việc còn lại là phân tích giới tính để đưa ra lời chào và hình ảnh phù hợp để chuyển cho view kết quả (cùng tên với action –SayHello.cshtml)

Bước 6: Thiết kế View SayHello.cshtml

SayHello.cshtml là view được sử dụng để hiển thị thông tin (model) chuyển từ action

SayHello() Bạn phải tạo view này và thiết kế mã như sau:

Tải project về để thực hành nha :

https://www.dropbox.com/s/sddxivoraxpb86d/ProjectMVC_HocLapTrinhWeb.com.rarXây dựng website bán hàng MVC 4 - BÀI 2: ÁNH XẠ CSDL

MỤC TIÊU

 Biết cách khai báo chuỗi kết nối trong web.config

 Biết cách định nghĩa các thực thể và ánh xạ với các bảng trong CSDL

 Biết cách định nghĩa lớp DbContext để ánh xạ các thực thể với CSDL

MÔ TẢ

Trong bài này bạn sẽ phải ứng dụng mô hình code-first của EF để xây dụng các lớp thực thể để làm việc với CSDL gồm 3 bảng: Products, Categories và Suppliers được mô tả như sau:

THỰC HIỆN

 Bước 1: Định nghĩa các Entity Class và DbContext

 Bước 2: Khai báo chuỗi kết nối

 Bước 3: Làm việc với CSDL có sẵn

Bước 1: Định nghĩa các Entity Class & DbContext

Thêm vào thư mục Models một lớp với tên MVC4SerminarDB Sau đó viết mã cho lớp này như sau

Xây dựng website bán hàng MVC 4 - BÀI 3: ỨNG DỤNG CRUD

MỤC TIÊU

 Biết cách xây dựng ứng dụng CRUD (Create, Read, Update và Delete) với EF trong MVC4

 Biết cách upload hình lên server

 Biết cách trang trí trang web với Jquery

MÔ TẢ

Trong bài này ban sẽ phải xây dựng một trang web với MVC4 sử dụng EF để quản lý bảng Suppliers với các chức năng thêm, xóa, sửa và truy vấn dữ liệu một cách hoàn chỉnh Ứng dụng được mô tả như các hình vẽ sau đây

Giao diện được bố trí gồm 2 tabs:

 tabEdit: chứa form cho phép xem, thêm, sửa và xóa

 tabList: chứa lưới hiển thị danh sách nhà cung cấp và cho phép chọn để sửa và xóa

THỰC HIỆN

 Bước 1: Tạo SupplierController và Thêm Action Crud()

 Bước 2: Thiết kế View Crud.cshtml

 Bước 3: Hoàn thiện mã xử lý cho Crud

Bước 1: Tạo SupplierController và thêm Action Crud()

Cách tốt nhất là bạn tạo view cho action này trước sau đó quay lại viết mã để hoàn thiện việc xử lý thì sẽ dễ hiểu hơn

Bước 2: Thiết kế View Crud.cshtml

Thêm view Crud.cshtml và thiết kế giao diện như sau:

Bước 3: Hoàn thiện mã xử lý cho Crud

 Để làm việc được với CSDL, bạn cần dòng mã lệnh:

o MVC4SeminarDB db = new MVC4SeminarDB();

 Đề biết được có tham số cmdInsert hay không, bạn cần

o if (Request["cmdInsert"] != null) {…}

 Để kiểm tra xem có upload file hay không:

o if (Uploader.HasFile("uplLogo")){}

 Đề lưu file upload vào thư mục và lấy tên file:

o model.Logo = Uploader.Save("uplLogo", "~/Images/suppliers/");

 Để bổ sung một bản ghi vào CSDL:

 Để tìm 1 bản ghi theo khóa chính:

o var supplier = db.Suppliers.find(id);

Sau đây là toàn bộ đoạn mã nguồn của phương thức Action Crud()

Bước 2: Khai báo chuỗi kết nối

Bước 3: Làm việc với CSDL có sẵn

Qua bước 1 và bước 2 là đủ để bạn có thể làm việc với CSDL MVC4Seminar CSDL sẽ được

tự động tạo ra khi bạn có thao tác đến CSDL lần đầu tiên

Tuy nhiên trong bài này, chúng ta cần dữ liệu để minh họa, nên bạn cần tạo CSDL trước với file MVC4Seminar.sql được đặt trong thư mục Database Bạn chỉ cần chạy SQL Server -> mở file -> nhấn F5 là CSDL MVC4Seminar được tạo ra gồm 3 bảng như mô tả ở trên

Xây dựng website bán hàng MVC 4 –

BÀI 4: Trình bày và phân trang sản phẩm

MỤC TIÊU

 Biết cách trình bày hàng hóa

 Biết cách sử dụng các phương thức mở rộng Take() và Skip() để phân trang hàng hóa với LINQ

MÔ TẢ

Trong bài này ban sẽ phải xây dựng một trang web với MVC4 để trình bày các mặt hàng có phân trang được mô tả như các hình sau đây

Trình bày: Thông tin được hiển thị của mỗi mặt hàng gồm: tên, hình, giá và các hình ảnh biểu

tượng trang trí Mỗi hàng gồm 3 mặt hàng

Phân trang: mỗi trang 6 mặt hàng và mỗi nhóm gồm 5 trang

THỰC HIỆN

Bước 1: Tạo ProductController và Action Search()

Tạo một ProductController mới và thêm action Search vào Sau đó viết mã để cấp danh sách hàng hóa cho view Search.cshtml Mã như sau:

Bước 2: Thiết kế View Search.cshtml

Thêm view Search.cshtml và thiết kế để hiển thị danh sách hàng hóa như sau

Bước 3: Phân trang

 Để có thể phân trang, bạn cần hiệu chỉnh mã ở action Search() và view

Search.cshtml

 Trong action Search() bạn cần hiệu chỉnh lại như sau:

 “pager1”: định danh phân trang – mỗi trang được đặt với 1 định danh khác nhau

 6 là số lượng hàng hóa được trình bày trên mỗi trang

 5 là số trang trên mỗi nhóm

trang vào đầu và cuối danh sách là được

Giao diện gồm 2 phần:

 Phần trên: trình bày thông tin chi tiết hàng hóa được xem

 Phần dưới: trình bày các mặt hàng cùng loại và cùng nhà cung cấp

THỰC HIỆN

 Bước 1: Thêm Action Detail() vào ProductController

 Bước 2: Thiết kế View Detail.cshtml

Bước 1: Thêm Action Detail() vào ProductController

Bổ sung action Detail() vào ProductController để nhận vào tham số mã hàng hóa sau đó tìm hàng hóa và chuyển thông tin cho view Detail.cshtml

Bước 2: Thiết kế View Detail.cshtml

View Detail.cshtml chỉ việc khai thác model chia sẻ từ action Detail() để hiển thị thông tin chi tiết View này cũng hiển thị các mặt hàng cùng loại và cùng nhà cung cấp bằng cách khai thác thực thể kết hợp trong EF Khi nhấp chuột vào một mặt hàng cùng loại hay cùng nhà cung cấp thì chi tiết của mặt hàng đó được trình bày thay cho mặt hàng đang xem

Xây dựng website bán hàng MVC 4 – BÀI

6: HOÀN THIỆN PARTIALVIEW

MỤC TIÊU

 Sử dụng EF để bổ sung cho các phần giao diện còn thiếu dữ liệu trên Layout chính

MÔ TẢ

Trong bài này ban sẽ phải hoàn thiện mã để hiển thị dữ liệu đầy đủ cho một số

PartialView của Layout chính Cụ thể bạn phải hiển thị chủng loại trên _Category.cshtml, nhà cung cấp trên _Supplier.cshtml và 3 math hàng ngẫu nhiên trên _Promotion.cshtml Sau đây là các PartailView đã được cấp dữ liệu đầy đủ

THỰC HIỆN

 Bước 1: Hoàn thiện _Category.cshtml

 Bước 2: Hoàn thiện _Supplier.cshtml

 Bước 3: Hoàn thiện _Promotion.cshtml

Bước 1: Hoàn thiện _Category.cshtml

Mở partial view _Category.cshtml trong Views/Shared và hiệu chỉnh mã razor như sau

để hiển thị tất cả các nhà cung cấp và khi nhấp vào mỗi nhà cung cấp sẽ gọi action

Search() của ProductController với tham số là CategoryId

Bước 2: Hoàn thiện _Supplier.cshtml

Mở partial view _Supplier.cshtml trong Views/Shared và hiệu chỉnh mã razor như sau

để hiển thị tất cả các nhà cung cấp và khi nhấp vào mỗi nhà cung cấp sẽ gọi action

Search() của ProductController với tham số là SupplierId

Bước 3: Hoàn thiện _Promotion.cshtml

Mở partial view _Promotion.cshtml trong Views/Shared và hiệu chỉnh mã razor như sau

để hiển thị 3 mặt hàng ngẫu nhiên Khi nhấp chuột vào mỗi mặt hàng sẽ gọi action

Detail() của ProductController với tham số là mã hàng hóa được chọn

Xây dựng website bán hàng MVC 4 - BÀI 7: Tìm kiếm sẩn phẩm với nhiều tùy chọn MỤC TIÊU

 Biết cách xây dựng trang Action tiếp nhận và phân biệt tham số vào để xây dựng kết quả tìm kiếm phù hợp với điều kiện mong muốn

MÔ TẢ

Trong bài này bạn phải hiệu chỉnh mã nguồn của Action Search trong ProductController

để có thể tiếp nhận các yêu cầu từ:

 Nhấp 1 loại: xem hàng theo chủng loại

 Nhấp 1 nhà cung cấp: xem hàng theo nhà cung cấp

 Nhấp chuỗi tìm kiếm: xem hàng có tên chứa chuỗi tìm kiếm

Sau đây là trang hàng hóa khi nhấp liên kết chủng loại Cameras

THỰC HIỆN

 Bước 1: Hoàn thiện _Search.cshtml

 Bước 2: Nâng cấp mã Action Search của ProductController

Bước 1: Hoàn thiện _Search.cshtml

Mở _Search.cshtml trong Views/Shared và hoàn thiện mã nguồn như sau để khi submit form sẽ gọi action Search() của ProductController và truyền theo tham số Search

Bạn cũng đã hoàn thiện Layout với _Category.cshtml và _Supplier.cshtml cũng gọi về action Search() của

ProductController với các mẫu liên kết:

 <a href="/Product/Search?CategoryId=@c.Id">@c.Name</a>

 <a href="/Product/Search?SupplierId=@s.Id">@s.Name</a>

Bước 2: Nâng cấp mã Action Search của ProductController

Để tạo ra kết quả tìm kiếm khác nhau dựa vào tham số yêu cầu (Search, CategoryId và SupplierId), bạn cần hiệu chỉnh mã của action Search() như sau:

BÀI 8 : Kiểm tra lỗi trước và sau đưa

lên server và lưu vào Database

MỤC TIÊU

 Biết cách kiểm lỗi dữ liệu vào trong MVC4

MÔ TẢ

Trong bài này bạn phải tạo trang web thêm mới một mặt hàng Nếu nhập dữ liệu sai thì trang web sẽ thông báo lỗi tức thì với Jquery Trang web này không những kiểm lỗi phía client mà còn kiểm lỗi trên server phòng ngừa khi hacker vượt qua tường rào JavaScript Sau đây là hình ảnh của trang web khi nhập dữ liệu không đúng

THỰC HIỆN

 Bước 1: Bổ sung Annotation vào Model

 Bước 2: Bổ sung action Validate()-GET vào ProductController

 Bước 3: Tạo View Validate.cshtml

 Bước 4: Bổ sung Validate()-POST vào ProductController

Bước 1: Bổ sung Annotation vào Model

Trong MVC4, Model được sử dụng để tiếp nhận dữ liệu vào từ giao diện Nó cũng đồng thời quản lý các thực thể trong CSDL Bây giờ bạn cọn biết một nhiệm vụ khác là kiểm loại dữ liệu vào Với các Annotation đánh dấu trên các thuộc tính kết nối với các trường form, bạn có thể kiểm lỗi một cách hiệu quả cả 2 phía client và server

Sau đây là các annotation được sử dụng để kiểm lỗi:

 Không không để trống Name và Image

 UnitPrice phải là số dương

 Image chỉ chấp nhận ảnh gif, jpg hay png

 Description không vượt quá 2000 ký tự

Bước 2: Bổ sung action Validate() - GET vào ProductController

Action GET là action chỉ được phép gọi với phương thức GET của web để hiển thị form nhập liệu Action này chuyển 2 selectlist để hiển thị lên DropDownList của view

Validate.cshtml

Bước 3: Tạo View Validate.cshtml

View Validate.cshtml là form nhập liệu có kiểm soát lỗi dữ liệu đầu vào dựa vào các qui luật kiểm lỗi đã được cài đặt sẵn trong Model

Bước 4: Bổ sung Validate() - POST vào ProductController

Khi bạn nhấp vào nút [Create] thì form sẽ được kiểm lỗi phía client trước Nếu tất cả điều hợp lệ thì dữ liệu form sẽ được chuyển đến action Validate() – POST để xử lý Tại đây dữ liệu sẽ được kiểm tra lại một lần nữa 2 công việc kiểm lỗi được thực hiện ở đây là

 ValidateAntiForgeryToken: ngăn chặn yêu cầu giả

 ModelState.IsValid: kiểm lỗi dữ liệu của tham số model