Click here to Skip to main content
Click here to Skip to main content

Desktop and Mobile Browser View in MVC 4

, 30 Dec 2013 CPOL
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 Implementation 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 Internet Explorer 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 Internet Explorer, 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 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 making a 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 we have to configure any view from iPad device, then follow the above process.

Run and Test from IE Browser

Mobile View

Do the Internet Explorer setting changes as above explained. In Internet Explorer, 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 to write 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,AngularJS and SQL server.
 
You can reach me @ mdafazalp@gmail.com

Comments and Discussions

 
QuestionThank Pinmemberramanamurthy24-Oct-14 3:56 
GeneralHelpful Article Pinmemberkashif Atiq17-Mar-14 0:45 
QuestionController PinmemberVinayMGandhi2-Jan-14 3:13 
AnswerRe: Controller PinmemberAfazal MD 31042096-Jan-14 15: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 | Terms of Use | Mobile
Web02 | 2.8.141216.1 | Last Updated 30 Dec 2013
Article Copyright 2013 by Afazal MD 3104209
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid