RSSAsp.net MVC

MVC 4 - Bài 1 : Say Hello

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

[IMG]

MỤC TIÊU

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
  • sayhello

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

sayhello_MVC 
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:

mo_Project

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

hinh4_mvc
hinh5_mvc

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).

hinh6_mvc

 

hinh7_mvc

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.

hinh8_mvc
hinh9_mvc

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)

hinh10_mvc

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:

hinh11_mvc
 
Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu