intTypePromotion=3

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

Chia sẻ: Le Thanh Tong | Ngày: | Loại File: PDF | Số trang:35

0
279
lượt xem
99
download

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

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tài liệu Xây dựng website bán hàng WVC 4 gồm các nội dung chính: say hello, kiểm tra lỗi trước và sau lên server và lưu vào Database, tìm kiếm sẩn phẩm với nhiều tùy chọn hoàn thiện Partialview, Master - details, trình bày và phân trang sản phẩm, ứng dụng Crud, ánh xạ cơ sở dữ liệu.

Chủ đề:
Lưu

Nội dung Text: Xây dựng website bán hàng MVC 4

  1. 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 
  2. 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
  3. 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
  4. 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).
  5. 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.
  6. 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)
  7. 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.rar Xây dựng website bán hàng MVC 4 - BÀI 2: ÁNH XẠ CSDL
  8. 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:
  9. 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
  10. 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
  11. 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
  12. THỰC HIỆN
  13.  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:
  14. 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/");
  15.  Để bổ sung một bản ghi vào CSDL: o db.Suppliers.Add(model); o db.SaveChanges();  Để cập nhật một bản ghi vào CSDL: o db.Entry(model).State= EntityState.Modified; o db.SaveChanges();  Để xóa một bản ghi khỏi CSDL: o db.Suppliers.Remove(model); o db.SaveChanges();  Để 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()
  16. Bước 2: Khai báo chuỗi kết nối
  17. 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.

CÓ THỂ BẠN MUỐN DOWNLOAD

Đồng bộ tài khoản