01/10/2018, 17:29

Thêm output động vào view trong ứng dụng ASP.NET MVC

Góc Kinh Nghiệm giả sử bạn đã đọc bài viết Cách tạo và hiển thị view trong ứng dụng ASP.NET MVC. Ở bài viết này, chúng ta vẫn sử dụng project tên MyFirstMvcApplication, và controller tên HomeController. Tất nhiên, điểm bao trùm của nền tảng ứng dụng web là khả năng xây dựng và hiển thị output ...

Góc Kinh Nghiệm giả sử bạn đã đọc bài viết Cách tạo và hiển thị view trong ứng dụng ASP.NET MVC.

Ở bài viết này, chúng ta vẫn sử dụng project tên MyFirstMvcApplication, và controller tên HomeController.

Tất nhiên, điểm bao trùm của nền tảng ứng dụng web là khả năng xây dựng và hiển thị output động. Trong ASP.NET MVC, công việc của controller là xây dựng dữ liệu, còn công việc của view là hiển thị dữ liệu dưới dạng HTML. Việc chia tách công việc này giữ cho ứng dụng của bạn gọn ràng. Dữ liệu được truyền từ controller đến view bằng cách sử dụng một cấu trúc dữ liệu được gọi là ViewData.

Ví dụ đơn giản bên dưới, thay đổi phương thức action tên Index() trong HomeController để thêm một chuỗi vào ViewData:

public ViewResult Index()
{
   int hour = DateTime.Now.Hour;
   ViewData["greeting"] = (hour < 12 ? "Chào buổi sáng!" : "Chào buổi trưa!");
   return View();
}

Và kế đến là chỉnh sửa tập tin view tên Index.aspx trong thư mục ~/View/Home/ để hiển thị như bên dưới. Nếu bạn đang sử dụng Visual Studio 2010 và .NET Framework 4 khi bạn tạo mới ứng dụng MyFirstMvcApplication, thì bạn viết như sau:

<body>

   <%:ViewData["greeting"]%>, Góc Kinh Nghiệm chào các bạn (hiển thị từ view)!

</body>

Ngược lại nếu bạn sử dụng Visual Studio 2008 hoặc .NET framework 3.5, thì bạn viết như sau:

<body>

   <%= Html.Encode(ViewData["greeting"]) %>, Góc Kinh Nghiệm chào các bạn (hiển thị từ view)!

</body>

Ghi chú:

Ở dòng lệnh trên, mặc định là bạn dùng cú pháp <%: …%>, bạn đừng thắc mắt về cú pháp này. Trong các phần tới Góc Kinh Nghiệm sẽ giải thích tại sao phải dùng cú pháp này cho MVC view, tạo sao nó lại hoạt động tốt trong MVC view. Bên cạnh đó cũng sẽ so sánh sự khác nhau giữa 2 cú pháp <%: …%> và <%= …%>.

Bây giờ nhất phím F5 để chạy ứng dụng, thu được kết quả như hình bên dưới: