1. Giới thiệu View
Trong ứng dụng Asp.Net MVC, Views là các thành phần dùng để hiển thị giao diện người dùng (UI). Views có thể hiển thị cả các thông tin tĩnh và động, View cũng có thể hiển thị các form cho phép người sử dụng có thể cập nhật thông tin trực tiếp vào các form đó. Các Controller trong ứng dụng có thể truyền dữ liệu cho View thông qua các đối tượng như
ViewData, ViewBag, TempData.
Asp.Net MVC lưu trữ các View trong thư mục
Views của ứng dụng, các phương thức Action khác nhau của một lớp controller sẽ sinh ra các View khác nhau, thư mục chứa View trong ứng dụng có thể chứa nhiều các thư mục con khác, mỗi controller sẽ tạo tương ứng với 1 thư mục
View có cùng tên với
Controller. Ví dụ
HomeController sẽ tạo ra thư mục Views > Home, các phương thức action trong HomeController như About, Contact, Index sẽ tạo ra các trang View tương ứng trong thư mục
Views > Home. Controller Student sẽ tạo ra thư mục
Views > Student.
Hình số 1 : Thư mục View tương ứng với Controller
2. View Engine.
View Engine là một phần của MVC Framework. View engine cho phép tạo ra các trang HTML kết hợp với các đoạn code mà các View engine hỗ trợ nhằm cho trình duyệt có thể hiểu và hiển thị thông tin. Asp.Net MVC Framework cung cấp 2 view engine cho phép sinh ra ra các trang HTML trong View đó là Web Form View Engine và Razor View Engine.
- Web Form View Engine : View Engine cho phép tạo ra các trang Views có cú pháp giống như Asp.Net Webform. Đây là View engine mặc định của Asp.net MVC với phiên bản 1.0 và 2.0.
- Razor View Engine : Từ phiên bản Asp.net MVC 3, Microsoft lựa chọn View Engine mặc định là Razor View Engine, để sử dụng Razor lập trình viên cần phải cú pháp của ngôn ngữ đánh dấu của Razor nhằm kết hợp với cú pháp HTML ở phía client của ứng dụng.
2.1. Tổng quát Razor View Engine
Raror: là một View Engine mới được giới thiệu trong ASP.NET MVC 3. Đây được xem là một Engine khá tiên tiến và là lựa chọn mới cho những ai đang phát triển ứng dụng ASP.NET nói chung và chọn ASP.NET MVC nói riêng. Ngày nay khi phát triển các ứng dụng Asp.Net MVC, View Engine này được Microsoft lựa chọn mặc định khi tạo View.
Lợi ích khi sử dụng Razor :
- Cú pháp Razor là đơn giản và xúc tích, đòi hỏi một số lượng tối thiểu các tổ hợp phím.
- Việc tìm hiểu Razor tương đối dễ dàng vì nó dựa trên ngôn ngữ C# và Visual Basic.
- Visual Studio bao gồm IntelliSense và mã cú pháp Razor được màu hóa.
- Razor views có thể kiểm tra từng đơn vị mà không đòi hỏi bạn phải chạy các ứng dụng hoặc phải chạy web server.
Các file trong Razor View có đuôi mở rộng là .cshtml (Sử dụng ngôn ngữ C#) hoặc .vbhtml (Sử dụng ngôn ngữ VB)
2.2 Tạo mới View
Trong khi tạo ứng dụng Asp.Net MVC, lập trình viên thường phải tạo các View nhằm giao tiếp với người sử dụng tương ứng với các phương thức Action. Khi tạo mới ứng dụng Asp.net MVC, thư mục Views mặc định được tạo sẵn trong project.
Visual Studio .Net cung cấp cách thức rất đơn giản để tạo View, trong các ví dụ ở loạt bài số 1, bài số 2 tôi đã hướng dẫn rất chi tiết về cách tạo View tương ứng với các phương thức Control. Ở bài này tôi sẽ nhắc lại quá trình tạo View để các bạn nắm rõ hơn.
Quá trình tạo View tương ứng với các phương thức Action trong controller chúng ta sẽ thực hiện qua các bước sau :
- Bước 1 : Click chuột phải trong phạm vi của phương thức Action mà chúng ta muốn tạo View.
Ví dụ : Tạo View từ phương thức AllStudentList của Control Student
Hình số 2 : Tạo View tương ứng với phương thức AllStudentList
- Bước 2 : Lựa chọn Add View từ Context Menu, khi lựa chọn Add View và cập nhật các thông số phù hợp cho View:
Hình số 3 : Cập nhật các thông số phù hợp cho View
Lựa chọn Tên View, template và các thông số phù hợp khác cho View. Trong trường hợp này : Template chọn List (Mục tiêu hiển thị danh sách sinh view), Model class chọn Student tương ứng với Model trong ứng dụng.
- Bước 3 : Xem file View tương ứng trong thư mục Views của ứng dụng, trong trường hợp này là file Views > AllStudentList.cshtml
Hình số 4 : Thư mục chứa View
- Bước 4 : Chỉnh sửa file View tương ứng trong thư mục Views của ứng dụng, trong trường hợp này là file Views > AllStudentList.cshtml.
Hình số 5 : Chỉnh sửa file View
Nội dung file View AllStudentList.cshtml cho chúng ta thấy nội dung của HTML và code của Razor được chộn lẫn, cú pháp Razor rất đơn giản, các biểu thức Razor đều bắt đầu bởi @,
@Html là lớp Help cho phép tạo ra các Html control tương ứng với yêu cầu nghiệp vụ bài toán.
Hình số 6 : Razor và HTML
- Bước 5 : Chạy thử chương trình và điều chỉnh file View nếu thấy cần thiết.
Hình số 7 : Kết quả chạy chương trình tương ứng với View