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

Tham khảo:  http://sinhvienit.net/forum/xay-dung-website-ban-hang-mvc-4-bai-1-say-hello.290438.html