TUẦN 07: THỰC HÀNH TẠO FORM VỚI MODEL CLASS

Bước 00: Tạo thư mục tên là HoTenSV vào ổ đĩa làm bài (HoTenSV là họ và tên của sinh
viên làm bài không có dấu tiếng việt và khoảng trắng)
Bước 01: Khởi động Visual Studio 2019, tạo Project tên là Buoi07 lưu vào thư mục
HotenSV.
Bước 02: Mở View Index.cshtml trong thư mục Home và code lại như sau:

Nhấn F5 chạy chương trình thì xuất hiện màn hình sau sau:

Bước 03: Model Class – Tạo các class sau đây:

3.1/ Circle class
3.2/ Rectangle class

3.3/ Triangle class

Bước 04: Đối với controller của một mục tiêu, chúng ta sẽ sử dụng 2 ActionResult khác
nhau cho 2 phương thức thương tác giữa client và server là HttpGet vào
HttpPost. Ngoài ra, để truyền thông tin cho View, ta sẽ sử dụng đối tượng
ViewBag, riêng với ActionResult phục vụ cho HttpPost, chúng ta sẽ khai báo
Anotaion ValidateAntiForgeryToken cho phương thức
4.1/ CircleController

4.2/ RectangleController
4.3/ TriangleController

Bước 05: Views: Để tạo view cho chức năng, tại ActionResult trong controller tương ứng,
nhấn nút phải chuột chọn Add view
5.1/ Circle View
Mở CircleController.cs, Right click vào Action Index >> Add View >> MVC 5 View >> Add
và khai báo như sau:

Và code cho View này như sau:

Nhấn F5 chạy chương trình thì xuất hiện:

Kiểm Thử:
 Sinh viên nhập một số nguyên bấm nút
“Calculate” và quan sát trên màn hình.
 Sinh viên nhập một số thực bấm nút
“Calculate” và quan sát trên màn hình.
 Bấm nút “Continue…” và quan sát trên
màn màn hình

5.2/ Rectangle View

Mở RectangleController.cs, Right click vào Action Index >> Add View >> MVC 5 View >>
Add và khai báo như sau:

Và code cho View này như sau:

Nhấn F5 chạy chương trình

Kiểm Thử:
 Sinh viên nhập một số nguyên bấm nút
“Calculate” và quan sát trên màn hình.
 Sinh viên nhập một số thực bấm nút
“Calculate” và quan sát trên màn hình.
 Bấm nút “Continue…” và quan sát trên
màn màn hình

5.3/ Triangle View

Mở TriangleController.cs, Right click vào Action Index >> Add View >> MVC 5 View >>
Add và khai báo như sau:

Và Code View này như sau:

Nhấn F5 chạy chương trình

Kiểm Thử:
 Sinh viên nhập một số nguyên bấm nút
“Calculate” và quan sát trên màn hình.
 Sinh viên nhập một số thực bấm nút
“Calculate” và quan sát trên màn hình.
 Bấm nút “Continue…” và quan sát trên
màn màn hình

Bước 06: Mở file _Layout.cshtml và sữa lại các Action Link như sau:

Nhấn F5 chạy chương trình: (thử bấm vào các link: “Hình tròn”, “Hình tam giác”, …