3. TẠO MỚI MỘT VIEW

Trong phần này, chúng ta tiếp tục cập nhật lớp HelloWorldController để sử dụng với hiển thị một file khuôn mẫu giao diện (View Template File) để hiểu rõ việc tạo ra một HTML trả về để hiển thị phía client (browser).

Chúng ta sẽ tạo ra một khuôn mẫu giao diện sử dụng cơ chế Razor view engine. Razor là một dạng  khuôn mẫu giao diện có phần mở rộng là .cshtml, nó cung cấp cơ chế rất gọn gàng và mạnh mẽ trong việc tạo ra một HTML thông qua ngôn ngữ C#. Razor tối thiểu hóa việc sử dụng các thẻ và số lượng ký tự trong việc tạo ra HTML.

Hiện tại thì phương thức Index trả về một chuỗi được code cố định trong lớp controller. Giờ chúng ta sẽ thay đổi phương thức Index để nó trả về một View object, và hiển thị nó:

Phương thức Index trên sử dụng một khuôn mẫu giao diện để phát sinh ra HTML trả về phía client (browser). Các phương thức điều khiển (còn được gọi là các action methods), như phương thức Index ở trên, nó trả về một ActionResult (hay còn gọi là một lớp phát sinh từ ActionResult).

Right click vào thư mực Views\HelloWorld và click Add, sau đó click MVC 5 View Page with (Layout Razor).

Tại cửa sổ Specify Name for Item, gõ Index, rồi click OK.



Tại cửa sổ Select a Layout Page, chọn mặc định là _Layout.cshtml rồi click OK.

Ở cửa sổ trên, ở bên trái thư mục Views\Shared được chọn. Nếu chúng ta có một giao diện tùy biến khác thì nó nằm trong thư mục khác, do vậy có thể chọn cái khác đó. Tuy nhiên chúng ta sẽ nói về phần này ở các phần sau.

Tập tin MvcMovie\Views\HelloWorld\Index.cshtml được tạo như sau.

Và đoạn code Razor như sau.

Right click tập tin Index.cshtml và chọn View in Browser.

Kết quả như sau:

Thay đổi Views và Layout Pages (giao diện của trang)

Trước tiên, chúng ta thử thay đổi tên ứng dụng "Application name" ở liên kết trên cùng của trang. Phần này nó hiển thị hầu hết ở các trang. Tự ra nó chỉ nằm ở một chỗ duy nhất trong project này. Vào thư mục /Views/Shared ở Solution Explorer và mở tập tin _Layout.cshtml. Tập tin này được gọi là layout page và nó nằm ở thư mục dùng chung mà các trang cùng sử dụng.

Các khuôn mẫu giao diện (Layout templates) cho phép chúng ta bố trí các thành phần giao diện của site trong cùng một vị trí và nó áp dụng cho tất cả các trang. Tìm đến dòng có chữ @RenderBody(). RenderBody là một thành phần giữ chỗ để cho các trang hiển thị ở chính chỗ nó giữa. Ví dụ, nếu chúng ta có liên kết About, thìViews\Home\About.cshtml view được rendered bên trong phương thức RenderBody.

Chúng ta sẽ thay đổi nội dung của phần tử title bằng cách thay đổi liên kết ActionLink trong layout template từ chuỗi "Application name" sang chuỗi "MVC Movie" và controller từ Home sang Movies. Sau khi xong ta sẽ có như hình sau:

Tập tin MvcMovie\Views\HelloWorld\Welcome.cshtml được tạo ra.

Thay thế các nội dung trong tập tin Welcome.cshtml.

Chạy ứng dụng và duyệt URL: http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

Luc này dữ liệu được lấy từ URL và truyền vào controller thông qua model binder. Dự liệu thông qua controller đổ vào ViewBag object và chuyển object này sang view. Sau đó view sẽ hiện thị dữ liệu HTML đến người dùng (browser).

Trong ví dụ này, chúng ta đã dùng ViewBag object để truyền dữ liệu từ controller đến view. Bài sau, chúng ta sẽ học cách dùng một view model để truyền dữ liệu từ controller đến view.

(Dịch bởi giảng viên NGÔ THANH TÙNG - SOFTECH APTECH từ bài viết của tác giả Rick Anderson)

Download bài viết bản PDF