MVC4Seminar lab1

ThS. CNTT: Nguyễn Nghiệm – Trang 1

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 2: Tạo HomeController
 Bước 3: Thiết kế View Index.cshtml
 Bước 4: Xây dựng lớp UserInfo

ThS. CNTT: Nguyễn Nghiệm – Trang 2

 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ệ.

ThS. CNTT: Nguyễn Nghiệm – Trang 3

Bước 2: Tạo HomeController

Hình: 4: Thêm Controller

Hình 5: Đặt tên HomeController

ThS. CNTT: Nguyễn Nghiệm – Trang 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ê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

ThS. CNTT: Nguyễn Nghiệm – Trang 5


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.

ThS. CNTT: Nguyễn Nghiệm – Trang 6


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ự
độ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

ThS. CNTT: Nguyễn Nghiệm – Trang 7

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:

Hình 12: Mã Razor của view SayHello.cshtml