MVC 4 - Game Changer

During the //build/ Day 2 keynote, Scott Guthrie announced a new release of MVC. MVC 4 is a developer preview meaning "danger, Will Robinson, danger". However it is definitely worth a look as it makes building mobile web applications easier. It is also what I have been waiting for to get moving on Web LOB Accelerator. Read on for how to build a multi-device site using MVC 4.

One downside is that MVC requires Visual Studio. So you will need at a minimum Visual Studio Web Developer Express SP1 (link to Web Platform Installer). Since I work for Microsoft I am using Visual Studio Ultimate. Some other things you will need is different browsers and/or devices like iPad, iPhone, Android, WP7, etc. To simulate some of the devices

• Windows Phone Emulator
• Opera Mobile Emulator
• Apple Safari setup for iPhone. To simulate iOS go into the setup Advance Preferences and ensure that "Show Developer menu in menu bar" is checked. Then use the developer menu to change the user agent string.
• ibbdemo2 emulates an iPhone web browser.
• Android Emulator

NOTE: There is no substitute for using a real physical device. Emulators are great for getting your UI roughed out. However there are differences so do not gamble use a real device for final testing.

Make sure you install MVC 4 using Web Platform Installer or the standalone installer. I prefer Web Platform Installer which you might need to upgrade. There is also a version for Visual Studio 11 Developer Preview.

Hello MVC 4

The first thing is to just build a hello world application. The steps are straight forward

1. Open up Visual Studio 2010 and create a new web site (FIle|New Project).
2. Select ASP.NET MVC 4 Web Application and call it WebLOBApp.
    
3. You will get another dialog box for the type of web application. For now select Internet Application.
    
4. Run the application. The template has guidance on how to modify the basic template that is built into MVC. If you run it in a mobile browser you do not get a mobile specific view.
    

One thing to note is that by default the new template is using viewport. The style sheet is setup for devices with a display under 850 pixels and 850 pixels. If the browser has 850 pixels or less it will use a different layout. You can see this in action by resizing your browser.

jQuery Mobile

Using CSS to change the site can be useful. However what is better is to think through the user scenarios for the device. For example

• if the device is a phone you should probably turn the phone number into a clickable link to call the number
• if the device has GPS and you have an address or destination coordinates you might want a button to show a map or directions to the location

A new way to build Ajax type application for mobile applications is jQuery Mobile. MVC 4 has got your back and has published NuGet package to enable jQuery Mobile. Simple use NuGet (Project|Manage NuGet Packages) and search for jQuery Mobile. Select jQuery.Mobile.MVC and install it.

 

Hit run and watch as the web page blows up. Note this might not happen to you but at least at the time I wrote this there were bugs. Hey it is a developer preview and I did warn you. Fortunately, I can help you fix this. What has happen is that jQuery dependencies are wrong. Look in the script folder for the jQuery-x.x.x*.js files.

You need to fix the layout files (Views\Shared\_Layout.cshtml and _Layout.Mobile.cshtml) to match the new script files. And presto the browser version works again.

<script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>

 

Now run the page in a mobile browser. You should see something like below.

It is a start. A couple of things to notice. The first is the layout for mobile is different. MVC 4 has built-in detection for mobile. Simply append ".Mobile" to the file name and when the mobile detection kicks in if a ".Mobile" file exists that will get used. For example copy the Views\Home\Index.cshtml file and rename it to Index.Mobile.cshtml. Next replace the contents with

@{
ViewBag.Title = "Home Page";

}    <div class="content-wrapper">
        <hgroup class="title">
            <h1>@ViewBag.Title.</h1>
            <h2>@ViewBag.Message</h2>
        </hgroup>
        <p>Hello Mobile Device</p>
    </div>
</section>
}

Loading the page in a mobile browser now gives you different output from a desktop browser.

At this point there are three choices. One use a single set of mobile pages and dynamically change the output when device specific need arises. Or direct MVC to use a specific set of pages for specific devices or sets of devices. The last method is to use both for example setup iOS devices but then have dynamic page generation for linking phone numbers to be dialed depending on whether it is an iPhone or not.

To override MVC page routing you need to add display modes during application start-up. DisplayModes lets MVC know how to route to various content based on condition. It is order based so as soon as it finds a condition and content for that condition it stops. For example to add a separate index page for iPhone you would add the following code to Application_Startup method in Global.asax.cs.

DisplayModes.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
    ContextCondition = Context => Context.Request.Browser.MobileDeviceModel == "iPhone"

});

 

The above code uses 51 Degrees in evaluating what the calling browser is probably running on. You can also use the Official WURFL .NET APIas well. Both can be found using NuGet and searching for WURFL.

If you use 51 Degrees make sure to do the following after adding their NuGet package

• Delete Mobile folder
• Remove Redirect node from 51Degrees.mobi.config

You can just copy the Index.Mobile.cshtml and rename it to Index.iPhone.cshtml. Then change the string "Hello Mobile Device" to "Hello iPhone".

 
Now you have a site that displays a custom index page for

• regular browsers with a client area more than 850 pixels
• regular browsers with a client area 850 pixels or less
• iPhone devices
• Mobile devices

If you would like the code you can find it at GitHub.