Click here to Skip to main content
Click here to Skip to main content
Go to top

Desktop and Mobile Browser View in MVC 4 (MVC 4 Display Mode)

, 30 Dec 2013
Rate this:
Please Sign up or sign in to vote.
VC 4 Display Mode. Different view selected based on Desktop or Mobile browser request

I. Introduction of MVC 4 Display Mode

MVC 4 has introduced display mode feature which will simplify how to implement different versions of view for different devices.

In other words, suppose we have a web page content which is designed for the desktop version of browser but in mobile browser or any other device browser contents are not properly readable, now in this case we want to create a different view for different devices.

Earlier also, we were implementing compatibility issues by our own framework and with more coding. MVC 4 very much simplified this to implement.

We will see below in STEPS how to implement display mode feature in MVC 4.

II. How to Test?

Below are the options through which we can test different views: 

  1. We can have emulator; I am using Windows 7 emulator in this article.
  2. Also, we can test from the desktop browser by setting the use agent value. Here are the steps to set the user agent:

    Open IE --> press F 12 --> tools --> change user agent string --> select the appropriate one.

Refer to the below figure:

Above, I did the setting for the Windows phone 8. I have not installed add on for iPhone .

III. Generic Implement for Mobile Device View

Please follow the below steps to implement the generic mobile device view.

Step 1: Create a layout view for the mobile device. To quickly implement, copy “Views\Shared\_Layout.cshtml” paste to the same location and modify the layout file name as “\_Layout.Mobile.cshtml” (“Views\Shared\_Layout.Mobile.cshtml”).

Step 2: Modify the “\_Layout.Mobile.cshtml” page header text to identify that layout view run from mobile version.

Step 3: Copy the “Views\Home\index.cshtml” and paste to the same location and modify the file name as “Views\Home\index.Mobile.cshtml”.

Step 4: Modify the “\Index.Mobile.cshtml” page header text to identify that index view run from mobile version.

That’s all. If there is any view we have to configure from mobile device, then follow the above process.

Run and Test from IE Browser

1. Desktop View

Press F5 and the result will be desktop version of view, as below. We can see layout and index page heading is showing as “Desktop”

2. Mobile View

Do the IE setting changes as above explained. In IE, Press F12 --> tools --> change user agent string --> ”IE10 for Windows Phone 8”. Refresh the page, now mobile view override and invoked.

Mobile view in Windows mobile 7:

IV. Specific Browser or Device View

Above, we have created a generic mobile view so any time from mobile or iPad browser will get access then mobile version of view will be invoked. Now the case will be, we want to create a view for iPhone browser or any other specific device, this is also supported by MVC 4 feature by just doing couple of configurations.

Below is taken an example for “iPad” as in my browser that is installed:

Step 1: Open Global.Asax and add the below line of code to the “Application_Start()” method also add the namespace as “using System.Web.WebPages;”.

     DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPad")
            {
                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                ("iPad", StringComparison.OrdinalIgnoreCase) >= 0)
            }); 

Step 2: Create a layout view for the iPad. To quickly implement, copy “Views\Shared\_Layout.cshtml” paste to the same location and modify the layout file name as “\_Layout.iPad.cshtml” (“Views\Shared\_Layout.iPad.cshtml”).

Step 3: Modify the “\_Layout.iPad.cshtml” page header text to identify that layout view run from mobile version.

Step 4: Copy the “Views\Home\index.cshtml” and paste to the same location and modify the file name as “Views\Home\index.iPad.cshtml” .

Step 5: Modify the “\Index.iPad.cshtml” page header text to identify that index view run from mobile version.

That’s all if any view we have to configure from iPad device, then follow the above process.

Run and Test from IE Browser

Mobile View

Do the IE setting changes as above explained. In IE, Press F12 --> tools --> change user agent string --> ”iPad”.

Refresh the page, now iPad view override and invoked.

Summary

In this post, I have explained one way of implementing the mobile device view and another way is from JQuery. I will try to post in my other blog soon. Hope you have enjoyed reading the entire topic. Please provide your vote, suggestion, and feedback...to encourage me in writing more blogs.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Afazal MD 3104209
Technical Lead Infinite Computer
India India
10+ years of experience in designing and developing Microsoft technologies applications.
My expertise skills are ASP.Net,MVC 3/4,MVC 4 WEB API, C#, WCF, REST, UML, Design Pattern and SQL server.
 
You can reach me @ mdafazal@gmail.com

Comments and Discussions

 
GeneralHelpful Article Pinmemberkashif Atiq16-Mar-14 23:45 
QuestionController PinmemberVinayMGandhi2-Jan-14 2:13 
AnswerRe: Controller PinmemberAfazal MD 31042096-Jan-14 14:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140905.1 | Last Updated 30 Dec 2013
Article Copyright 2013 by Afazal MD 3104209
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid