Single Page Applications in ASP.NET MVC 4

by Jonathan Allen on Feb 24, 2012 |

The ASP.NET MVC 4 beta includes an experimental project for developing “single page applications”. Known as ASP.NET SPA, this project type is based on a stack of open source libraries and the MVVM pattern made popular by WPF and Silverlight.


At the bottom of the browser-side stack is the well-known jQuery library along with the Unobtrusive Ajax, jQuery UI, and jQuery Validation plugins.

Next in the stack is Upshot. It supposedly is a data access and caching library that builds on jQuery and Knockout. In the sample code, a knockout compatible view-model is automatically generated. Inside it are Upshot-based functions for handling communication with the service layer. It also includes code for driving the UI. (Like in XAML technologies, it appears that a SPA view-model can quickly become a dumping ground for all manner of code.)

MVVM style data binding is done using the Knockout framework. Like XAML based technologies, Knockout offers declarative data binding. Likewise, it works best when the data and view models are based on observables, which expose property change events. However you don’t have to explicitly raise the event, even for computed properties. Rather than setting a DataContext property on a control you call ko.applyBindings. This doesn’t prevent you from having child controls with a different data context, they simply need to use a “with” or “foreach” binding. The “with” binding is like binding a control’s DataContext to a property on the view model, while the latter effectively creates a items control.

At the top of the stack nav.js, a new library from Microsoft.


Server-side, the application frame is represented by a normal MVC page. The various views within the application are represented server-side by partial pages. In the sample, Knockout’s data binding is used to dynamically show and hide them.

Most of the server-side data access is handled by the abstract class DataController. This is a subclass of the ASP.NET Web API’s ApiController that offers basic methods for submitting a ChangeSetEntry from the client to the server. Developers who prefer using stored procedures or third-party ORMs can inherit from this directly; those leaning towards Entity Framework can use DbDataController. Visual Studio’s scaffolding support can automatically generate the latter with basic CRUD operations exposed.

Rate this Article


Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

General Feedback
Marketing and all content copyright © 2006-2016 C4Media Inc. hosted at Contegix, the best ISP we've ever worked with.
Privacy policy

We notice you're using an ad blocker

We understand why you use ad blockers. However to keep InfoQ free we need your support. InfoQ will not provide your data to third parties without individual opt-in consent. We only work with advertisers relevant to our readers. Please consider whitelisting us.