ASP.NET MVC 4: Display modes

One new features of ASP.NET MVC 4 is support for display modes. This means that you can conditionally show different output to different user agents like desktop and mobile browsers. Of course, you can define your own custom rules too. In this posting I will show you how display modes work and explain how to use them in your ASP.NET MVC applications.

User Agent Switcher for Firefox

If you don’t have access to your computer from mobile device you can use User Agent Switcher add-on for Firefox. This add-on allows you to change user-agent string so your Firefox identifies itself as a browser you say for web servers.

User Agent Switcher is set to identify Firefox as iPhone 3.0. You can change settings
and add more user-agent strings if you like. The add-on is free to use.

Now let’s get to real business.

Creating mobile view

Create new ASP.NET MVC 4 internet application and leave it as it is created by Visual Studio. We will create now one special view for all mobile devices to show how ASP.NET MVC 4 uses display modes.

Now create new view and name it as Home.mobile.cshtml. Take the code here using copy and paste to get it to your new mobile view.

@{     ViewBag.Title = "Home Page Mobile";
}
 
<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href=http://asp.net/mvc 
    title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
 
<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Now run your project from Visual Studio and take a look at the page as it is shown in your default web browser. Run Firefox, make it identify itself as iPhone and open same URL in it. You should see the following page.

What happened? ASP.NET detected Firefox as iPhone. Based on settings in browser capabilities file ASP.NET takes iPhone as mobile device. Now ASP.NET MVC 4 uses this information to detect the correct view. If there is view that has string “.mobile” before file extension ASP.NET MVC 4 uses this view. If such view is not found then default view is used instead.

Creating custom display mode rules

When you are targeting wider range of mobile devices or other user agents then you usually face incompatibility problems that different user agents of same type may have. By example, not all mobile web browsers support CSS fully and for older and poorer mobile web browsers you should create special primitive views. Of course, there are also devices like smart phone browsers that are very powerful and you may want to use some UI parts to use some specific features of these browsers.

You can define your own display mode rules in Application_Start method of Global.asax. Here is one simple example taken from release notes.

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
 
    RegisterGlobalFilters(GlobalFilters.Filters);
    RegisterRoutes(RouteTable.Routes);
 
    DisplayModes.Modes.Insert(0, new DefaultDisplayMode("iPhone")
    {
        ContextCondition = (context => context.Request.UserAgent.IndexOf
            ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
    });
}

Of course, now we need also additional view for iPhone. Add new view for Home controller to your project and name it as Home.iPhone.cshtml. My test view has the following contents.

@{
    ViewBag.Title = "Home Page iPhone"; 
} 
 
<h2>Welcome to iPhone page</h2> 
<p>@ViewBag.Message</p> 
 
<ul data-role="listview" data-inset="true"> 
    <li data-role="list-divider">Navigation</li> 
    <li>@Html.ActionLink("About", "About", "Home")</li> 
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
</ul>

After running your project and opening it in Firefox you should see something like this.

Now we have also separate view for iPhone. We inserted new rule as first one to the display mode rules so before ASP.NET applies mobile devices rule to requests made from iPhone our rule will be detected and applied.

Conclusion

Display modes support in ASP.NET MVC 4 provides us with powerful feature to support different user agents and keeping our project clean at same time. If you create views for different user agents and these views support same type of model then you will have less code in your controllers and views that are not messy and full of different rendering logic. What is the best thing – display modes support is flexible and extensible like many other parts of ASP.NET MVC framework.