MVVM design pattern implementation using Silverlight

Introduction:
This article is mainly as per my understanding about the MVVM pattern, and may be I am not correct at every point, So your input are greatly appreciated. After reading few articles on the net I just try to explain this pattern with a simple example in silver light 4 (using visual studio 2010).

Description:
MVVM stands for Model-View-VewModel. It is based on the  MVC design pattern and targeted at modern User Interface development platforms like WPF and Silverlight and helps us building a true application that is more readable, easily testable, re-usable and maintainable. 
One of the main goal of the MVVM pattern is to create an application that is loosely coupled. MVVM pattern mainly built of using three components View, ViewModel and Model.

MVVM Pattern (in this diagram i have included service that is used to communicate with web service/database to fetch data.)

View:
These are the Silverlight/WPF screens and does not contains any code behind. Views in MVVM pattern communicate in the application based on the bindings and commands that are contained in the ViewModel.


Model:
This part holds the data entities, business logic and it is completely independent of the View.


ViewModel:
 This component is responsible for exposing the data objects from the model in such a way that these objects are easily managed and consumes by the view. It acts like a value converter, which converts the raw data from the the Model and make it View friendly and vice-versa. Along with providing data for the Views it also  contains the commands the View can use for interaction in the application.


Note: The key thing of ViewModel is that you have one and only one ViewModel per View.


How it works?:
The ViewModel is typically contains the properties/Collections for the data that is going to be shown by the View. These properties/Collections raises notifications when the data changes. So when the data changes the View can receive the notification to update itself. The View Uses the powerful data binding features provided by the Silverlight/WPF to bind these properties exposed by the ViewModel with the controls that the view is composed of. User events that are captured by the view are sent to the ViewModel by the commands properties, and these commands executes a method in the ViewModel, which in result either sent a request to the Model to process some business logic  or update its own properties so that the View can update automatically.


Why to use MVVM Pattern?:

• It allows a developer to create an application with no user interface.
• A designer able to create User Interface without writing a single line of code.
• As the UI is loosely coupled, It can be changed without changing any code.

Implementation MVVM Pattern using Silverlight:

    Here i am showing a simple example in Silverlight that implements the MVVM pattern. In this example I provide the searching on the employee based on name. So in my screen there are three controls one text box that is used to enter the search text and a button that will do the search operation and a grid to show the result employee list. But in this example i am not using the text box data for searching and just showing some hard coded data, because my purpose here to show the MVVM Pattern implementation.

Silverlight Application

Model Implementation:

    In this example I have used the model as a data entity. Here i have created a base class for model that implements the INotifyPropertyChanged and IDisposable interface. INotifyPropertyChanged Interface is used to notify the view that the property is changed and it have to update itself and the IDisposable interface to provide the dispose functionality to my class.

Model base class code:

public class BaseModel: INotifyPropertyChanged, IDisposable
    {
        #region IDisposable Members
        public void Dispose()
        {
            this.OnDispose();
        }
        public virtual void OnDispose()
        {

        }
        #endregion

        #region INotifyPropertyChanged Members
        /// <summary>
        /// This event is used to notify differnet silverlight binding that the data in changed for one
        /// or more properties so that control can be updated automatically.
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

        /// <summary>
        /// This method is used to raise the PropertyChanged event.
        /// </summary>
        /// <param name="propertyName"></param>
        protected void OnNotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        #endregion
    }

Model Code:

public class EmployeeModel : BaseModel
    {
        #region [Properties]
        private string firstName;
        public string FirstName
        {
            get
            {
                return firstName;
            }
            set
            {
                firstName = value;
                OnNotifyPropertyChanged("FirstName");
            }
        }

        private string lastName;
        public string LastName
        {
            get
            {
                return lastName;
            }
            set
            {
                lastName = value;
                OnNotifyPropertyChanged("LastName");
            }
        }

        private Int32 age;
        public Int32 Age
        {
            get
            {
                return age;
            }
            set
            {
                age = value;
                OnNotifyPropertyChanged("Age");
            }
        }
        #endregion
       
        #region [Constructors]
        public EmployeeModel(string fName, string lName, Int32 age)
        {
            FirstName = fName;
            LastName = lName;
            Age = age;
        }
        #endregion
    }

Service Implementation:
Service class is used here for communication with the data source or the web service/REST service to retrieve data and set/update the model. In this example i am not using any code for data access or calling any web service. For display purpose i have fixed some data that i can show in this example. You can change this code and try your own.

Employee service interface code:

  public interface IEmpService
    {
        ObservableCollection<EmployeeModel> GetEmployees(string name);
    }

Employee Service Code:

public class EmpService : IEmpService
    {
        #region IEmpService Members
        public System.Collections.ObjectModel.ObservableCollection<Model.EmployeeModel> GetEmployees(string name)
        {
            ObservableCollection<EmployeeModel> empList = new ObservableCollection<EmployeeModel>();

            empList.Add(new EmployeeModel("Prasant", "Swain", 99));
            empList.Add(new EmployeeModel("Prakash", "Samal", 99));

            return empList;
        }
        #endregion
    }

ViewModel Implementation:
Like the implementation of Model here also we have created a base class for all the ViewModel class. It implements the INotifyPropertyChanged interface to provide the functionality to notify the bindings of the View to update itself when any property changes along with this we have defined another class called ProcessCommand that implements the ICommand interface. This class is basically used to bind the events in the View with the ViewModel.


BaseModel Class Code:

public abstract class BaseViewModel:INotifyPropertyChanged
    {
        /// <summary>
        /// This event is used to notify differnet silverlight binding that the data in changed for one
        /// or more properties so that control can be updated automatically.
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

        /// <summary>
        /// This method is used to raise the PropertyChanged event.
        /// </summary>
        /// <param name="propertyName"></param>
        protected void OnNotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public bool IsDesignTime
        {
            get
            {
                return DesignerProperties.IsInDesignTool;
                //return (Application.Current == null) || (Application.Current.GetType() == typeof(Application));
            }
        }
    }

ProcessCommand Class Code:

    public class ProcessCommand : ICommand
    {
        #region ICommand Members
        Func<object, bool> canExecute;
        Action<object> execute;
        bool canExecuteFlag;

        public ProcessCommand(Action<object> executeAction)
        {
            this.execute = executeAction;
            this.canExecute = (p) => { return true; };
        }

        public ProcessCommand(Action<object> executeAction, Func<object, bool> canExecute)
        {
            this.canExecute = canExecute;
            this.execute = executeAction;
        }
       
        public event EventHandler CanExecuteChanged;

        public bool CanExecute(object parameter)
        {
            bool tempCanExecute = canExecute(parameter);
            if (this.canExecuteFlag != tempCanExecute)
            {
                this.canExecuteFlag = tempCanExecute;
                if (CanExecuteChanged != null)
                {
                    CanExecuteChanged(this, new EventArgs());
                }
            }
            return tempCanExecute;
        }

        public void Execute(object parameter)
        {
            execute(parameter);
        }
        #endregion
    }

EmployeeViewModel Code:

  public class EmployeeViewModel:BaseViewModel
    {
        #region [Properties]
        private ObservableCollection<EmployeeModel> employees;
        public ObservableCollection<EmployeeModel> Employees
        {
            get
            {
                return employees;
            }
            set
            {
                employees = value;
                OnNotifyPropertyChanged("Employees");
            }
        }

        private EmployeeModel currentEmployee;
        public EmployeeModel CurrentEmployee
        {
            get { return currentEmployee; }
            set
            {
                    currentEmployee = value;
                    OnNotifyPropertyChanged("CurrentEmployee");
            }
        }

        private string searchName;
        public string SearchName
        {
            get
            {
                return searchName;
            }
            set
            {
                if (searchName != value)
                {
                    searchName = value;
                    OnNotifyPropertyChanged("SearchName");
                }
            }
        }

        public ICommand SearchCmd
        {
            get {return new ProcessCommand(SearchCommand, (e) => { return true; });}
        }
        #endregion

        #region [Methods]
        public void SearchCommand(object objParam)
        {
            IEmpService empService = new EmpService();
            Employees = (ObservableCollection<EmployeeModel>)empService.GetEmployees(SearchName);

            CurrentEmployee = employees[0];
        }
        #endregion
    }

View Implementation:

As described above in my view i have used three controls for this example a text box (not using it in this example), a button and a data grid. button is bind with the SearchCmd property and the data grid is bind with the employee list (Employees) which is implemented as a Observable collection.
View Code:

<UserControl x:Class="MVVMPoC.App.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ViewModel="clr-namespace:MVVMPoC.ViewModel;assembly=MVVMPoC.ViewModel"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:my="clr-namespace:MVVMPoC.App.Controls" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    <UserControl.Resources>
        <ViewModel:EmployeeViewModel x:Key="empVM"/>
    </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource empVM}}" Height="247" Width="400">
        <TextBox Height="23" HorizontalAlignment="Left" Margin="42,25,0,0" Name="textBox1" VerticalAlignment="Top" Width="129" DataContext="{Binding Path=SearchCmd, Mode=TwoWay}" />
        <Button Content="Search" Height="23" HorizontalAlignment="Left" Margin="177,25,0,0" Name="button1" VerticalAlignment="Top" Width="75" Command="{Binding Path=SearchCmd}" />
        <sdk:DataGrid AutoGenerateColumns="True" Height="140" HorizontalAlignment="Left" Margin="42,54,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="338" ItemsSource="{Binding Path=Employees, Mode=TwoWay}" />
    </Grid>
</UserControl>