Tạo View trong ứng dụng ASP.NET MVC

1. Giới thiệu Truyền dữ liệu từ Controller đến View
Trong ứng dụng Asp.Net MVC,  Controller thường xử lý các vấn đề liên quan tới nghiệp vụ của ứng dụng và trả về kết quả cho người sử dụng thông qua View. Tuy nhiên trong một số trường hợp, lập trình trình viên cần truyền dữ liệu trực tiếp từ Controller đến View. Để thực hiện vấn đề này, Asp.Net MVC hỗ trợ các đối tượng :

  • ViewBag : Là một đối tượng kiểu dynamic (một kiểu dữ liệu động của được giới thiệu ở .NET Framework 4.0), với kiểu này bạn có thể gán bất cứ thuộc tính nào cho nó. Sử dụng đối tượng này để truyền dữ liệu từ Controller đến View
  • ViewData : là đối tượng có kiểu từ điển, giá trị được thiết lập thông qua cặp giá trị <key,value>. Sử dụng đối tượng này để truyền dữ liệu từ Controller đến View
  • TempData : là đối tượng có kiểu từ điển, giá trị được thiết lập thông qua cặp giá trị <key,value>, đối tượng dùng để truyền dữ liệu từ controller/action tới một controller/action khác.

2. ViewData
Lập trình viên có thể sử dụng đối tượng ViewData để truyền dữ liệu từ Controller đến View, đối tượng ViewData có kiểu từ điển và được dẫn xuất từ lớp ViewDataDictionary, đối tượng ViewData chứa cặp giá trị <key,value>, sử dụng key để truy vấn tới value của đối tượng này.
Một số các thuộc tính của ViewData

  • Vòng đời của đối tượng ViewData tồn tại trong suốt quá trình khi thực hiện request hiện tại.
  • Giá trị của ViewData trở thành Null khi Request được điều hướng sang Request khác.
  • Khi ViewData có kiểu dữ liệu phức tạp, để tránh lỗi khi xử lý, lập trình viên cần thực hiện truyển kiểu khi sử dụng.

Cú pháp sau mô tả quá trình thiết lập thông tin cho đối tượng ViewData
Cú pháp

ViewData[<key>] = <Value>;

Mô tả

  • Key : Có kiểu String, vai trò nhằm định danh đối tượng ViewData khi sử dụng.
  • Value : Chứa giá trị của đối tượng ViewData, để truy vấn đến Value bắt buộc phải thông qua key.

Ví dụ 1 : Minh họa sử dụng đối tượng ViewData lưu trữ dữ liệu có kiểu dữ liệu cơ bản :
Để thực hiện ví dụ, chúng ta tạo ứng dụng Empty Asp.Net MVC, sau đó tạo HomeController. Trong phương thức Index trực thuộc Controller sử dụng 2 đối tượng ViewData lưu thông tin Message và Datetime, sau đó hiển thị dữ liệu của 2 đối tượng này tại View.
Để thực hiện, chúng ta cần thực hiện qua các bước sau :

  • Bước 1 : Bổ dung 2 đối tượng ViewData tại phương thức Index trực thuộc HomeController :
tao-view-trong-asp-net-1
Hình số 1 : Sử dụng đối tượng ViewData
  • Bước 2 : Tạo View tương ứng với phương thức Index trực thuộc HomeController, sau đó truy vấn đến các đối tượng ViewData thông qua cú pháp @ViewData[Key];
  tao-view-trong-asp-net-2
Hình số 2 : Truy vấn đối tượng ViewData
  • Bước 3 : Chạy chương trình nhằm thực hiện kiểm tra kết quả truy vấn
tao-view-trong-asp-net-3
Hình số 3 : Kết quả truy vấn đối tượng ViewData

Ví dụ 2 : Minh họa sử dụng đối tượng ViewData lưu trữ dữ liệu có kiểu dữ liệu phức tạp, để mô tả ví dụ, chúng ta sử dụng lại ứng dụng Asp.Net MVC tại Ví dụ 1, sau đó chúng ta bổ sung thêm các thông tin theo các bước sau :

  • Bước 1 : Tạo lớp Student trực thuộc Model, có các thuộc tính được mô tả như sau:
tao-view-trong-asp-net-4
Hình số 4 : Tạo class Student trực thuộc Model
  • Bước 2 : Tạo Controller Student và bổ sung nội dung sau vào phương thức Index.
tao-view-trong-asp-net-5
Hình số 5 : Tạo đối tượng ViewData lưu thông tin Danh sách Student
  • Bước 3 : Tạo View tương ứng với phương thức Index trực thuộc StudentController, sau đó truy vấn đến các đối tượng ViewData thông qua cú pháp @ViewData[Key]; Chú ý tại View phải sử dụng vòng lặp để điển thị thông tin
tao-view-trong-asp-net-6
Hình số 6 : Truy vấn ViewData tại View
  • Bước 4 : Chạy chương trình nhằm thực hiện kiểm tra kết quả truy vấn đối tượng ViewData.
tao-view-trong-asp-net-7
Hình số 7 : Kết quả chạy chương trình

3. ViewBag
Đối tượng ViewBag có kiểu dynamic, kiểu dữ liệu động, giống như ViewData, đối tượng này để truyền dữ liệu từ Controller sang View, ViewBag chỉ tồn tại ứng với Request hiện tại và trả về giá trị null khi chuyển sang Request khác. Ngoài ra do ViewBag có kiểu dynamic do vậy với các kiểu dữ liệu phức tạp không cần chuyển kiểu như ViewData và TempData.
Cú pháp sau mô tả quá trình thiết lập thông tin cho ViewBag
Cú pháp

ViewBag.<PropertyName> = <Value>;

Mô tả

  • PropertyName: Có kiểu String, chính là thuộc tính của ViewBag.
  • Value : Chứa giá trị của thuộc tính ViewBag.

Ví dụ :
Minh họa việc sử dụng đối tượng ViewBag lưu trữ thông tin với  kiểu dữ liệu đơn giản. Tạo ContactControl trong ứng dụng Asp.Net MVC, sau đó trong phương thức Index trực thuộc Controller, chúng ta sử dụng ViewBag lưu thông tin Message và Datetime vào thuộc tính của ViewBag, hiển thị dữ liệu của 2 đối tượng này tại View.
Để thực hiện, chúng ta cần thực hiện qua các bước sau :

  • Bước 1 : Tạo ContactController :
  • Bước 2 : Tạo 2 thuộc tính của ViewBag tại phương thức Index trực thuộc ContactController:
tao-view-trong-asp-net-8
Hình số 8 : Tạo 2 thuộc tính của ViewBag
  • Bước 3 : Tạo View tương ứng với phương thức Index trực thuộc ContactController, sau đó truy vấn đến ViewBag thông qua thuộc tính bằng  cú pháp @ViewBag.PropertyName;
  tao-view-trong-asp-net-9
Hình số 9 : Truy vấn thuộc tính của ViewBag
  • Bước 4 : Chạy chương trình nhằm thực hiện kiểm tra kết quả truy vấn
tao-view-trong-asp-net-10
Hình số 10 : Kết quả truy vấn thuộc tính của ViewBag
Tạo View trong ứng dụng ASP.NET MVC
5 (100%) 10 votes

Add Comment