A new Nuget package is provided by Microsoft for developing Single Page Application.
What is Single Page Application? Traditionally, the website/web applications have been using multiple pages to provide the intended functionalities. For e.g. an e-commerce web application might have Catalog, Cart and Payment pages. This model of using multiple pages results in common problems of page reloads and UI flickering on navigation between pages. To address these problems, a single web page can be enhanced using AJAX and DOM manipulation to provide a similar user experience as in desktop applications.
How to decide between developing typical web applications vs Single Page applications?
Some points to consider are:
- Minimize page reloads and flickering on page navigation.
- To provide look and feel as well as user experience similar to desktop applications.
To read more about Single Page Application read the MSDN article Single-page Interface and AJAX Patterns.
Let see how to get started with ASP.NET MVC 4 SPA template.
Single Page Application template is not provided through MVC 4 beta installer but through Nuget package. See details on NuGet pacakge at http://nuget.org/packages/SinglePageApplication.
To install the template, I have opened a VS2010 solution (yuk, you need to open a solution before installing the package, otherwise Package Manger console throws “Install-Package : The current environment doesn’t have a solution open.”) and run command Install-Package SinglePageApplication
On creating a new ASP.NET MVC 4 web application project, you will get the following dialog to select the template to be used.
Major differences as compared to typical ASP.NET MVC project.
- The controller should derive from DataController which derives from ApiController.
After creating the project, to add functionalities you have to do following steps:
1. Add a model class
Here is the TodoItem model class.
2. Add controller by invoking add controller action on the Controllers folder. It opens a dialog, select in Template “Single Page Application with read/write actions and views, using Entity Framework”, select the Model class and select the context class or to create new context class select the option “<New data context…>”.
The generated controller class looks like this:
Under Views, Tasks folder is added with Index.cshtml, _Editor.cshtml, _Grid.cshtml and _Paging.cshtml views in it.
Under Scripts folder, TodoItemsViewModel.js is added.