Cloudy Developer

Upgrading an ASP.NET MVC 3 App to Work With Page Inspector

If you haven’t had a chance to play around with the new Page Inspector feature in Visual Studio 2012, drop everything and give it a try. It’s one of the major new features in the next version of Visual Studio and it’s amazing if you want to quickly make and see changes for your site all without leaving Visual Studio. You can fire up Page Inspector by right clicking on your site or app and choosing “View in Page Inspector”.

Unfortunately, if you’re bringing an older ASP.NET MVC 3 app to Visual Studio 2012, Page Inspector will not work for you out of the box. While you’ll initially see your site loaded in the Page Inspector Browser window, you won’t actually get any mappings between Page Inspector and your files. In the screenshot below, you’ll see there’s a single problem listed.

The problem says “Project must use Razor v2 or later” so we definitely need to upgrade that. Unfortunately, we need to do quite a bit more than that. We need to go through the larger process of updating an MVC 3 application to MVC 4.

Before we get started, one gotcha to call out.

README: If you’re application used the Visual Studio 2010 “deployable dependencies” feature, you need to delete the MVC, Razor and WebPages related dll’s in the special “_bin_deployableAssemblies” folder. If you don’t, these will always be copied on application build and will overwrite our attempts to upgrade the assemblies.

 

Quick bit of background on the “deployable dependencies” feature – This was a way to ensure an application had the necessary MVC 3, Razor, and WebPages binaries copied to an app’s “bin” directory so that on deployment to a remote server, which did not have these files in the GAC, the app would run. Now that we have all of these bits installed via NuGet packages, this feature has been deprecated. You wont’ see it in Visual Studio 2012.

Anyway, in the special “_bin_deployableAssemblies” folder delete these files:

• System.Web.*
• Microsoft.Web.*
• WebMatrix.Data.*

With those assemblies deleted, we’re ready to start the upgrade process. We need to upgrade:

• Razor v1 to Razor v2
• WebPages v1 to WebPages v2
• MVC 3 to MVC 4

Upgrading MVC 3 to MVC 4 requires more than installing new bits. We also need to do some manual code tweaks which I’ll eventually get to below.

So let’s update the bits. NuGet to the rescue!

Right-click on the project in “Solution Explorer” and select “Manage NuGet Packages”.

First, search for “Microsoft.AspNet.Razor” and install the “Microsoft ASP.NET Razor 2” package.

Now, go back to the “Manage NuGet Packages” menu and search for “Microsoft.AspNet.WebPages” and then install the “Microsoft ASP.NET Web Pages 2” package.

If you run your app now, you’ll get:

Conflicting versions of ASP.NET Web Pages detected: specified version is “1.0.0.0″, but the version in bin is “2.0.0.0″. To continue, remove files from the application’s bin directory or remove the version specification in web.config.

Don’t worry. We’re making progress here. Now we just need to update the bits from MVC 3 to MVC 4.

Go back to the “Manage NuGet Packages” menu once more and search for “Microsoft.AspNet.Mvc” and then install the “Microsoft ASP.NET MVC 4” package.

Great work! We’ve updated the Razor, WebPages and MVC bits.

Now for the manual code tweaks to get the application targeting these newer bits. A whitepaper has been written documenting the steps for Upgrading an ASP.NET MVC 3 Project to ASP.NET MVC 4. Someday down the road, we might have a tool that automates this like we’ve had for previous versions of MVC, but for now, it’s going to be a manual process. After you’ve gone through the steps and if everything works as expected, you’ll be ready to enjoy the awesomeness that is Page Inspector.

Hope this helps.

20. July 2012 by Mark Berryman
Categories: MVC, Page Inspector, Upgrade, Visual Studio | 1 comment