Học lập trình Asp.Net MVC 5.0 - View trong Asp.Net MVC - Visual Studio 2015 - Phần 4 - Bài số 3

Học lập trình Asp.Net MVC 5.0 - View trong Asp.Net MVC - Visual Studio 2015 - Phần 4 - Bài số 3
access_time 12/16/2015 12:00:00 AM
person Nguyễn Mạnh Hùng
1. Giới thiệu Razor Engine
Như chúng ta đã biết, từ phiên bản Asp.net MVC 3, Microsoft lựa chọn View Engine mặc định là Razor View Engine, khi View được yêu cầu bởi Http Request thì Razor View Engine thực hiện biên dịch trang View này.
Khi sử dụng Razor View Engine, lập trình viên không cần phải học một ngôn ngữ lập trình mới, mà thay vào đó Razor cung cấp các mẫu nhằm kết hợp giữa cú pháp của ngôn ngữ đánh dấu siêu văn bản (HTML) và ngôn ngữ lập trình như C#, VB ở nội dung của các trang View. Với các lập trình viên đã quen với các ngôn ngữ C# hoặc VB thì học và làm quen với Razor View Engine là rất đơn giản.
2. Cú pháp Razor
Để thông dịch các đoạn mã được viết bởi các ngôn ngữ như C#, VB trong các trang View, Razor đưa ra những quy tắc nhằm để xác định các đoạn mã đó được biên dịch ở phía Server (server-side code) và các đoạn mã đánh dấu (markup code) được thực hiện biên dịch ở phía client (như javascript, css, html, …), Razor sử dụng ký tự @ nhằm phân biệt giữa server-side code và markup code.
Khi tạo ra các Razor view chúng ta cần chú ý như sau : 2.1. Khối mã lệnh
Razor hỗ trợ lập trình viên viết các khối mã lệnh tại các View. Một khối mã lệnh Raror là một phần của View, và nó được viết bằng các ngôn ngữ C# hoặc VB.
Cú pháp @{
<code>
}

Mô tả Ví dụ
Hình số 1 : Khối mã lệnh Razor View
Kết quả khi chạy chương trình :
 
Hình số 2 : Kết quả chạy chương trình với khối lệnh Razor
2.2. Biểu thức Inline - Inline Expression
Tương tự như các khối lệnh, Razor sử dụng @ để đánh dấu biểu thức Inline.
Ví dụ
Hình số 3 : Biểu thức Inline
 Kết quả chạy chương trình :
Hình số 4 : Kết quả chạy chương trình với Biểu thức Inline
2.3. Biến
Giống như các ngôn ngữ lập trình C#, VB, Razor sử dụng từ khóa var cung cấp cách thức để khai báo biến.
Ví dụ : Mô tả cách khai báo biến với từ khóa var và cách sử dụng biến trong view
Hình số 5 : Khai báo và sử dụng biến trong Razor
Kết quả chạy chương trình
Hình số 6 : Kết quả chạy chương trình với biến trong Razor
2.4. Vòng lặp
Giống như ngôn ngữ lập trình C#, khi chọn C# thực hiện tại Razor view engine, tại view hỗ trợ các cấu trúc lặp như sau : Do cấu trúc vòng lặp đã quá quen thuộc đối với các lập trình viên, do vậy chúng ta sẽ lấy ví dụ về các cấu trúc vòng lặp này. Ở đây chúng ta chỉ lấy 1 ví dụ về cấu trúc vòng lặp while
Ví dụ :
Hình số 7 : Cấu trúc vòng lặp while
Kết quả chạy chương trình
Hình số 8 : Kết quả chạy chương trình với cấu trúc while
2.5. Điều kiện if-else, switch
Trong quá trình xây dựng ứng dụng asp.net mvc, quá trình hiển thị và xử lý dữ liệu động tại View là không thể tránh khỏi, nội dung dữ liệu động là phụ thuộc vào điều kiện hiển thị. Trong trường hợp này lập trình viên có thể sử dụng cấu trúc if-else hoặc switch để giải quyết vấn đề này.
Ví dụ : Cấu trúc if-else
Hình số 9 : Cấu trúc điều kiện if-else
Kết quả chạy chương trình :
Hình số 10 : Kết qủa chạy chương trình với cấu trúc điều kiện if-else
2.6. Thao tác với dữ liệu tập hợp
Razor view engine cho phép lập trình viên có thể thao tác với dữ liệu tập hợp như Array, List<T>,… Các thao tác với dữ liệu tập hợp tại View bao gồm : Khởi tạo dữ liệu tập hợp, truy vấn và hiển thị dữ liệu tập hợp …
Ví dụ : Thao tác với dữ liệu tập hợp
Hình số 11 : Thao tác với dữ liệu tập hợp
Kết quả chạy chương trình :
Hình số 12 : Kết quả hiển thị với dữ liệu tập hợp
2.7. Model
Sử dụng @model để thao tác với đối tượng model ở bất kỳ đâu trong View, đây là thao tác phổ biến nhất trong lập trình asp.net mvc.
Ví dụ :  Tại Model tạo class Student (StudentID, StudentName, Age). Sau đó tại HomeController tạo phương thức StudentInfor với mục tiêu tạo View tương ứng để hiển thị thông tin chi tiết về Student. Quá trình thực hiện qua các bước sau :
Hình số 13 : Phương thức Action StudentInfor
Hình số 14 : Tạo View và sử dụng Model để truy vấn dữ liệu
Kết quả chạy chương trình :
Hình số 15 : Kết quả hiển thị thông tin khi sử dụng View

vertical_align_top
share
Chat...