Building Single Page Apps with ASP.NET MVC4 - Part 5 - using ASP.NET MVC4 RC

This blogpost is part of a series about building Single Page Applications using ASP.NET MVC 4. Parts 1 through 4 use ASP.NET MVC4 beta but this post will focus on building SPA after upgrading to ASP.NET MVC 4 RC

1. Single Page Applications - Part 1 - Basic Desktop application
2. Single Page Applications - Part 2 - Advanced Desktop Application
3. Single Page Applications - Part 3 - Basic Mobile Application
4. Single Page Applications - Part 4 - Sorting, Filtering and Manipulation data with upshot.js
5. Single Page Applications - Part 5 - Using ASP.NET MVC4 RC

In the release candidate for ASP.NET MVC 4, Microsoft decided to remove the Single Page Application template and supporting files. This was no surprise as I already concluded in part 4 of this series that SPA was far from being ready.

So how do you build an SPA after installing MVC4 RC? Peter Porfy described one solution on his blog. Essentially he is taking the latest nightly build of ASP.MVC4 and correcting the errors. The downside to his solution is that it looks like a lot of work and this is still very unstable.

The key to my solution lies in the fact that SPA written against ASP.NET MVC4 beta, still run on machines with only the MVC4 RC installed. All the SPA essentials can be found in NuGet packages. As it happens, I had created a new MyGet feed to enable NuGet Package Restore so I didn't have to include the SPA packages every time I released new code on my blog.

I realize that this means you are not really using the MVC4 RC but at least you can continue building SPA after installing it until Microsoft releases a new and supported version.

Starting a new SPA using VS 2010 with ASP.NET MVC 4 RC

Follow these steps to get started:

• Close Visual Studio 2010 if running.
• Uninstall Microsoft ASP.NET MVC4 beta if installed
• Download and Install Microsoft ASP.NET MVC4 RC
• Open Visual Studio 2010.
• Menu --> Tools --> Library Package Manager --> Package Manager Settings --> Package Sources
• Add a new package source and point it to http://www.myget.org/F/aspnetspa4beta/

Create a new MVC project and install the SPA NuGet packages from the PM Console:

• Menu --> File --> New --> Project --> ASP.NET MVC4 Web Application --> Internet Application
• Find the packages.config file and remove the line that includes the "EntityFramework". This version 5.0.0-rc RC is incompatible with the version 4.3.1 that we need. The line looks like this:

<package id="EntityFramework" version="5.0.0-rc" targetFramework="net40"/>

• Go to your project references and remove the reference to EntityFramework here as well. Below screenshot shows both action:
  
• Menu --> Tools --> Library Package Manager --> Package Manager Console

Make sure that 'Package source:' points to my MyGet feed otherwise you will download the packages from the official not-supported NuGet source

Install-Package SinglePageApplication.CSharp
Install-Package EntityFramework

After closing and re-opening the solution you're now ready start developing a new SPA

Migrating DeliveryTracker to MVC4 RC

I took the source code of DeliveryTracker4 from my SkyDrive and used this as a starting point for a new project that I also conveniently had called 'DeliveryTracker' to minimize namespace problems

• This is the list of files and folders I copied and included into the new 'DeliveryTracker' project.

  .\DeliveryTracker\Content\Site.mobile.css
  
  .\DeliveryTracker\Controllers\DataServiceController.cs
  .\DeliveryTracker\Controllers\ViewSwitcherController.cs
  
  .\DeliveryTracker\Models\AppDbContext.cs
  .\DeliveryTracker\Models\DomainModel.cs
  
  .\DeliveryTracker\Scripts\App
  
  .\DeliveryTracker\Views\Home
  .\DeliveryTracker\Views\Shared\_Layout.cshtml
  .\DeliveryTracker\Views\Shared\_Layout.mobile.cshtml
  .\DeliveryTracker\Views\Shared\_SpaScripts.cshtml
  .\DeliveryTracker\Views\Shared\_ViewSwitcher.cshtml
  

• I changed the connectionstring in both the connectionStrings and entityFramework sections of the web.config file

  <connectionStrings>
    <add name="DefaultConnection" providerName="System.Data.SqlClient" connectionString="Data Source=.;Initial Catalog=DeliveryTracker;Integrated Security=SSPI" />
  </connectionStrings>
  
  <entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlConnectionFactory, EntityFramework">
      <parameters>
        <parameter value="Data Source=.; Integrated Security=True; MultipleActiveResultSets=True" />
      </parameters>
    </defaultConnectionFactory>
  </entityFramework>
  

There were some additional steps to take before I could get my DeliveryTracker sample to function correctly.

• Update the global.asax.cs file to add my database initializer to the Application_Start function

  #if DEBUG
  System.Data.Entity.Database.SetInitializer
    (new DeliveryTracker.Models.AppDbContextSeedInitializer());
  #endif
  

• Update the site.css file to include the two classes that were added to highlighted changes on screen

  .delivered
  {
      text-decoration: line-through;
      color: #008000;
  }
  
  .updated
  {
      background-color: #FFFF00;
  }
  

• Update the RouteConfig.cs file to make the DataService controller reachable to accept POST'ed updates.

  routes.MapHttpRoute(
    "DataService", // Route name
    "api/DataService/{action}", // URL with parameters
    new { controller = "DataService" } // Parameter defaults
  );
  

Download the source code

You can download the source code from my SkyDrive (Visual Studio 2010 project)