70-486 · C# · Certification Test · Computer programming

Different views for different devices using MVC4

You have an MVC Internet application that you want to different views for different devices.  Maybe you want the Windows Phone view to look different than the iPhone view and of course the desktop view will be different because there is just more room to display information.

I will be using MVC4 which as some feature that a as easy to implement in previous versions of MVC. 

So you want to use the same controller and business logic for both mobile and desktop but you want different layouts for each.  This can be accomplished in a couple of ways 1) with Media queries in your CSS and 2) with creating different views.  In this post I’m going to cover how to create different views.

Views Folder

In the view folder you will need to create multiple views with different extensions such as.

     Index.cshtml

     Index.mobile.cshtml

    Index.iPad.cshtml

Each of these views can have their own layout differences in what informaiton shown based on the device (Due to space limitations on different devices).

 

Global.ascx.cs

Add a method that defineds the displaymodes and add a call to the method in Application_Start

private void AddDisplayModes()
{
   DisplayModeProvider.Instance.Modes.Insert(0,
     new DefaultDisplayMode(“Mobile”)
     {
       ContextCondition = ctx => ctx.Request.UserAgent.Contains(“iPad”)

    });
  }

This code looks at the userAgent string and if the string “iPad” is found then the mobile version of the view will be used (if it is found).

Now lets look at how to determine if we are on a specific device like the Kindle Fire.  We would add another DisplayModeProvider.Instance call like this(note the bold for the difference):

DisplayModeProvider.Instance.Modes.Insert(0,
  new DefaultDisplayMode(“Silk“)
  {
    ContextCondition = ctx => ctx.Request.UserAgent.Contains(“Silk\“)
  });

How to test this:

In IE pull up the developer tools by pressing F12.  Then go to Tools->Change user  agent string.  Here you can select a predefined UserAgent string or create a custom user agent string.  In the case of Silk I need to define a user agent string so I will select custom

image

You get this dialog box:

image

Fill in the friendly name and the user agent string(you can find the correct user agent string by using Google). Click Update and Set.  You are now simulating a Kindle Fire browser and you should see your .Silk.cshtml page assuming you have created it.

Changing the browse type after the site has been loaded

That works when you initially load the page but what if you want to change the brower type after it’s been loaded.  For example you are on a mobile device but you want to see the desktop version because there is move information that you need.

You will need to replace Request.UserAgent with GetOverriddenUserAgent()

References

Scott Allen’s MVC4 Fundamentals Mobile Development module

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s