MVC4Seminar lab1

7 538 9
MVC4Seminar lab1

Đang tải... (xem toàn văn)

Thông tin tài liệu

ThS. CNTT: Nguyễn Nghiệm – nghiemn@fpt.edu.vn 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 – nghiemn@fpt.edu.vn 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 – nghiemn@fpt.edu.vn 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 – nghiemn@fpt.edu.vn 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 – nghiemn@fpt.edu.vn 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 – nghiemn@fpt.edu.vn 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 – nghiemn@fpt.edu.vn 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

Ngày đăng: 17/03/2014, 00:30

Mục lục

  • THỰC HIỆN

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

    • Bước 4: Xây dựng lớp UserInfo

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

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan