MVC4Seminar lab1

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ụn

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

Hình 1: Mới chạy Hình 2: Sau khi nhấp nút [Say Hello]

THỰC HIỆN

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

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

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

Vai trò của các thành phần trong project sắp xây dựng

 M (Model)=UserInfo

 V (View)=Index.cshtml

 C (Controller)=HomeController

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:

Hình 3: Mở project mẫu

Để 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

Hình: 4: Thêm Controller

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ên action>>Add View>>Đặt tên (nên giữ nguyên tên gợi ý trên hộp thoại)

Hình 6: Tạo view Index.cshtml

Hình 7: Mã Razor của Index.cshtml

Hình 8: Giao diện được sinh ra từ mã Razor của Index.cshtml

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

Hình 9: Thêm lớp UserInfo vào thư mục Models

Hình 10: Mã của lớp UserInfo 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ự

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)

Hình 11: Mã nguồn action SayHello()

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: