MVVM Model with WCF Async

You might have heard alot about the MVVM model being implemented in WPF and Silverlight and you must be knowing that the paradigm MVVM stands for M(Model)-V(View)-VM-(ViewModel).

Althought as per the actual implementation of this model, following the flow of data/commands it should have been called as View-ViewModel-Model following the command path (meaning the command is invoked by the view which in return calls the ViewModel and the ViewModel invokes the Model). Or it should have been called as Model-ViewMode-View following the data path (Meaning the Model passes the data to ViewMode and the ViewModel passes it to View.

Any ways there are many things in life that are wrongly named so is our dear MVVM model.

I read a couple of articles on MVVM patter but no one gave me details on how to implement it with Asnyc calls executed to get data from WCF service/s. Meaning it seemed incomplete because most of the Silverlight apps consumes a WCF service/s. Any ways, my purpose of writing this blog is to help the developers understand how to implement MVVM and demonstrate the flexibility it provides.

Please note that the advantages and flexibility of MVVM is not only limited to the behavior that I explain in this blog.

Okay, so lets start by answering some basic questions.

What actually this Model-View-ViewModel refers to?
I would prefer to take the Command path to explain it better because it starts with a visualization.

View - refers to the UI. It can be a page or a user control. If you are creating a WPF or Silverlight application then View will refer to the page/user control that contains the XAML to create the User Interface. The entire application may contain a single view or it may contain multiple views. Meaning, if you are creating a Multiple paged application for example a Navigation Application in silverlight then each page that you contain should be considered as a View.

Flexibility: You may have a single view that all your pages/user control can refer to. Or you can have multiple views one for each page or user control.

ViewMode: View is going to invoke the ViewModel. It means that the User Interface or View or Page or UserControl (whatever you may call it) is going to initiate the request for data from the ViewModel. The request for data can be made either thought an event or a command. For example, you can create a new instance/object of ViewModel on a ButtonClick event or Loaded event or any other event. Or you can use Command

Flexibility: View model is basically a user interface representation of the business model with additional properties to interact with the View. For example, the data service failed to get the data in time specified and you get a time out error. In this case, you may not want the user to know about this and can make a call again. Or you may want the user to know about this and still make a call again or better you inform the user and let him choose to make a call again or not. This decision can be taken in the ViewModel by adding a property and binding it to the control. Another example can be showing the progress bar while the async method completes. You can add a property in the ViewMode called ShowProgressBar and bind it to the progressbar control's visibility.

Please note that your ViewModel should implement the INotificationPropertyChanged to let the view know if any property changes.

Model: refers to the Business Model. The model is invoked by the ViewModel. The model in return makes a call to get the data.

Flexibility: The data service may return the data model. In Model you can construct your business model by adding extra properties to the data model or by combining multiple data models.

Please note that your Model should also implement the INotificationPropertyChanged to let the ViewModel know when any property changes.

Below images will help you better understand.

 

I will continue this post with the code snippet as well as a sample application soon.