Introduction:
We have given a task to implement our next project in two different interfaces, One using traditional ASP.NET web pages and another one using the new rich silver-light user interface . And we have to follow the MVP design pattern to implement this. During this process I have gone through the MVP design pattern documents and implementation processes and writing this blog to provide a little bit introductory idea about what is MVP pattern and a simple example to implement this using a web and windows application.
I have not used the silver-light in this example, because CLR for web application and silver-light CLR are completely different. To implement this you have to develop separate set of view, presenter and model component for web application and for silver-light. There is a trick to solve this by developing the different components for Web application first and later adding parallel components for silver-light by just adding the link of all the classes and interfaces developed for respective web application components. But my main purpose is to focus on the MVP pattern, so i have taken a example of windows application in place of silver-light.
Description:
MVP pattern stand for Model-View-Presenter design pattern. It is basically built of using three components View, Model and Presenter. It is a derivative of the MVC (Model-View-Control) pattern.
View: It represents the applications presentation layer and responsible for displaying and receiving the user inputs and handling the user events (i.e. mouse clicks, key down, click etc.) on the controls only. Views does not call directly to the Models, Instead it invokes the Presenter methods which in-turn calls the Model to get the data and in return updates the view. All concrete view components must implement an interface which defines all the methods and properties which required to be implemented.
Presenter: This component basically communicates with the view to accept user inputs for processing, connect to the model to retrieve the required data or process the requested business logic and return the view the desired data to show. Presenter have access to the interface of the view. It has no idea about the implementation.
Model: It contains all the business logic of the application. It processes the request from the presenter and do the processing to return it's result to the presenter.
Implementation:
To describe MVP implementation using asp.net i have created a small application (for giving a general idea of implementation) that search employee by employee code and display employee information on the page. At this moment i have not implemented any logic at model level and just returning a hard coded value for testing purpose. Later we have used the model, view and presenter to implement the same functionality on a windows application without making any change on the core components (Model, View and Presenter).
Creating & Implementing View in Web and Windows application:
View is basically defines an interface which need to be implemented by the UI layer. This interface is later used by the presenter. This provides the way to lose coupling between view and presenter. Here I have created an interface called IEmpView. This is the interface that is going to be implemented by both the web application and windows application.
Code (IEmpView):
Code (Aspx page code behind):
In the code behind of the web application we have implemented the IEmpView interface and implemented the properties exposed by it. And in the Click event of the search button it instantiate the presenter class and call the required method for processing.
This is the DTO class I have used to transfer data between the Model and Presenter.
Creating Model:
Model class basically holds the business logic of the application. In this example i have hard coded the process logic of GetEmployee() method and it will be replaced by the code to fetch data from database or some external source by communicating with the respective layer.
Code (Interface of Model):
So you have noticed that we have implemented our application using different UI without modifying our core components (Model, View and Presenter).
Advantages:
1. Provide the ability to test all the code in the application except the visual appearance and the interaction.
2. Ability to interchange view without modification on the code (Example. it can be easily changed the presentation layer from the web page to a windows form without modification in the core components ( Presenter and Model Component.).
3. It simplifies the testing process.
We have given a task to implement our next project in two different interfaces, One using traditional ASP.NET web pages and another one using the new rich silver-light user interface . And we have to follow the MVP design pattern to implement this. During this process I have gone through the MVP design pattern documents and implementation processes and writing this blog to provide a little bit introductory idea about what is MVP pattern and a simple example to implement this using a web and windows application.
I have not used the silver-light in this example, because CLR for web application and silver-light CLR are completely different. To implement this you have to develop separate set of view, presenter and model component for web application and for silver-light. There is a trick to solve this by developing the different components for Web application first and later adding parallel components for silver-light by just adding the link of all the classes and interfaces developed for respective web application components. But my main purpose is to focus on the MVP pattern, so i have taken a example of windows application in place of silver-light.
Description:
MVP pattern stand for Model-View-Presenter design pattern. It is basically built of using three components View, Model and Presenter. It is a derivative of the MVC (Model-View-Control) pattern.
 |
| Model-View-Presenter Pattern |
View: It represents the applications presentation layer and responsible for displaying and receiving the user inputs and handling the user events (i.e. mouse clicks, key down, click etc.) on the controls only. Views does not call directly to the Models, Instead it invokes the Presenter methods which in-turn calls the Model to get the data and in return updates the view. All concrete view components must implement an interface which defines all the methods and properties which required to be implemented.
Presenter: This component basically communicates with the view to accept user inputs for processing, connect to the model to retrieve the required data or process the requested business logic and return the view the desired data to show. Presenter have access to the interface of the view. It has no idea about the implementation.
Model: It contains all the business logic of the application. It processes the request from the presenter and do the processing to return it's result to the presenter.
Implementation:
To describe MVP implementation using asp.net i have created a small application (for giving a general idea of implementation) that search employee by employee code and display employee information on the page. At this moment i have not implemented any logic at model level and just returning a hard coded value for testing purpose. Later we have used the model, view and presenter to implement the same functionality on a windows application without making any change on the core components (Model, View and Presenter).
 |
| Implementation Using ASP.NET (Web Page) |
 |
| Implementation using Windows Application (Win Form) |
Creating & Implementing View in Web and Windows application:
View is basically defines an interface which need to be implemented by the UI layer. This interface is later used by the presenter. This provides the way to lose coupling between view and presenter. Here I have created an interface called IEmpView. This is the interface that is going to be implemented by both the web application and windows application.
Code (IEmpView):
public interface IEmpView
{
string Code { get; }
string EmpName { set; }
string Address { set; }
}
Code (Aspx page code behind):
In the code behind of the web application we have implemented the IEmpView interface and implemented the properties exposed by it. And in the Click event of the search button it instantiate the presenter class and call the required method for processing.
public partial class EmployeeInfo : System.Web.UI.Page, IEmpView
{
public string Code
{
get { return txtCode.Text ; }
}
public string EmpName
{
set { lblName.Text = value; }
}
public string Address
{
set { lblAddress.Text = value; }
}
protected void btnSearch_Click(object sender, EventArgs e)
{
mvpPresenter.EmpPresenter empPresenter = new mvpPresenter.EmpPresenter(this);
empPresenter.BindData();
}
}
Code (Windows application):
In this section i have used the same interface to develop the application using Windows Form. Similar like the above implementation in web form the windows form implements the IEmpView and implements the properties.
Creating the Presenter:
Presenter have no idea about the UI. It does not know the view interface it is interacting is implemented by a windows or web application.Its constructor takes the IEmpView (interface) as parameter.
Code (Presenter):
In this section i have used the same interface to develop the application using Windows Form. Similar like the above implementation in web form the windows form implements the IEmpView and implements the properties.
public partial class EmployeeForm : Form, IEmpView
{
public string Code
{
get { return txtCode.Text; }
}
public string EmpName
{
set { lblName.Text = value;}
}
public string Address
{
set { lblAddress.Text = value; }
}private void btnSearch_Click(object sender, EventArgs e)
{
mvpPresenter.EmpPresenter empPresenter = new mvpPresenter.EmpPresenter(this);
empPresenter.BindData();
}}
Creating the Presenter:
Presenter have no idea about the UI. It does not know the view interface it is interacting is implemented by a windows or web application.Its constructor takes the IEmpView (interface) as parameter.
Code (Presenter):
public class EmpPresenter
{
private readonly IEmpView empView;
public EmpPresenter(IEmpView view)
{
empView = view;
}
public void BindData()
{
EmpModel model = new EmpModel();
EmpDTO employee = model.GetEmployee(empView.Code);
empView.EmpName = employee.Name;
empView.Address = employee.Address;
}
}
This is the DTO class I have used to transfer data between the Model and Presenter.
Code (Employee DTO):
public class EmpDTO
{
public string Code { set; get; }
public string Name { set; get; }
public string Address { set; get; }
public EmpDTO(string code, string name, string address)
{
Code = code;
Name = name;
Address = address;
}
}
Creating Model:
Model class basically holds the business logic of the application. In this example i have hard coded the process logic of GetEmployee() method and it will be replaced by the code to fetch data from database or some external source by communicating with the respective layer.
Code (Interface of Model):
public interface IEmpModel
{
EmpDTO GetEmployee(string empCode);
}
Code (Concrete Model Class):
public class EmpModel:IEmpModel
{
public EmpModel()
{
}
public EmpDTO GetEmployee(string empCode)
{
return new EmpDTO(empCode, "Prasant Swain", "Kolkata");
}
}
So you have noticed that we have implemented our application using different UI without modifying our core components (Model, View and Presenter).
Advantages:
1. Provide the ability to test all the code in the application except the visual appearance and the interaction.
2. Ability to interchange view without modification on the code (Example. it can be easily changed the presentation layer from the web page to a windows form without modification in the core components ( Presenter and Model Component.).
3. It simplifies the testing process.
