How to Use Multiple Views and Display Mode provider in ASP.NET MVC 4

Introduction:

Today in this article, I will explain How to use Multiple views and Display mode providers in ASP.NET MVC 4 application. Display mode introduces as new features in the MVC4 application that simplify multiple versions of view for different devices.

Let us suppose if we have created the web page for the desktop version browser but their content is not properly readable in mobile browser or other devices. In this case, we want to create the different view for each device browser. So to solve this problem we need to use Display mode provider, that display appropriate view for different devices.

Follow these steps in order to implement Display mode in MVC 4 application.

1). Setup Emulator for testing environment

 Here In this example, I am using Google Chrome Emulator for testing different views.

Below are the steps to open emulator in Google Chrome

Open Google chrome > press F12 > click on Toggle Device toolbar > select appropriate device

2). Implementation of Mobile Device view

 Follow steps to implement view for mobile devices

Step1. 

 For creating Layout for mobile devices, just copy “ _Layout.cshtml” in the same location and rename Layout file as “_Layout.Mobile.cshtml”

Step2.

 Modify “Layout.Mobile.cshtml” header for identifying that current page run from the mobile version of the layout.

Step3.

 Now copy “Index.cshtml” to same location and rename Index file as “Index.Mobile.cshtml”

Step4.

Modify “Index.cshtml” header text for identifying that Index view run from the mobile version.

Above steps are similar to other views that configure for mobile devices.

Step5. Run and test application by Google Chrome

Desktop View:

Now run your application, you can see that layout and index page heading is “Desktop View”

Mobile View:

In Google Chrome press F12 > click on Toggle Device toolbar > select appropriate device > Refresh page

3). Implementation of Specific device view

In above steps we have created a view for mobile devices, this view also called when we run the application on IPad, Android tablet or other mobile devices. So for creating the view for specific device or browser we need to setup following configuration in your application.

For example, I have to create the view for “iPad”.

Step1:

Add following line code into the “Application_Start()” method of  “Global.asax.cs” file and also add namespace as “using System.Web.WebPages;”.

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPad")

            {

                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf

                ("iPad", StringComparison.OrdinalIgnoreCase) >= 0)

            });

Step2. 

 For creating Layout for iPad, just copy “_Layout.cshtml” in the same location and rename Layout file as “_Layout.iPad.cshtml”

Step3.

 Modify “Layout.iPad.cshtml” header for identifying that current page run from iPad version of the layout.

Step4.

 Now copy “Index.cshtml” to same location and rename Index file as “Index.iPad.cshtml”

Step5.

Modify “Index.cshtml” header text for identifying that Index view run from iPad version.

Above steps are similar to other views that configure for iPad devices.

Step6. Run and test application by Google Chrome

Now open Google Chrome and do the changes according to above explained, > press F12 > click on Toggle Device toolbar > select iPad

In this article, I have explained the method to implement Display mode providers in MVC 4. The same process can be used for creating the view for other devices like Android tablet, iPhone, Nexus and other devices.

I hope you enjoyed this article, if you have any suggestion or query, comment it 

Like this post? Don’t forget to share it!