Setup MVC 3 with Dependency Injection and Mobile support (IPhone, IPad, Windows Phone) in a few minutes!

by 27. March 2011 12:05

Not that it took me only five minutes....   I was able to gleen bits and pieces from different sites, however most of the information available (as of this date) applies to beta code that doesn't work with the latest MVC 3 release.  As a result this task started yesterday (Saturday) at approximatey noon and I am just now wrapping it up (Sunday evening 9:00pm)....   Lots of dead-ends and misinformation.... Fortunately I ran into Brad Wilson's site which started to streamline the process by filling in the blanks.

Why did I have to bleed?   I am writing my wife a new website for her business that will automate all of her mundane tasks.   This week she is at home (Amarillo, TX) taking care of her business while I am on location for an out-of-state contract; I proudly tell her "check out the site!".  She calls me back and my pride quickly turned to an unexpected jaw drop - she said "I just accessed the site with my sister's IPad and I can't see the movies - I get a Silverlight button that won't install - it isn't supported".  Naturally she turned to her IPhone next with similiar results - except the screen was real tiny.   

We don't want to limit her client base to desktops (particularly in this day and age of IPhone/IPad) so I am starting to see an early return on investment for my new Mac Pro plus (I'll also be writing her IPad/IPhone apps).  Sure enough, when I accessed the site with both the IPhone and IPad emulators I quickly saw that the site was not where it needed to be.  Early in the research process I learned I can use MP4's for both of these devices so the top priority was providing mobile support for her MVC 3 site.  As of this writing only the IPhone/Windows Phone pages have an MP4 sample - IPad is a work in progress).

Cool Hopefully this will save you some time

Source code: (4.04 mb)

Setting up a brand new MVC 3 project with Unity (DI) and Mobile support

  1. Create the new MVC 3 project and add a reference to the Gwn.Library.Desktop project
  2. Copy the Mobile folder to the "Views/Home" folder
  3. Copy the _LayoutMobile.cshtml file to the "Shared" folder 
  4. Update the _ViewStart.cshtml as shown in the top right pane (image below)
  5. Update the Global.asax.cs file with lines 43-54 below

Your done!

You'll want to use the IE 9 developer tools to easily switch "user agents" between IPhone, IPad, Windows Phone, and Desktop modes.   Once I launch the application in debug mode I simply hit F12 to open the developer tool view, select Tools, Change User Agent string, and select the platform I am developing/testing for.   Note that the non-desktop devices do not have tabs - this is configurable from the applicable extension.

Below are the custom settings I used for the three platforms - I prefix with a forward slash because the code will do a IndexOf > 0 so I need to ensure my mock agent string does not start at zero.   The current settings used for development worked for the IPhone, IPad and Windows Phone hardware devices.

Once you select a new user agent you simply have to go back to the browser and hit refresh - it will use the specified user agent!


Blog videos and references to CodePlex projects are no longer valid