Desktop and Mobile Browser View in MVC 4

• Download demo project - 3 MB

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.