Exploring the MVC, MVP and MVVM Design Patterns

Take advantage of MVC, MVP and MVVM Design Patterns to build applications that are easier to test and maintain

Design patterns can be used to solve complex design problems in your application. However, your design should be compact and it should not drive your business requirements. Rather, you should choose the right design pattern depending on the business requirements at hand.

The Model View Controller Design Pattern

The architectural components of the MVC design pattern include the following:

  •   The Model (The Data Layer)
  •   The View (The User Interface Layer)
  •   The Controller (The Business Logic Layer)

A model is accessible by both the controller and the view and can be used to pass data from Controller to the View. While the Model represents the application’s data; the View displays this data to the end user. The controller in MVC design represents the business logic of the application. Proper implementation of the MVC design pattern in your application can reduce the cohesion between your application’s components. The main objective of the MVC design pattern is that it helps in separation of concerns in your application. It helps isolate the application’s data from how the data is actually processed by the application’s business logic layer and eventually presented to the end user. Also, applications that leverage the MVC design pattern are easier to test and maintain as the cohesion amongst the application’s components are reduced. However, one major drawback in using this pattern is in its complexity.

The Model View Presenter Design Pattern

Similar to MVC, the MVP design pattern consists of three components. However, there is subtle difference between the MVP and the MVC designs. In MVP design pattern, the Presenter refers back to the view. This doesn’t happen in the case of MVC design. In essence, the Presenter in MVP design pattern manipulates the model and also updates the view. There are two variations of this pattern – Supervising Controller and Passive View. The former uses the controller to handle user input and also manipulates the view. Passive View uses a controller to respond to user events and updates the view accordingly. In this approach, testing the controller becomes easy.

Model–View-ViewModel Design Pattern

The Model View ViewModel (MVVM) pattern is based on the MVC design pattern and is comprised of three components. These are:

  •   Model (This includes business rules, data access, model classes)
  •   View (User interface using Xaml)
  •   ViewModel (This acts as an interface between view and model)

You write this code in the View:

<TextBlock Text="{Binding FirstName}"/> 

And in your ViewModel, you’ll write this code:

public string FirstName
        {
            get
            {
                return this.firstName;
            }
            set
            {
                this. firstName = value;
                this.OnPropertyChanged("FirstName");
            }
        }

And, you will write this code in the code behind file of the View:

public IViewModel Model
        {
            get
            {
                return this.DataContext as IViewModel;
            }
            set
            {
                this.DataContext = value;
            }
        }

ASP.NET MVC Framework

The ASP.NET MVC Framework is a light-weight, testable, web application development framework from Microsoft that implements the MVC design pattern. In this framework, the coupling between models, views and controllers is achieved using interface based contracts. This ensures that each of these components can be tested independent of each other.

Note that HTTP is a stateless protocol – so pages once they have been sent to the server don’t retain their state information. This is why we typically use view state in ASP.NET to store state information of the web pages. There are two types of approach as far as the controller is concerned – the Page Controller and the Front Controller. In the former, the page is the decision maker – it decides when to recreate it, i.e., create the page from the saved view state. In ASP.NET MVC, the decision maker is the controller – so it follows the Front Controller approach.

ASP.NET MVC also provides two view engines – the default ASPX View Engine and the Razor View Engine. Incidentally, a view engine one that is used to render a web page to the response. The WebFormViewEngine provides familiar experience to the ASP.NET developers. It uses the System.Web.Mvc.WebFormViewEngine and ships with ASP.NET MVC.

<%@ Control
Inherits="System.Web.Mvc.ViewPage<IEnumerable<Employee>>"
%>

<% if(model.Any()) { %>

<ul>

    <% foreach(var emp in model){%>

    <li><%=emp.FirstName%></li>

    <%}%>

</ul>

<%}else{%>

    <p>No records...</p>

<%}%>

The Razor view engine uses the System.Web.Razor and is more compact, expressive, and easier to implement.

References

Understanding ASP.NET MVC (Model View Controller) Architecture for Beginners

Architecture Guide: ASP.NET MVC Framework + N-tier + Entity Framework and Many More

Developer Review – Four ASP.NET MVC View Engines

Introducing “Razor” – a new view engine for ASP.NET

Summary

This article presented an overview of the MVC, MVP and the MVVM design pattern with sample code examples wherever applicable. We also discussed the Microsoft variant of MVC called ASP.NET MVC Framework. The most important point to keep in mind is that choosing the right design pattern when designing and architecting solutions only helps designing high performance, scalable, reusable architectures. Please do note that your business requirements should drive your application’s design – not the reverse. Happy reading!

Joydip Kanjilal
Joydip Kanjilal
A Microsoft Most Valuable Professional in ASP.NET, Speaker, and Author of several books and articles. More than 25 years of experience in IT with more than 18 years in Microsoft .NET and its related technologies. He was selected as a Community Credit Winner at http://www.community-credit.com several times. He has authored 8 books and more than 500 articles in some of the most reputed sites worldwide including MSDN, Info World, CodeMag, Tech Beacon, Tech Target, Developer, CodeGuru, and more.

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read