Cơ bản về MVVM (Model – View – ViewModel) Pattern

View - ViewModel - Model patternKể từ khi Microsoft giới thiệu hai nền tảng phát triển ứng dụng mới là WPF và Silverlight, đã có nhiều thay đổi trong việc xử lý sự kiện và binding dữ liệu, giữa các tầng của ứng dụng với nhau. Qua đó, hầu hết các công việc của tầng kết hợp với lớp presentation. Điều này làm nảy sinh ra nhu cầu phải có một mô hình phát triển ứng dụng mới phù hợp hơn. Và do đó, Model – View – ViewModel (MVVM) pattern ra đời và ngày càng trở nên phổ biến.

Đa số các ứng dụng thuộc bất kì nền tảng nào cũng có thể chia thành hai phần: giao diện (View) và dữ liệu (Model). Vì việc tách riêng các phần này, cần phải có một phần trung gian nào đó nối kết hai phần này lại, và chúng tạo nên một mô hình (pattern).

Quen thuộc và phổ biến nhất với chúng ta là mô hình MVC (Model – View – Controller) . Có thể nói MVC là một mô hình tiêu chuẩn bởi sự logic và hợp lý của nó. Điều này làm cho việc xuất hiện một mô hình phát triển ứng dụng mới có thể khiến bạn bỡ ngỡ.

Trước khi tìm hiểu về mô hình MVVM này, ta cùng điểm qua một số tính năng mới trong xu hướng phát triển ứng dụng hiện nay.

Data Binding

Đây là một khái niệm quen thuộc và làm ta nhớ lại những rắc rối mà chúng đem lại trong những nền tảng trước đây và thậm chí trong .NET. Tuy nhiên từ khi WPF ra đời, việc sử dụng kĩ thuật này thực sự chuyển sang một bước tiến mới, thỏa mãn những điều mà hầu hết các lập trình viên mong đợi. Nếu như tìm hiểu sâu về tính năng này, bạn sẽ không ngạc nhiên gì khi nhiều người nói rằng data binding là thành phần cốt lỗi tạo nên các cơ chế hoạt động trong WPF.

Bạn có thể binding dữ liệu nguồn và đích từ bất kì đối tượng nào: như cửa sổ, các control đơn giản như TextBlock cho đến một usercontrol phức tạp. Tất cả đều được thực hiện dễ dàng, nhanh chóng, hiệu quả và có thể không cần dùng đến bất kì dòng code-behind (C#, VB.NET, …) nào.

Nếu bạn chưa tìm hiểu qua tính năng này trong WPF, tôi đã chuẩn bị sẵn cho cho bạn một số bài viết hướng dẫn dưới đây:

WPF – Data Binding cơ bản

WPF – Data Binding: Chuyển đổi dữ liệu với IValueConverter

WPF – Data Binding và Collection: Sorting, Filtering, Grouping

Data Template

Một template trong WPF xác định cách thức và cấu trúc mà dữ liệu hoặc control sẽ được hiển thị ra màn hình. Nói riêng về Data Template, chức năng này giúp cho dữ liệu (thuộc dạng non-visual) được gắn vào một cấu trúc bao gồm một hoặc nhiều thành phần có khả năng hiển thị. Và do đó, dữ liệu sẽ được hiển thị lên cửa sổ một cách trực quan theo ý muốn của lập trình viên. Cũng như Data Binding, tính năng này không yêu cầu bạn phải biết trong code-behind của ứng dụng.

Bạn có thể tham khảo một bài viết về Data Template của tôi tại:

WPF – Data Template

Command

Data Binding và Data Template giúp cho người dùng thấy được những gì có trong dữ liệu và có thể cập nhật lại dữ liệu đó. Tuy nhiên để nhận được tương tác từ người dùng và xử lý, WPF cung cấp một tính năng gọi là command. Các command có thể được xem như dữ liệu và được cung cấp cho người dùng thông qua chức năng binding.

Một command binding cho phép bạn tùy ý xác định các phương thức xử lý, phím tắt hoặc thao tác chuột để kích hoạt. Ngoài ra, các command có thể tự động thay đổi thuộc tính của các control dựa vào trạng thái chúng có thể được kích hoạt hay không.

Một bài viết cơ bản về Routed Command mà bạn có thể cần đọc qua:

WPF – Routed Command cơ bản

MVVM được hiểu như thế nào?

View: Tương tự như trong mô hình MVC, View là phần giao diện của ứng dụng để hiển thị dữ liệu và nhận tương tác của người dùng. Một điểm khác biệt so với các ứng dụng truyền thống là View trong mô hình này tích cực hơn. Nó có khả năng thực hiện các hành vi và phản hồi lại người dùng thông qua tính năng binding, command.

Model: Cũng tương tự như trong mô hình MVC. Model là các đối tượng giúp truy xuất và thao tác trên dữ liệu thực sự.

ViewModel: Lớp trung gian giữa View và Model. ViewModel có thể được xem là thành phần thay thế cho Controller trong mô hình MVC. Nó chứa các mã lệnh cần thiết để thực hiện data binding, command.  

Một điểm cần lưu ý là trong mô hình MVVM, các tầng bên dưới sẽ không biết được các thông tin gì về tầng bên trên nó. Như hình minh họa dưới đây:

View - ViewModel - Model pattern

Trong bài tới tôi sẽ cung cấp một số ví dụ đơn giản trong WPF giúp bạn hiểu rõ hơn về mô hình này.

 

https://yinyangit.wordpress.com

29 thoughts on “Cơ bản về MVVM (Model – View – ViewModel) Pattern

  1. Chào bạn Yinyangit
    Bạn có một số bài viết về mô hình MVVM trong wpf
    Mình là dân kinh tế ,chuyển sang quản lý bằng các mô hình lập trình nên có làm về phát triển ứng dụng quản lý .
    Trước mình làm winform,phát triển vài ứng dụng cơ bản cho cơ quan .Hiện muốn chuyển sang wpf
    Thấy mô hình MVVM rất hay ,có thể thay thế 3 lớp bên winform .
    Tuy nhiên bài viết của bạn có thể khái quát ,và làm mình rất thích thú với mô hình đó,nhưng thực sự để phát triển nó mình gặp nhiều kho khăn quá
    Bạn có thể làm 1 demo về MVVM, truy cập CSDL.Dùng Linq to sql hay EntityFramework ( code fist hay model first ) cho mình được không
    Kiến thức có hạn,có điều gì mong bạn bỏ quá
    Cảm ơn bạn rất nhiều

    Trả lời
  2. Rất cảm ơn bạn đã trả lời.Thực sự trước mình học kinh tế,bạn bè it chẳng có ai,nên không biết cái gì chỉ có nước google.com rồi bó tay.Vào blog của bạn thấy có rất nhiều bài viết đề cập tới công nghệ mới ,mình rất muốn làm ,tuy nhiên thực sự rất khó khăn.Ngồi tự học hay đọc tài liệu bằng tiếng anh thì rất vất .Đặc biệt là về các công nghệ mới như mvc,MVVM thì các diễn đàn thảo luận rất ít.Nếu bạn ở Hà Nội thì có thể giúp mình 1 – 2 buổi được không.Kinh phí thể nào mình xin chịu.Bạn có thể giúp mình được không

    Trả lời
  3. Nghe hai bạn nói ở trên mà mình phát hoảng.Mô hình mvc phát triển ứng dụng web,mình có làm cái web giới thiệu sản phẩm của mình bằng mvc 3 ( đang up host) .Còn mình muốn hỏi về ứng dụng wpf ( thay thế winform) .Có thể các bạn hiểu nhầm ý mình phát triển ứng dụng Silverlight cho web hay sao ý mà phát biểu như vậy.Linq ,C# 3.0,4.0 mình đã học ( còn nói để hiểu sâu sắc nó thì mình không giám) .Mình thấy mô hình MVVM trong wpf hay Silverlight hay quá ,khác hẳn cách lập trình winform 3 lớp mà mình thường làm.Các bạn có thể cho mình ý tưởng về mô hình đó theo 1 ví dụ cụ thể này được không ?
    Ví dụ:
    Mình có Table dưới Database là NhanVien ( MaNhanVien,TenNhanVien) .
    Mình thường dùng Linq to sql hay EntityFramework để map database với class .net.
    Ý mình muốn làm cái demo hiển thị bảng trên lên DataGrid trong wpf bằng mô hình MVVM.

    Còn cách thông thường chỉ cần gán : DataGrid.ItemSources =db.Nhanviens thì chẳng có gì.
    ý mình muốn code theo phong cách tách biệt mã và giao diện như Asp.net MVC của web

    Trả lời
  4. Ah,lý do là mình hỏi về MVVM thì bạn Án Bình Trọng lại bảo mình tìm hiểu về MVC.Nói chung mình rất thích phân chia ứng dụng theo mô hình MVVM.Trước kia mình làm winform chỉ dùng mô hình 3 lớp nên còn rối rắm lắm ( cũng vì lý do này mà mình từ bỏ webform và chuyển sang MVC3)
    Ah bạn có cuấn book nào về MVVM ( của wpf hay silverlight) không ,gửi link cho mình đc ko? trên Amazon có mấy cuấn no mình chưa tìm đc link download

    Trả lời
    • Bạn ghi “. Đặc biệt là về các công nghệ mới như mvc,MVVM”, bạn đã chỉ ra 2 design pattern nổi tiếng chứ không phải bạn đang hỏi bạn yinyang có thể train cho bạn MVVM được hay không? Mình chỉ trả lời comment đó của bạn. Còn ý bạn hỏi yinyang về MVVM ở trên nữa thì mình thật sự không nhìn thấy.
      Bạn học bên kinh tế, tìm hiểu bên lĩnh vực CNTT thì bạn có tinh thần học hỏi cao. Bạn nói có ít bạn bên lĩnh vực công nghệ thông tin, và đọc tiếng Anh thì rất khó, dựa vào comment có câu trích ở trên, mình đoán là bạn học theo ví dụ tiếng việt, và chưa chuyên sâu với .NET (vì những bài viết tiếng Anh rất nhiều và rất chuyên sâu) mình góp ý cho bạn để lấy căn bản trước, và nói bạn học về MVC, vì mình thấy Tác giả Nguyễn Quang Bửu demo rất dễ hiểu.
      Nếu bạn có thắc mắc gì thì bạn hỏi yinyang. Mình xin lỗi vì đã góp ý sai.

      Trả lời
      • Cảm ơn bạn Án Bình Trọng đã nhiệt tình comment đóng góp.MVC mình cũng hòm hòm về kiến thức.Có thể viết được vài cái web tin tức,cái blog nhỏ.
        Nói chung về mấy công nghệ mới ( mà có lẽ cũng không mới lắm ) như MVC ,WPF thì tài liệu tiếng việt rất ít.Mình cũng phải sài mấy cuấn pro MVC,EF …
        Còn mấy video của Nguyễn Bửu thì theo thiển ý của riêng mình thì chỉ là giới thiệu về MVC thôi.Thử hỏi 1 người mới bắt đầu học viết ứng dụng web xem mấy video đó mà chỉ cần viết được cái web tin tức đơn giản thì cũng là cả 1 chặng đường không có hồi kết luôn.

  5. Ah.không thấy bạn Yingyang phản hồi,mong bạn có một vài demo cụ thể về mô hình MVVM,thao tác cơ bản với Database như ( create,delete,Update).Dùng Linq to sql hay Entity framework thì càng tốt
    Mình seacht mạng cũng nhiều nhưng vẫn chưa tìm được cái tutorial hay demo nào về Database như thế này cả.Cảm ơn rất nhiều

    Trả lời
  6. Cho mình hỏi Yinyang 1 câu hơi cá nhân 1 chút đó là,comment trước thấy bạn bỏ wpf lâu rồi.Có phải là lý do cá nhân không làm về lập trình nữa hay chuyển sang 1 công nghệ mới hay hơn.
    Nói chung mình học kinh tế nên cảm giác mấy cái lập trình quản lý rất quan trọng trong việc phát triển kinh tế xã hội.Thấy bạn bỏ mà không biết lý do mình cảm giác hụt hẫng làm sao ý.

    Trả lời
  7. Cảm ơn bạn đã quan tâm. Thực ra là do mình ko làm về WPF và cũng ko thấy tương lai sẽ cần đến nó (mình đang làm về Web). Mình học mỗi thứ 1 tí cho gọi là biết thôi chứ mấy cái bạn yêu cầu mà muốn viết cũng phải mất thêm thời gian nghiên cứu. Mà thời gian của mình cũng khá ít nên cũng khó.

    Trả lời
    • Uhm,cảm ơn bạn đã chia sẻ.Tinh thần là thế,đúng là mấy bạn mình quen làm it cũng làm về web nhiều.Thời đại của mạng,của điện toán đám mây mà.Và mình nghĩ càng ngày khoảng cách giữa web App và Win App sẽ càng gần.Silver light cũng dùng xaml mà.Mà có lẽ mình kẻ ngoại đạo chém gió vậy thôi chứ chẳng biết gì.Chỉ viết mấy ứng dụng kế toán,nhân sự phân tích tài chính sơ sơ,nên công nghệ cũng chẳng phải dùng cái gì đó đao to búa lớn lắm.Tiếc quá,chẳng có anh em nào biết rồi chỉ dẫn.Nói chung ngồi tự học cũng đc thôi,nhưng tốn nhiều thời gian.Mà tuổi trẻ ai cũng cần thời gian.
      Mong bạn nếu có thể sẽ viết các tutorial về wpf đặc biệt là MVVM .
      Cảm ơn rất nhiều

      Trả lời
    • Các tầng này (WPF, WCF, DB) không liên quan gì đến nhau nên bạn có thể xây dựng riêng lẻ từng phần dựa vào các kiến thức cơ bản mà bạn có thể search trên google. Mình cũng ko có thời gian nên tạm thời ko viết bài được, bạn thông cảm.

      Trả lời
    • Thực ra hiểu theo cách nào đó thì tất cả tầng đều tương tác với nhau. Trong biểu đồ trên thì chiều mũi tên chỉ việc sử dụng trực tiếp. Như vậy tầng View phải biết rõ ViewModel có những gì trong khi ngược lại thì ViewModel ko cần thiết phải biết View có gì hay ai sử dụng nó. ViewModel chỉ tương tác với View một cách bị động thông qua binding và event mà View yêu cầu nó làm.

      Trả lời
  8. Hi Yin Yang,
    Bài đọc rất dễ hiểu. Tôi cũng đang tìm hiểu về MVVM để sử dụng cho Project tôi đang làm. Bạn có thể tư vấn cho tôi cách áp dụng MVVM?. Cấu trúc hiện tại được xây dựng như sau:

    Database DataAccessLayer Bussiness Layer WCF View (sử dụng ajax trong javascript/ jquery để truy xuất đến WCF)
    – View: sử dụng HTML5; tất cả việc load dữ liệu lên lưới và control đều sử dụng javascript.
    – Bussiness Layer: thực hiện các hàm logic, các transaction, chuyển đổi dữ liệu đến Object trước khi chuyển sang WCF…

    Trả lời

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s