Escolar Documentos
Profissional Documentos
Cultura Documentos
MỤC TIÊU
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
Để 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ả.
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:
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
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.
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.
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
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
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:
Để 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
Products.Count là tổng số bản ghi được đưa vào để phân trang
Trong view Search.cshtml, bạn chỉ cần bổ sung thanh điều hướng phân
trang vào đầu và cuối danh sách là được.
Xây dựng website bán hàng MVC 4 -
BÀI 5: MASTER-DETAILS
MỤC TIÊU
Khai thác quan hệ thực thể kết hợp để trình bày dạng master-details
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 chi tiết một
mặt hàng và thông qua thực thể kết hợp để lấy và trình bày các mặt hàng cùng loại và
hàng cùng nhà cung cấp. Trang web được mô tả như các hình sau đây.
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ổ 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
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
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ừ:
THỰC HIỆN
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>
Để 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:
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
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.
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.
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à