ASP.NET MVC — A Powerful and Flexible Tool for Developing Rich Data-Driven Websites
Wednesday, September 25, 2013
MVC, which stands for “Model, View, Controller” is both a general software pattern and a number of specific architecture implementations used to design websites and applications.
As a general concept, MVC describes a software architecture pattern, whereby an application’s logic is split into three distinct layers. These are:
- The Model. The data that is stored and manipulated in the application, and the objects that define this data.
- The Controller. The core of the application that manipulates the data based on user inputs, and serves up views of this data.
- The View. The graphical presentation of the data to the user.
The primary benefit of MVC is in this separation of components, because changes to one part of the program will then have a much more limited impact on other parts. It also enables multiple implementations of different parts depending on need, more of which I’ll go into at the end of this article.
General Rules and Operation of MVC Implementations
There are certain rules that allow MVC to work in such a way that its ultimate flexibility can be exploited. These rules centre around keeping components separated, and are roughly as follows:
- The Model can know nothing of the View and the View knows nothing of the Model. In this way changes to either the Model or View do not impact each other and can be made in isolation.
- The Model knows nothing of the Controller, but the Controller can access the Model and change it if necessary.
- The View and Controller both know about each other. The View provides user input which is sent back to the Controller, allowing updates to the system, whilst the Controller updates the View based on changes in the Model or other Controllers.
The following diagram illustrates this mode of operation
Microsoft’s Implementation of ASP.NET MVC for Web Applications
There are many different implementations of MVC libraries available today, but as a .NET programmer I’m mainly interested in what Microsoft has to offer, which is ASP.NET MVC.
ASP.NET MVC is a complete solution that comes with Microsoft’s Visual Studio suite for software development, and allows rapid implementation of feature-rich websites based upon the MVC architecture. In many ways, the availability of ASP.NET MVC is a step forward from the old days of ASP.NET web forms. In addition to providing a clean separation of data, business logic and presentation as described above, it has a number of other benefits.
It enables intuitive and easy control over the rendered HTML through the Razor scripting engine. Using Razor, object data from the Controller can be seamlessly integrated inside HTML statements using the “@” escape character, making pages much easier to read and to write. Take a look at the following code snippet, which shows the dynamic display of some Model data served by the Controller tucked in neatly with the View’s HTML:
<a href="@OtherSite.Url"> @OtherSite.Name</a>
Also, ASP.NET MVC follows more closely the stateless nature of the web which, when coupled with simple URL Routing, allows for excellent SEO (Search Engine Optimization), and external linking into the website to produce specific and detailed views of data. You can often spot MVC websites by the tell-tale URLs, which feature neat sequences of numbers or codes interspersed with “/” separators such as the following fictional link:
The above example URL would, for instance, display the details of Order number “104554”, within the “pending” category of “order” objects, served up by the appropriate controller. As you can see, there is no actual “page” evident from this URL (no .htm or .aspx at the end), and this is because ASP.NET MVC uses a neat Routing engine with its Controllers to streamline connections between Views. The result is not only easier programming better suited for the display of large quantities of database information and records, but the result is human readable. Additionally, because ASP.NET is stateless, and relies on standard internet protocols, the URL can be copied and pasted into another website or email, and a later visit by another will render exactly the same view.
For an example of a recent website developed by myself with Ballard Chalmers using the ASP.NET MVC framework, check out the United Nations GICHD Munition Identification Tool: http://cmid.gichd.org.
Example MVC Application: Creating Views for Mobile and Regular PC Platforms Using the Same Controller/Model
With the dramatic rise in smart mobile devices accessing the internet, web programmers have been increasingly challenged in having to cater for different forms of website rendering across so many different platforms.
Currently, one could consider three main divisions in web client configurations today:
- Traditional PCs running Windows, Mac OS or Linux, with a screen/mouse/keyboard combination.
- Smart phones, running Windows Phone, Android, iOS or BlackBerry OS, with either a touchscreen (most commonly used today), or thumb-pointer (once common but less so today).
- Tablet devices, running Windows 8, Android or iOS, with a touchscreen and either “hard” or “soft” keyboard.
These three different client environments create very different demands on how to display, and possibly receive, information. For instance, traditional PCs and tablets have plenty of screen area for rendering large and potentially complex layouts, whereas smart phones do not. Tablets and most smart phones use touchscreens which can be a very different way of selecting data or navigating the site or individual pages when compared to a traditional PC with mouse and keyboard.
ASP.NET MVC can leverage its power from having strong separation between the View and the Controller/Model towards handling this problem.
In the diagram below, an example flight booking website is able to implement different views from the same controller, by routing the display rendering to different View classes upon detection of the browsing device type:
The same data source(s) of flight information (Flights Model), along with the same queries and business logic to collate this data ready for display (FlightResultsController) can therefore be used to display flight results in different views depending upon whether the device is a traditional PC (FlightResultsViewPC), a tablet (FlightResultsViewTablet) or smartphone (FlightResultsViewSmartPhone), thus reusing as much code as possible, and reducing time to development and future maintenance.
ASP.NET MVC is an excellent and commonly used tool for developing flexible websites which have a strong decoupling of presentation, business objects and data layers. The framework is ideally suited to websites which have a strong data/query presence, and to sites which need to display views in different forms depending on different client devices.
By Ben Ranson, Associate Senior .NET Consultant
Have a comment? Let us know below, or send an email to firstname.lastname@example.org