1. Model View Presenter in Asp.net Presented by : M. M.Al-Farooque Shubho http://www.linkedin.com/in/thisisshubho
2. What is MVP? MVP is a User Interface Design Pattern. Used to improve Separation of concerns and increase testability of any application
3. Why MVP? Asp.net MVC offers a new development paradigm that offers “More control” and “Less Productivity” for real world applications. Asp.net Web Forms offers a development paradigm that offers “More Productivity” and “less Control” for real world applications. Asp.net Web Form MVP is a trade off between the two. It offers implementation of things that were missing in Asp.net Web Forms. These are “Separation of concerns and Testability”. So, MVP allows to utilize the full power and productivity of Web Forms and also allows to develop components that are loosely coupled and that are testable.
4. How to implement MVP? MVP is to be implemented in Asp.net Web forms where all the existing Pages, Controls and Data Binding features can be used. MVP is all about moving codes from CodeBehind Class to Presenter Classes. Today’s web pages are complex and rarely implements “Single Page, Single responsibility” philosophy. Pages contain modular areas where each have its own View and Functional logic.
5. How to implement MVP? Web Form MVP supports this design where each area of the page accesses its own View and associated with its own Presenter. Presenters could be implemented small, with minimal set of responsibility and independently. The Presenters could be tested just like MVC and also supports IOC (DI) pattern.
6. The Players in MVP Model – This is the business object / service / data or a module which has logic in it View – This is the UI which has controls / images / text etc. Presenter – This is the object whose only task to join View and Model.
7. A “Hello world” MVP Create a web page which will have one textbox, one button and one label. User can enter text in the textbox and click on the button. It should display entered text in the label. For sake of logic if user enters World and click on the button then label will display “Hello world”.
8. Step 1 : Create the Model A) Create an Interface which will represent the model class. public interface IModel { string buildText(string text); }
9. Step 1 : Create the Model…continued B) Create the Model class that implement the IModel Interface and that builds the output string that has to be rendered to the UI. public class Model : IModel { public Model() { // // TODO: Add constructor logic here // } public string buildText(string text) { return string.Concat("Hello ", text); } }
10. Step2 : Create the View A) Create an Aspx page (View) having some UI controls <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="lbl" runat="server"></asp:Label> <asp:TextBox ID="txt" runat="server"></asp:TextBox> <asp:Button ID="bt" runat="server" Text="Enter" OnClick="btn_Click" /> </div> </form> </body> </html>
11. Step2 : Create the View…continued A) Create an Interface for View. Put a property for each Control in the Aspx/Ascx. The IView should represent a View instance (An object with user inputs as properties) public interface IView { string Lable { get; set; } string Text { get; set; } }
12. Step3 : Create the Presenter Create a class (Presenter) that talks to the View public class Presenter { IViewpview; public Presenter(IView view) { // Define prviate view interface as passed View pview = view; } public string buildtext() { // Private view lable gets string back from Model object (Business object) Model m = new Model(); pview.Lable = m.buildText(pview.Text.ToString()); return pview.Lable.ToString(); } }
13. Step3 : Create the Presenter…continued The aim of Presenter class is : It should not know anything about UI at all It can communicate with model and view. The Presenter class should: Encapsulate an IView instance Have methods that builds outputs for inputs captured in IView Instance.
14. Step4: Glue them all Modify the CodeBehind file of View.aspx (View.aspx.cs) so that It implements the IView. Include the properties declared in the IView and use the Control values as private members of the properties. In the Control Event (Button_Click), it asks the Presenter to build output with the input.
15. Step4: Glue them all…Continued public partial class View : System.Web.UI.Page, IView { // Declare IView Text property for Textbox public string Text { get { return txt.Text; } set { txt.Text = value; } } // Declare IViewLable property for Lable public string Lable { get { return lbl.Text; } set { lbl.Text = value; } } protected void Page_Load(object sender, EventArgs e) { // Send this object to presenter } protected void btn_Click(object sender, EventArgs e) { Presenter presenter = new Presenter(this); presenter.buildtext(); } }
