ASP.NET MVC 4 Developer Preview: Display Modes

This is the second article focusing on the new additions to ASP.NET MVC 4.  Today’s article will focus on using Display Modes.  This selects a view depending on the browser making the request, which means you can target specific devices and give the user a truly rich experience.

Before getting started, you should read the first article in this series on ASP.NET MVC 4 Developer Preview.

Installation

Before undertaking any development, you’ll need to install the MVC 4 builds. The simplest way to do this is via the Web Platform Installer. MVC 4 is available for Visual Studio 2010 or Visual Studio 2011 Developer Preview.

All of the MVC articles I’m authoring are developed in Visual Studio 2011 Developer Preview. Below are the links to get started.

Default Mobile Views in MVC 4

It’s important to understand a new feature in MVC 4.  By default, if you add a .mobile.cshtml view to a folder, that view will be rendered by mobile and tablet devices.

fig1

This is a nice feature, but if you want to target specific devices, such as the iPhone, iPad or Windows Phone, you can use Display Modes.

To do this, you need to register a new DefaultDisplayMode instance to specify which name to search for when a request meets the condition.  You set this in the global.asax file in the Application_Start event.  Here’s how to specify a display mode for an iPhone.

protected void Application_Start()

{

DisplayModes.Modes.Insert(0, new DefaultDisplayMode("iPhone")

{

ContextCondition = (context =>context.Request.UserAgent.IndexOf

("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)

});

}

To consume views that meet this condition, you create a view but change the extension to .iPhone.cshtml.  Likewise if you want to target an iPad, create an iPad instance.

DisplayModes.Modes.Insert(0, new DefaultDisplayMode("iPad")

{

ContextCondition = (context =>context.Request.UserAgent.IndexOf

("iPad", StringComparison.OrdinalIgnoreCase) >= 0)

});

Basically, Display Modes checks the User Agent.  If it finds a matching suffix, it will display any view it finds that matches the suffix.  The suffix is the parameter that’s passed to the DefaultDisplayMode method.  To see this in action, I’ve created a Home controller and added three views to the Home folder.

fig2

The differences between the views is the H1 heading.  They’ll display iPhone, iPad or Desktop depending on the device.  I’m also displaying the User Agent so you can see it changing.  First I’ll debug the website through my desktop browser.  You can  see the desktop specific page being served.

fig3

Now navigate to the website using an iPhone.  You’ll see the iPhone specific page being served.

fig4

Switching over to an iPad, you’ll see the iPad specific page being served.

fig5

This is a simple way to target specific devices, producing a view that suits the device – and thus the user.

Testing with Emulators

To test these new features, you can either use a physical iPhone or iPad, or you can use an emulator.  The emulator I was using is from MobiOne.  You can download a 15 day free trial here.

The Windows Phone RC emulator is free and can be downloaded here.

Likewise another good option is the User Agent Switcher add-on for Firefox, which changes the user agent that’s sent to the browser.  That can be downloaded here.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • p

    Cannot wait. MVC is soo cool

  • http://www.sergiotapia.com Sergio Tapia

    Thanks for the article, very short and concise. I’m download the tools right now! I love how MVC makes the written code so crisp and succinct.

  • http://msprogrammer.serviciipeweb.ro/ Andrei Ignat

    Do you add some mobile files to recognize user agent or it is a default MVC4 installation?

  • http://www.aspmvcnet.com Ali Karayel

    Could you give a download link for this sample project.

    Thanks in Advance.

  • Malcolm Sheridan

    @Andrei

    You need to add the prefix you’re looking for. So iPhone, iPad, Android etc etc. If you add mobile.cshtml, that’ll work for mobile devices, but you won’t be able to target them.

    @Ali

    Yes I’ll post a link to the source tonight.

  • Malcolm Sheridan

    @Ali

    All of the code samples can be downloaded from http://bit.ly/w3KQW3.

  • http://weblogs.asp.net/mhildreth Mark Hildreth

    Just FYI – an easy way you can test changing your user agent is with Safari. Just go to Develop -> User Agent and pick from the list.