Mobile Device Detection and Redirection with 51Degrees.mobi

Introduction

This article explains approaches for ASP.NET mobile development to determine if an HTTP request is coming from a mobile phone and then redirecting the request to a page optimized for a mobile browser. This has been created using the version 0.1.10.3 of the 51degrees.mobi foundation API.

Please note these instructions will require changes to assembly names, namespaces and file names to work with the latest version of the 51degrees.mobi foundation API.

Method 1: Using ASP.NET to detect the user agent

Use ASP.NET to detect the user-agent adding server-side browser detection and redirection to your website using the ASP.NET platform is quite easy. This code should be inserted into the Page_Load event of the web form code behind file (e.g. default.aspx.cs). To enable this site-wide, just add it to the Page_Load event of the Master Page file.

            string strUserAgent = Request.UserAgent.ToString().ToLower();

            if (strUserAgent != null)
            {
                if (Request.Browser.IsMobileDevice == true || 
                    strUserAgent.Contains("iphone") ||
                    strUserAgent.Contains("blackberry") || 
                    strUserAgent.Contains("mobile") ||
                    strUserAgent.Contains("windows ce") || 
                    strUserAgent.Contains("opera mini") ||
                    strUserAgent.Contains("palm"))
                {
                    Response.Redirect("DefaultMobile.aspx");
                }
            }

 

In the code above you can add as many user agents as you wish. The else statement is not necessary in this case, because we want the page to load normally, when the request is coming from standard browsers.

Limitations of above code are

  • It will not catch all mobile browsers as there are a lot of them.
  • You need to keep updating user agents when new devices are introduced.
  • Not easy to parse user agents to get detailed information about the mobile device such as the manufacturer, model, screen height & width, and image formats supported. This type of information is necessary to customize page layout to the specific mobile device.

These limitations will make us ask “Is there any better way to achieve this?”

Method 2.1: Using 51degrees.mobi foundation API to detect the user agent

51Degrees.mobi provides a free open source ASP.NET mobile API allowing Visual Basic and C# developers to benefit from the extensive mobile device information available in WURFL also used by the BBCBank of America,MySpace and Admob among others. WURFL device database is widely-accepted as the most advanced and up-to-date mobile device database available.

The following steps demonstrate how to detect a mobile device, obtain accurate device details and easily redirect to a mobile landing page overcoming the limitations of Method 1.

Step 1: Create Web Site

  1. Create a C# ASP.NET website.
  2. The website will be created with a default web form “Default.aspx”, keep the name as it is.
  3. Add a web page to the website using “Add New Item -> Web Form”. Name the web form to “M.aspx”

Step 2: 51Degrees.mobi resource download

Following files need to be added to the web site created in Step 1.

  • App_Data/wurfl.xml.gz
  • App_Data/web_browsers_patch.xml
  • bin/FiftyOne.Foundation.dll

The above files can be extracted from the 51degrees.mobi foundation Enhance download available here. Once downloaded your website should have following folder structure.

Step 3: Web.config changes

The Web.config file should be changed to allow your existing web site to detect mobile devices. Please follow the instructions as provided in the user guide. After the Web.config changes, redirect element of the fiftyOne section needs to be changed as shown below.

<redirect mobileHomePageUrl="~/M.aspx" />

Step 4: Mobile page (M.aspx)

Add the following code to M.aspx and M.aspx.cs

Listing: M.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="M.aspx.cs" 
  Inherits="M" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
    <form id="form1" runat="server">
        <asp:Label ID="LabelMobile" runat="server" Alignment="Center" 
            Font-Size="Large"
            Text="This is a Mobile Device Redirection." />
        <asp:Label ID="LabelManufacturer" runat="server" Font-Size="Small"/>
        <asp:Label ID="LabelModel" runat="server" Font-Size="Small"/>
        <asp:Label ID="LabelScreen" runat="server" Font-Size="Small"/>
        <asp:Label ID="LabelPlatform" runat="server" Font-Size="Small"/>        
        <asp:Label ID="LabelBrowser" runat="server" Font-Size="Small"/>
        <asp:Label ID="LabelJpg" runat="server" Font-Size="Small"/>
    </form>
</body>
</html>

Listing: M.aspx.cs

    using System;
    using System.Collections;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Web;
    using System.Web.Mobile;
    using System.Web.SessionState;
    using System.Web.UI;
    using System.Web.UI.MobileControls;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;

    public partial class M : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string strUserAgent = Request.UserAgent;

            LabelManufacturer.Text = "Manufacturer : " + 
                              Request.Browser.MobileDeviceManufacturer;
            LabelModel.Text = "Model : " + Request.Browser.MobileDeviceModel;
            LabelScreen.Text = "Screen : " + Request.Browser
                                            .ScreenPixelsWidth
                                            .ToString() + " x " + 
                                             Request.Browser
                                             .ScreenPixelsHeight.ToString();

            //Apart from standard capability information provided 
            //by "Request.Browser object", 
            //51degrees.mobi Foundation provides more detailed information 
            //about the device capabilities. 
            LabelPlatform.Text = "Platform : " + 
                           ((MobileCapabilities)Request.Browser).Platform
                                                                .ToString();
            LabelBrowser.Text = "Browser : " + 
                           ((MobileCapabilities)Request.Browser).Browser
                                                                .ToString();
            LabelJpg.Text = "Image : " + ((MobileCapabilities)Request.Browser)
                                          .PreferredImageMime.ToString();
        }
    }

Step 5: Build the Website using “Build -> Build Web site” menu

Step 6: Download Mobile Emulators to test web site

You can download emulators which are listed here

Result: When the website is accessed from a Mobile Emulator it will automatically display “M.aspx” to the user instead of “Default.aspx”. Unlike Method1 you do not have to write any code for redirection, it is taken care by the 51degrees.mobi Foundation API. Apart from this, 51degrees.mobi Foundation API also gives information of device capabilities which can you used for customization.

Redirected mobile page

Method 2.2: Using 51degrees.mobi foundation API to detect the user agent [MVC]

A simple application is used to help illustrate how 51Degrees.mobi ASP.NET mobile API can be used in an ASP.NET MVC application to detect mobile device capabilities.

Note: You’ll need either Visual Studio 2008 or Visual Web Developer 2008 Express to build an ASP.NET MVC application. You also need to download the ASP.NET MVC framework from http://www.asp.net/mvc/download/

Step 1: Create a new ASP.NET MVC Application

The ASP.NET MVC Framework includes Visual Studio Project Templates that make it easy to create a new web application with it. Simply select the File->New Project menu item and choose the “ASP.NET MVC Web Application” template to create a new web application using it.

New MVC project

Note: Make sure that you select .NET Framework 3.5 from the dropdown list at the top of the New Project dialog or the ASP.NET MVC Web Application project template would not appear.

Whenever you create a new MVC Web Application project, Visual Studio prompts you to create a separate unit test project as shown below. Because we would not be creating tests in this article select the No option and click the OK button.

No to Tests

When you create a new ASP.NET MVC application with Visual Studio, you get a sample application by default. It has a standard set of folders: Models, Views, and Controllers folder. You can see this standard set of folders in the Solution Explorer window as shown below.

MVC Application Default Folder Structure

We’ll need to add files/folders to Views and Controllers folders in order to build the Mobile device detection application.

In the Solution Explorer window, right-click the Views folder and select the menu option Add, New Folder. Name the new folder as Mobile as shown below

A New Mobile View Folder

Step 2: 51degrees.mobi resource download

To download the source code of MVC application explained in this section, go to downloads tab and select the MVCMobileDetect under latest release.

Step 3: Web.config changes

The Web.config file should be changed to allow your existing web site to detect mobile devices. Please follow the instructions as provided in the user guide.

Step 4: Creating the ASP.NET MVC Controller

The next step is to create the ASP.NET MVC controller. A controller is responsible for controlling how a user interacts with an ASP.NET MVC application.

Follow these steps:

  • In the Solution Explorer window, right-click the Controllers folder and select the menu option Add, Controller.
  • In the Add Controller dialog, enter the name MobileController and do not check the checkbox labeled “Add action methods for Create, Update, and Details scenarios” as shown.
  • Click the Add button to add the new controller to your project.

Adding a new ASP.NET MVC Controller

Listing: Controllers\MobileController.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using System.Web.Mvc.Ajax;

    namespace MVCMobileDetect.Controllers
    {
        public class MobileController : Controller
        {
            // GET: /Mobile/

            public ActionResult Index()
            {
                return View();
            }

            public ActionResult Nokia()
            {
                return View();
            }

            public ActionResult Iphone()
            {
                return View();
            }

            public ActionResult Blackberry()
            {
                return View();
            }
        }
    }

Now we need ASP.NET to look for different views if the device is a mobile. Add following code to HomeController.cs in order to load views optimized for mobile.

Listing: Controllers\HomeController.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;

    namespace MVCMobileDetect.Controllers
    {
        [HandleError]
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                ViewData["Message"] = "Welcome to ASP.NET MVC!";

                if (Request.Browser.IsMobileDevice)
                {
                    string strmanu = Request.Browser
                                            .MobileDeviceManufacturer
                                            .ToLower().ToString();

                    string straction = "";

                    string strcontrol = "Mobile";

                    switch (strmanu)
                    {
                        case "nokia":
                            straction = "Nokia";
                            break;
                        case "rim":
                            straction = "Blackberry";
                            break;
                        case "apple":
                            straction = "Iphone";
                            break;
                        default:
                            straction = "Index";
                            break;
                    }
                    return RedirectToAction(straction, strcontrol);
                }
                else
                    return View();
            }

            public ActionResult About()
            {
                return View();
            }
        }
    }

Step 5: Creating the ASP.NET MVC view

The Index() method in the MobileController.cs returns a view named Index under Views-> Mobile folder. We need to create this view for mobiles apart from Nokia, Iphone and Blackberry.

Follow these steps:

  • Right-click the Index() method in the code editor and select the menu option Add View as seen below.
  • In the Add View dialog, verify that none of the checkboxes are checked as seen below.

Adding a view from controller action

Creating a new view with the Add View dialog

After you complete these steps, a new view named Index.aspx is added to the Views\Mobile folder. Follow same steps for methods Nokia(),Iphone() and Blackberry() to create views as seen below.

Mobile folder structure” width=”158″ height=”94″ />

The contents of the Index view are included in below Listing.

Listing: Views\Mobile\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>MVC Mobile Sample</title>
</head>
<body>
    <div align="center"><img src="/images/mobile.jpg" width="60" height="70" />
    </div>
    <div>
         <h6>Manufacturer : <%= Request.Browser.MobileDeviceManufacturer %>
         </h6>
         <h6>Model : <%= Request.Browser.MobileDeviceModel%></h6>
         <h6>Screen : <%= Request.Browser.ScreenPixelsWidth + " x " + 
                      Request.Browser.ScreenPixelsHeight %></h6>
         <!--Apart from standard capability information provided by 
             "Request.Browser object", 
            .NETMobileAPI provides more detailed information about the device 
            capabilities. -->
         <h6>Platform : 
             <%= ((MobileCapabilities)Request.Browser).Platform.ToString() %>
         </h6>
         <h6>Browser : 
             <%= ((MobileCapabilities)Request.Browser).Browser.ToString() %>
         </h6>
         <h6>Image : 
             <%= ((MobileCapabilities)Request.Browser)
                                      .PreferredImageMime.ToString() %>
        </h6>
    </div>
</body>
</html>

Use the same method to add the html code for the views Nokia.aspx, Iphone.aspx and BlackBerry.aspx.

Step 6: Build the application using Build menu

Step 7: Download mobile emulator to test the web site

Please click here to get details for downloading Mobile Emulators to test website.

Result

When the website is accessed it will check whether it is accessed from mobile device or desktop/laptop. If it is accessed from a desktop/laptop than Views\Home\Index.aspx view will be displayed. If it is accessed from mobile a device a view optimized for requesting mobile device will be displayed. E.g. If requesting mobile device is Nokia than Views\Mobile\Nokia.aspx will be displayed.

51Degrees.mobi gives detailed capability information(like manufacturer, model, screen height & width, image supports and many more) of the mobile requesting website which can be very handy for designing ASP.NET MVC Views for different device family (Nokia, Iphone, Blackberry etc.).

Different MVC views loaded for different devices with device capability information

Different MVC views loaded for different devices with device capability information is as shown above.

Conclusion

If you’re developing mobile websites and struggling with the variety of mobile devices use Method2.1 or Method2.2 as explained above. It will reduce development time, uses device data you can trust and leaves you free to focus on delivering an amazing mobile experience. Both methods will detect network transcoders and detect devices extremely quickly. Method 2.1 will work with .NET version 2.0 and above allowing mobile pages to be developed alongside existing sites without requiring an upgrade. Method 2.2 works with MVC and .NET version 3.5 and above allowing you to use Microsoft’s latest technologies.

 

Reference : http://51degrees.codeplex.com/wikipage?title=MVC

Advertisements

2 thoughts on “Mobile Device Detection and Redirection with 51Degrees.mobi

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s