Single Page Applications in ASP.NET MVC 4

Posted by Jonathan Allen on Feb 24, 2012

Sections

Architecture & Design,

Development

Topics

ASP.NET MVC ,

ASP.NET ,

.NET ,

Programming ,

ASP.NET SPA

Share |

RELATED Research

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.

Browser-Side

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

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.