ASP.NET MVC 4 Developer Preview is out and has some nifty new mobile features that will allow you to target mobile devices.

Mobile views

The new “Display Modes” feature lets an application render a specific view based on the device making the request. A desktop browser accessing a page might cause Index.cshtml to be rendered, but if the request comes from an iPad or an Andriod phone, Index.mobile.cshtml may be rendered. This convention-based approach lets you tailor your views without requiring any code changes.

The suffix “mobile” works out of the box, but you can also register your own display modes that target specific devices any particular way you wish. In the global.asax you could register something like the following:

DisplayModes.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
   ContextCondition = (context => context.Request.UserAgent.IndexOf
       ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});

This will register a mode specifically for iPhones, and allow you to create view pages with “iPhone” as a suffix, such as MyView.iPhone.cshtml.

See the release notes for additional details.

Programmatically detecting a mobile device

You may begin to add some mobile views to your application, only to realize that you actually need to customize more than just the way your views are rendered. Maybe you need to add or remove some of the data your page is querying or do something different altogether. I recently created a mobile version of this blog and couldn’t just use home controller action as-is. I wanted my mobile view to list a summary of all of my blog posts, rather than the full content of just the first 3 posts, which is what you see in a desktop browser.

HttpBrowserCapabilitiesBase browser = HttpContext.GetOverriddenBrowser();

//Some of the many properties, with values as seen from a Windows 7 Phone (emulator):

browser.Type; //IEMobile9
browser.Id; //iemobile
browser.MajorVersion; //9
browser.IsMobileDevice; //true
browser.InputType; //virtualKeyboard
browser.Crawler; //false

Simply call HttpContext.GetOverridenBrowser() to get access to the browser capabilities and you can determine whether it’s mobile, and act accordingly.  This method is an extension method in the System.Web.WebPages assembly, so don’t forget to add a using statement for this namespace!

Overriding the browser type

Detecting a mobile device like this isn’t new, of course. The first version of ASP.NET MVC allowed you to inspect the attributes of the requesting user-agent and chose the proper view to render. The downside of this is that there was no out-of-the-box way for a user to override this. Ever visit a site with your mobile phone and be presented with a stripped down view when you desperately wanted to see the full desktop-browser version, but couldn’t?

MVC 4 has this capability out-of-the-box with the SetOverriddenBrowser() extension method. You can call this and specify a browser type override. This is what the view switcher does in the jQuery.Mobile.MVC sample NuGet package, letting a user select whether they wish to be handled as a desktop or mobile device:

public RedirectResult SwitchView(bool mobile, string returnUrl) {
    if (Request.Browser.IsMobileDevice == mobile)
        HttpContext.ClearOverriddenBrowser();
    else
        HttpContext.SetOverriddenBrowser(mobile ? BrowserOverride.Mobile : BrowserOverride.Desktop);

    return Redirect(returnUrl);
}

The cool stuff comes from HTML5 and jQuery

ASP.NET MVC 4’s mobile features aren’t all that exciting to tell you the truth. The only new features so far are just some helpers and tooling around a technique that’s been around forever. That said, it’s a great addition to the framework.

What's really exciting is the things jQuery Mobile and HTML5 bring to the table, allowing you easily build slick UIs that will look great on a phone or tablet and rival a native application. For more on that, definitely check out the tutorial over on the ASP.NET website that will use these new MVC 4 features and jQuery Mobile.