Baby Steps for Refactoring Web Forms to MVC

by Admin 26. January 2013 10:58

Refactoring... Uggh, the word that makes most developers cringe.  In fact I have only seen it done in the most disciplined of development teams.  Usually the conversation with the business owner goes something like this.  

Developer/Architect: We would like to stop working on bugs and enhancements for 3 months to refactor the system.

Business Owner: What does that mean?

Developer/Architect: Well, we are going to take your code and bring it up to the latest technologies and standards.

Business Owner: Why is something broken?

Developer/Architect: Umm, no everything is working fine.  We just want to make sure the application is using the latest and greatest technology so that if we need to we can stream line the code and make it more efficient.

Business Owner: Oh so you are going to make it run faster?

Developer/Architect: Not necessarily.

Business Owner: So why are we doing this again?

And so on and so on and so forth...  We don't even let the business know we are refactoring anymore.  We just call it "Maintenance Mode" and be done with it.  But, at most we can squeeze a 6 week release for Maintenance.   So what to do?

Well we usually do partial refactoring.  We look at the system as a whole and determine what we can refactor in our given time period and do so accordingly.  However, MVC introduces a new wrinkle.  It is a complete paradigm shift.  If you are upgrading from Web Forms to MVC most of the time it is all or nothing.  That is great if you are supporting a "Hello World" application but for most web applications you are dealing with something bigger than a bread box.

I am faced with this issue right now in my current position.  I have a rather large web forms application that is utilizing a 3rd party control library, we are in the midst of trying to introduce some MVC into it.  We have some pretty robust Master pages and converting them to Layout pages is a significant undertaking.

What to do?  Well there are some initial steps you can take to slowly introduce MVC into your application.  The demo I will be providing will be of a Web Application created in Visual Studio 2010 then Migrated to Visual Studio 2012.  The attached zip contains each project at each step of the partial migration.

Step 1

Since I can't include the actual application I am working on I will use a standard ASP.NET template application with the template master page.  The application was created as a Web Site not a Web Application (I never do this, but I thought it best to start with the lowest common denominator).

Here is a picture of my website in all of its glory:

Yes I know it is very impressive.  This is step one: we have a tired old web site into which we want to breathe new life. Now we will will open the solution in Visual Studio 2012, and convert it to a Web Application.

Step 2

Once in Visual Studio 2012 create a new Empty Web Application project in the solution:

Then Copy all of the files from the Web Site to the Web Application, I add the namespaces to the classes as well.  My solution now looks as follows:

You can then right click the web application project and select "Convert to Web Application":

This will add all of the designers needed for the application.  Click yes on the dialog:

This concludes step 2 as you have now refactored the 4.0 Web Site to a 4.5 Web Application.  The next step will deal with introducing the various MVC Components.

Step 3

Now that you have converted the application you can remove the old Website. Just right click website and select remove.  This will not delete the site just remove it from the Solution.  Now you can start adding the various items need to support MVC via NuGet:

For this simple project there are only a few that need to be added:

  • JQuery
  • JQuery UI (Combined)
  • Microsoft ASP.NET Razor 2
  • Knockout.js
  • Microsoft ASP.NET Web Pages 2
  • Microsoft ASP.NET MVC 4
  • Microsoft ASP.NET Web Api Core Libraries
  • System.Web.Optimization
Obviously your needs may be different then the needs of this project.  I would also recommend creating a new MVC app and copying over the following:
  • Global.asax
  • Global.asax.cs
  • App_Start (folder)
Once all of the items have been added make sure you add the following ignore routes in the Route Config:
Also change the default route to:
    name: "Default",
    url: "MVC/{controller}/{action}/{id}",
    defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional });
The reason the MVC prefix is added to the default route is to prevent MVC from accidentally picking up an application default path ("http://mysite/") as an MVC path.  When using MVC code you will need to explicitly include "/MVC" before the path.
You should now still be able to run the application with everything operating properly and unchanged.  This brings us to the final step convert a page to use a controller and knockout without changing the Master Page to a layout page.

Step 4

Add a new folder called "Controllers" and Copy the Web.Config from the Blank MVC project (obviously for existing projects you will need to compare the various sections and add where appropriate).  Then add the following class to the Controller Folder:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyNewWebApplication.Controllers
    public class DefaultController : Controller

Now, finally for the good part.  You can either rewrite the existing grid page or create a new one.  I am adding a new one so the pages can be compared. I refactor the page to use knockout.js and my new Default controller.  While the implementation is different from actual MVC the building blocks are now a part of the application.  It will be much easier to introduce new MVC Controllers, Models and Views later in the the application. Here is the new refactored grid:

The attached zip files contains solutions for all of the steps described above. (150.41 kb) (6.39 mb) (14.11 mb) (14.00 mb)


ASP.NET | Knockout JS | MVC4 | nuGet

blog comments powered by Disqus


<<  October 2014  >>

View posts in large calendar

Page List