Create a Single-Page Application in ASP.NET MVC 4

The Holy Grail of web development aims to reduce and eliminate the shortcomings of website and web applications to make them comparable to native applications. Today, we're beginning to see browsers that are endowed with more capabilities that are comparable to native applications. This change has resulted in part of faster and more plentiful bandwidth that has reduced network latency problems, in addition to the advent of technologies such as HTML5. In addition, web services and standardized data formats such as XML and JSON provide rich communications between the client and server. The gap between web and native applications is steadily closing. For more on ASP.NET, see "HTML5 for the ASP.NET Developer" and "How to Use ASP.NET MVC 4 Display Modes in Mobile Web Apps."

But there remains one niggling problem with web applications. Although browsers can now smooth and speed up page transitions, changes, refreshes, and reloads very well, these transitions are a constant reminder to users that they are using a web application rather than a native application that's specifically built for a device. As a result, single-page applications (SPAs) are becoming more common and several development platforms are starting to provide toolsets and resources to build them.

An SPA is exactly what it sounds like: The entire application is contained in a single web page that's loaded once from a web server. As the user interacts with the application, the page loads additional data from the server, which rebuilds portions of the page but never requires a complete page change or refresh. It's very similar to AJAX because it relies heavily on client-side JavaScript to make it work quickly and seamlessly.

As with many "new" web technologies, SPAs aren't really new and are built on mature, tried and true technologies. You've had the tools available for awhile now to build SPAs as long as you weren't afraid to get your hands dirty with client-side code to build server infrastructure that supports partial page and data update requests. However, SPA's growing notoriety and recognition of its usefulness has resulted in more development tool support.

Improved support is coming soon to Microsoft's ASP.NET MVC web development framework as a part of the upcoming ASP.NET and Web Tools 2012.2 update. Currently available as a Release Candidate (RC), this is the next release in the continuous flow of out-of-band updates that Microsoft has committed to providing for Visual Studio development tools. After you install the update, you will have a new SPA project template that's available once you create a new ASP.NET MVC 4 project, which is shown in Figure 1 below.

Figure 1: Creating a single-page application in ASP.NET MVC 4 

The resulting project shows one way to build a SPA in ASP.NET MVC 4 that's complete with Knockout data binding support, ViewModels and DataContexts, and Entity Framework models and data transfer objects (DTOs) on the server using a Web API. Figure 2 shows that the sample application is a basic Todo list manager. The project also includes a view that's the heart of the single page in the application.

Figure 2: Sample single-page application in ASP.NET MVC 4 

Again, the Todo sample application demonstrates one way to create a SPA. You can also mix and match other technologies and tools that you want to use. You'll need to go beyond this example if you want things such as multiple views, navigation, more robust data update and syncing support, and other features that make for a more robust and comprehensive application. The SPA template is a worthy starting point for your first few SPA applications until you get the feel of things. Once you've have a handle on things, then you can create an empty ASP.NET MVC project and go wild by using whatever tools and technologies you desire.

A SPA is probably not appropriate for every web application, but you can certainly mix and match SPAs with other web pages to make a complete site or application. You could also use a SPA for a portion of an application that requires heavy user interaction in a single functional area in which the entire site consists of multiple SPAs and more conventional web pages. Therein is one of the truly beautiful things about the state of web development today. You can bring together content and code to accomplish nearly anything by using established standard technologies that's supported in most browsers. SPAs are just one more useful tool in your development arsenal!