Web Client Software Factory (WCSF) and Model View Presenter (MVP)

This article is the second in the series of WCSF.


This article is the second in the series of WCSF.  For installing WCSF please refer to http://www.c-sharpcorner.com/UploadFile/40e97e/4402/

MVP

One of the remarkable point of WCSF framework  is the support for Model View Presenter (MVP).  MVP was quite popular and it is really flexible provided with a little learning curve involved.

Model constitutes the application specific Logic.  

View would be basically the web page we are dealing with.

Presenter is the code that wires the view and model

Advantages

Decoupling: MVP and MVC provides the decoupling of user interface from the application logic.  This makes the code more manageable and flexible for unit testing.

Multiple Views: Another advantage would be support for multiple views. Suppose you have a model of account transactions.  Depending on the user type, you can show it in a chart page view or a table view.

Easier Replace: We can easily replace one portion of code without affecting the other.  Suppose there is a change in the html page, we can do the massive change with less impact on the model and presenter code.  Similarly if there is a change in data fetch service we can do that in the presenter, without even touching the view/model.

Implementation

In reality, the View would be an interface that is implemented by a web page.  Model and Presenter should be actual classes which are tied to the View interface. 

1.gif

Example

After setting up the IDE correctly using previous article, we can try to create a web page having one textbox and button.  Here the textbox provides the Name of model.

On clicking the button the data will be saved to session.  Let us see what is the infrastructure needed for that.

Step 1: Create new Page

Right click on our previous WCSF project and use the context menu "Web Client Factory"> Add Page with Presenter

2.gif
 
The following wizard will appear:

3.gif
 
Enter the view name as "MyData" and click Finish.

Right click on the MyData.aspx and make it Default page.

Step 2: Add Data property to IDefaultView

Open the IMyDataView.cs from Shell project and add the following property inside it.

4.gif
 
As the MVP provides decoupling of user controls from code, we need to create properties for each user interface element.  Depending on the Property Type we will be having different UI controls.

Property Type UI Control
String TextBox
Bool CheckBox
List ListBox
List<Entity> GridView

Step 3: Implement the Data property

Now we need to implement the new Data property inside our aspx page.

First we have to create a textbox in the webpage and connect it to the Data property.

For this place a new textbox and name it txtData.  Place a button too aside.

5.gif
 
Create the property named Data inside the MyData.aspx page like following.

6.gif
 
Step 4: Build the solution

If the build succeeds we are in good position.  You can try executing the solution.  From the presenter we can access the current value of Data using View.Data property.