Display Mode in ASP.NET MVC 4

This post is part of ASP.NET MVC 4 Article Series.

In previous post, we learnt how to get started with MVC 4 Mobile Project which target mobile or tablet device. Then after you can host this application to separate sub domain and redirect your mobile or tablet device visitor to that mobile application. In this post, we will learn how to develop a MVC 4 application which target desktop browser as well mobile or tablet device without redirecting to separate mobile application.

MVC 4 introduces a new Display Mode feature which enables us to create different version of view and it will select appropriate view version based on requesting browser. For e.g. if desktop browser is requesting home page then it can render Views\Home\Homepage.cshtml and if the mobile or tablet browser request home page then it can render Views\Home\Homepage.Mobile.cshtml without changing URL of the application.

We can also have different version for layout and partial view. So whenever desktop browser will make request at that time it will use Views\Shared\_Layout.cshtml and if mobile or tablet browser is making request at that time it will use Views\Shared\_Layout.Mobile.cshtml

In addition to layout view, same strategy also applies for partial vie. For e.g. @Html.Partial(“Login”) will render login.cshtml if requesting browser is desktop otherwise it will render login.Mobile.cshtml if request is made by mobile browser.

How Display Mode works

To get started with different view version, you need to register each view version name in Application_Start event of the global.asax.cs. So later on application can select appropriate view version when browser request satisfies certain conditions.

We can register a new display mode or view version with the DefaultDisplayMode class and we need to assign Display Mode name and condition when to apply this Display Mode. For e.g. following code snippet register a display mode “Mobile” which will used whenever any mobile browser make a request.

protected void Application_Start()

{

    System.Func<HttpContextBase, bool> contextCheckDelegate = contextCheck;

    DefaultDisplayMode mobileMode = new DefaultDisplayMode("Mobile");

    mobileMode.ContextCondition = contextCheckDelegate;

    DisplayModes.Modes.Add(mobileMode);

}

public bool contextCheck(HttpContextBase objHttpContextBase)

{

    if(IsMobileBrowser)

        return true;

    else

        return false;

}

In above code, we have seen that ContextCondition properties of DefaultDisplayMode accept a delegate so we can register a more than one Display Mode with the application.

Now have a quick look at sample application for Display Mode.

Sample application with MVC 4 which target desktop as well mobile device

• Create a new MVC 4 application
• Now in the Views\Home folder and Views\Shared add new views (You can even add existing views which we created with Mobile Project Template and then rename it as shown in the following picture. So you do not need bother about layout and designing for Mobile views) as displayed in following picture.

• Now add following code in the Application_Start event of the global.asax.cs (You can download full Regular expression to detect mobile browser from the http://detectmobilebrowsers.com/)

protected void Application_Start()

{

    System.Func<HttpContextBase, bool>; contextCheckDelegate = contextCheck;

    DefaultDisplayMode mobileMode = new DefaultDisplayMode("Mobile");

    mobileMode.ContextCondition = contextCheckDelegate;

    DisplayModes.Modes.Add(mobileMode);

}

public bool contextCheck(HttpContextBase objHttpContextBase)

{

    string strUserAgent = objHttpContextBase.Request.UserAgent;

    Regex strBrowser = new Regex(@"android.+mobile|blackberry|ip(hone|od)", RegexOptions.IgnoreCase | RegexOptions.Multiline);

    if ((strBrowser.IsMatch(strUserAgent)))

    {

        return true;

    }

    return false;

}

• Build the project and views it in browser by pressing Ctrl + F5
• Now open same URL with any mobile emulator or you can even use Mozilla with Mozilla User Agent Switcher Add-ons. I am using User Agent Switcher. Switch user agent to iPhone and now press F5. You will see the mobile index.mobile.cshtml view rendered.

In above scenario, note the address bar of the browser in both case, you will notice that address bar remains same even if it render different view based on requesting browser.