BT

New Early adopter or innovator? InfoQ has been working on some new features for you. Learn more

Single Page Applications in ASP.NET MVC 4

| by Jonathan Allen Follow 127 Followers on Feb 24, 2012. Estimated reading time: 1 minute |

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.

Rate this Article

Adoption Stage
Style

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

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT