Xem mẫu
- 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.rar
Xâ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:
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()
- 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.
nguon tai.lieu . vn
