Tạo mới một view trong ASP NET MVC 5
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (890.15 KB, 9 trang )
1/3/14 Tạo mới một View
asp.net.vn/Modules/ASPNETVN.PORTAL.Modules.CMS/Pages/Print.aspx?itemid=986 1/9
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 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).
1/3/14 Tạo mới một View
asp.net.vn/Modules/ASPNETVN.PORTAL.Modules.CMS/Pages/Print.aspx?itemid=986 2/9
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.
1/3/14 Tạo mới một View
asp.net.vn/Modules/ASPNETVN.PORTAL.Modules.CMS/Pages/Print.aspx?itemid=986 3/9
Ở 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.
1/3/14 Tạo mới một View
asp.net.vn/Modules/ASPNETVN.PORTAL.Modules.CMS/Pages/Print.aspx?itemid=986 4/9
Right click tập tin Index.cshtml và chọn View in Browser.
1/3/14 Tạo mới một View
asp.net.vn/Modules/ASPNETVN.PORTAL.Modules.CMS/Pages/Print.aspx?itemid=986 5/9
Kết quả như sau:
1/3/14 Tạo mới một View
asp.net.vn/Modules/ASPNETVN.PORTAL.Modules.CMS/Pages/Print.aspx?itemid=986 6/9
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.
1/3/14 Tạo mới một View
asp.net.vn/Modules/ASPNETVN.PORTAL.Modules.CMS/Pages/Print.aspx?itemid=986 7/9
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:
1/3/14 Tạo mới một View
asp.net.vn/Modules/ASPNETVN.PORTAL.Modules.CMS/Pages/Print.aspx?itemid=986 8/9
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.
1/3/14 Tạo mới một View
asp.net.vn/Modules/ASPNETVN.PORTAL.Modules.CMS/Pages/Print.aspx?itemid=986 9/9
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 thầy giáo 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
In trang
