BT
x Your opinion matters! Please fill in the InfoQ Survey about your reading habits!

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.

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.

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

Discuss

Educational Content

General Feedback
Bugs
Advertising
Editorial
InfoQ.com and all content copyright © 2006-2014 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT