MVVM: Model - View - View Model, đây là một mô hình kiến trúc dùng trong công nghệ phần mềm được phát triển từ Microsoft và chủ yếu dựa trên mô hình MVC. Xuất phát từ như cầu thực tế, sau khi Microsoft giới thiệu hai nền tảng WPF, Silverlight. Hôm nay, mô hình này được dùng phổ biến cho lập trình Windows Phone, Windows 8.

Tìm hiểu mô hình MVVM cơ bản trong lập trình WPF

Tương tác giữa 3 class trong MVVM. (Source MSDN)

The View Class:

- Có trách nhiệm định nghĩa cấu trúc và diện mạo của chương trình mà người dùng thấy trên màn hình. Mã code-behind được xem là lý tưởng khi chỉ có Constructor đi kèm với lời gọi

InitializeComponent();

- Tuy nhiên, khi giao diện cần xử lý mà làm việc với  XAML là khó khăn, bạn có thể dùng code-behidn để xử lý. Như xử lý animations phức tạp hoặc những điều khác cần đến code trực tiếp (C#/VB).
- Views tác động đến ViewModel thông qua DataContext.
- Các Controls trong View là dữ liệu ràng buộc để các Properties và Command được tiếp xúc ở ViewModel
- Bạn có thể cung cấp các Validation rules khi tiếp nhận dữ liệu đầu vào từ người dùng trên Views.

The ViewMode Class:

- ViewModel tham chiếu đến lớp Model.
- ViewModel không tham chiếu đến lớp View.
- Không định nghĩa giao diện của chương trình nên tất nhiên không được chứa lớp cơ sở nào của WPF.
- ViewModel triển khai các Properties và Command mà lớp View ràng buộc. Nó sẽ thông báo của bất kỳ sự thay đổi nào tới View thông qua sự kiện notification qua iterface như INotifyPropertyChanged và INotifyCollectionChanged.
- ViewModel là trung gian giữa View và Model giúp chúng tương tác qua lại. Nó chuyển đổi dữ liệu để View dễ dàng sử dụng hoặc cũng có thể bổ sung các thuộc tính không có trên Model.
- Ngoài ra, ViewModel cũng có thể ràng buộc dữ liệu đầu vào thông qua các interface IDataErrorInfo và INotifyDataErrorInfo. Và quản lý các sự kiện trên Views

The Model Class:

- Model có nhiệm vụ quản lý dữ liệu của ứng dụng, bao gồm cả nghiệp vụ logic.
- Model không tác động  đến View và ViewModel. Tất nhiên là không phụ thuộc vào bất cứ hoạt động nào của 2 lớp trên.
- Model cũng có thể xác định ràng buộc dữ liệu đầu vào
- Model thường kết hợp với Service hoặc Repository để đóng gói  data access hoặc caching.

Ví Dụ Đơn Giản MVVM Trong WPF

Chúng ta sẽ thực hành một mẫu ví dụ đơn giản nhưng cụ thể của mô hình MVVM trong WPF.
Video thực hành (No  sound)

Tạo Model

Tạo New Project với dự án Library
Trong project này ta sẽ tạo các thực thể dữ liệu: Departments Class và Employee Class. Tiếp theo tạo lớp DbContext. Các bước tương tự như bài trước, sau đó ta cần thêm lớp xử lý logic cho chương trình. Cụ thể ở đây là các hàm CRUD, ta tạm goi lớp này là BusinessLogicContext.

Cần cài đặt EF cho dự án này: Install-Package EntityFramework

Tạo ViewModel

Tạo New Project với dự án Library, cần tham chiếu tới dự án Model bên trên.
Trong project này ta tạo ra 2 thư mục nhằm có cái nhìn rõ ràng.

• Thư mục BaseClass: Chứa các lớp nhằm đưa các triển khai của ICommand, INotifyPropertyChanged tách biệt, ta có thể tái sử dùng cho các lớp ViewModel khác mà không cần phải triển khai lại.
• Thư mục ViewModel: Chứa lớp ViewModel xử lý cho các chức năng hay các thực thể cụ thể. Trong các lớp này, tái sử dụng các chức năng từ BaseClass như ICommand để gửi và tiếp nhận lệnh giữa ViewModel và View. INotifyPropertyChanged cung cấp thông báo thay đổi dữ liệu giữa VM và View. 

Tạo View

Tạo New Project với dự án WPF Application.
Phần giao diện chúng ta sử dụng lại từ bài trước như đã đề cập bên trên. Sau đó cung cấp các ràng buộc DataBinding mới.
Trong App.xaml.cs là nơi ta khai báo nguồn tài nguyên cho DataContext của giao diện sử dụng. (Ta có thể viết trong lớp *.cs Code-Behind của giao diện).
Xác định chuỗi kết nối Connecstring trong App.config. Bạn cũng cần tham chiếu EntityFramework cho dự án này.
Nếu bạn muốn nạp dữ liệu mẫu, có thể dùng Enable-Migrations. Tuy nhiên do ta có lớp DbContext nằm trên Model Project và chuỗi Connecstring nằm trên View Project, nên ta cần khai báo lệnh như sau để  Enable-Migration trên Model Projects:

Enable-Migrations -ProjectName MVVMExample.Models -StartUp MVVMExample.View

---

Bạn có thể tải về mã nguồn bên dưới. Ví dụ thực hiện trên Visual Studio 2013. .NET Framework 4.5. Trong trường hợp gặp khó khăn khi build chương trình, bạn cần Enable Nuget Package Restore bằng cách chuột phải lên Solution của bạn như hình bên dưới đây. Sau đó Rebuild chương trình...

---

Created: 13/11/2014

The MVVM Pattern: Made Simple for WPF

Related Tags :
WritingObsolete