The MVC and MVVM Patterns

Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app.

SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript. For the traditional ASP.NET developer, it can be difficult to make the leap. Luckily, there are many open source JavaScript frameworks that make it easier to create SPAs.

 

In this article, I’ll walk through creating a simple SPA app. Along the way, I’ll introduce some fundamental concepts for building SPAs, including the Model-View-Controller (MVC) and Model-View-ViewModel (MVVM) patterns, data binding and routing.

 

The sample app I created is a simple movie database, shown in Figure 1. The far-left column of the page displays a list of genres. Clicking on a genre brings up a list of movies within that genre. Clicking the Edit button next to an entry lets you change that entry. After making edits, you can click Save to submit the update to the server, or Cancel to revert the changes.

 

 

The MVC and MVVM Patterns

The MVC pattern dates back to the 1980s and early graphical UIs. The goal of MVC is to factor the code into three separate responsibilities, shown in Figure 7. Here’s what they do:

• The model represents the domain data and business logic.
• The view displays the model.
• The controller receives user input and updates the model.

 

 

A more recent variant of MVC is the MVVM pattern (see Figure 8). In MVVM:

• The model still represents the domain data.
• The view model is an abstract representation of the view.
• The view displays the view model and sends user input to the view model.

 

https://msdn.microsoft.com/en-us/magazine/dn463786.aspx