Setting up a mobile display mode on a MVC 4 site

Scott ZischerkMVC 4 has a new way to deal with mobile views.  You can now set up individual display modes for mobile and desktop views.

First you need to register the new display mode in the app_start method of the global.asax file.

       , new DefaultDisplayMode("mobile") 
          ContextCondition = (ctx => ctx.Request.Browser.IsMobileDevice)

Here we added a display mode called “mobile” that we set the condition to use this new mode to mobile devices.  Now we would create a controller and view as usual.  Say we create a Home controller with an Index action.  Next we create a new view using the razor engine called Index.cshtml.  To use the newly created display mode we would just create a second view and call it  By using this naming convention we are telling MVC to use the index.cshml view for all requests to the Home controller and Index action, but if the condition of the display mode is met, use the view.  One of the real nice things about this approach is that if a request meets the condition for a mobile view, but one doesn’t exist, it will default back to the desktop view.

You can also use this same convention with master pages.  For the _layout.cshtml, you would add a  Be careful though, as a side effect of the view defaulting back to the desktop view if the mobile one doesn’t exist, you can get a mismatch of master page and view.  If this is not desirable, then can add the following line into your _ViewStart.cshtml file of your site:

DisplayModeProvider.Instance.RequireConsistentDisplayMode  = true;

This is a great way to set up you site with a mobile view and a desktop view and use the same controller for both.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s