Method1: 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.

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 made me ask “is there any better way to achieve this? I came across the following method.

Method2: Use 51Degrees.mobi NET Mobile API To Detect The User-Agent

51Degrees.mobi provides a free open source .NET mobile API allowing Visual Basic and C# developers to benefit from the extensive mobile device information available in WURFLalso used by the BBC, Bank 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.

Step1: Create Web Site

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

Step2: 51Degrees.mobi resource download

The following files need to be added to the web site created in Step1.

• App_Data/wurfl.xml.gz
• App_Data/web_browsers_patch.xml.gz
• bin/Mobile.dll

These files can be extracted from the Enhance download available here.

Once downloaded your website should have following folder structure.

Step3: Web.config Settings

The following sections need to be added to the web.config file of your web site to use of the API.

Configuration section

The following settings are needed at the top of the web.config file. They tell .NET about subsequent configurations in the web.config and how to handle them. In this instance we're telling .NET to use the Mobile assembly.

Add new mobile section

Add the following mobile element after the configSections element. These lines control how the Mobile API responds to mobile devices and where to locate the database of mobile devices.  Web.config Setting2:

Detector Module

Add the following element to the httpModules element. These allow the Mobile API to intercept new page requests and redirect them if the requesting device is a mobile.

Step4: Mobile Page (M.aspx)

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

Listing 1: M.aspx

Listing 2: M.aspx.cs

Now build the website using “Build -> Build Web Site” menu

Step5: Download Mobile Emulators To Test Web site

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

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 .NET Mobile API. Apart from this .NET Mobile API also gives information of device capabilities which can you used for customization.

Download

To download source code for the above sample application explained in Method2 please click below for the appropriate solution:

VS2005
VS2008

Conclusion

If you’re developing mobile websites and struggling with the variety of mobile devices use Method2 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.

Resources

• Click here for more details on .NETMobile API.
• Click here for detailed information on web.config settings for .NETMobile API usage.

About Amit Patel

Sorry, no bio is available This author has published 2 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
Method 1 in IE6	Andy Boehm	12/3/2009 11:19 AM
Any idea why method one would fail in IE6.  It redirects to the mobile site everytime. Thanks! Reply | Permanent link
RE: Method 1 in IE6	Andy Boehm	12/3/2009 11:53 AM
Oh I see what the problem was.  I added Mozzilla to the user agents for testing purposes and for some reason Mozzilla was in IE's user agent. Reply | Permanent link

---

Please login to rate or to leave a comment.