Integrating 51D Framework with ASP.Net web application

Products Team

2/28/2012 10:49 AM

Mobile .NET Development

This blog briefs on the steps involved in configuring the 51D Framework - .Net Mobile Toolkit with an existing ASP.Net application. These steps are common to ASP.Net web applications based on .Net 2.0 and .Net 4.0.

Integrating the 51D Framework with an existing ASP.Net web application involves configuring the licence key, defining required custom configurations and referring to appropriate version of Framework assemblies. Let's look at each step in brief assuming you have already installed the 51D Framework - .Net Mobile Toolkit.

1. Adding 51d Configuration file to App_Data folder of the Web application.

Add the required 51D custom configuration file to App_Data folder by following the options Project->Add New Item->Mobile->51D Configuration file. The language can either be C# or VB.Net.

This configuration file will have all the required configuration sections related to the 51Degrees.mobi products framework, Foundation and Device data. The default configuration settings are sufficient to start testing the mobile version of your web application. For more details on each configuration section please refer to the Framework Documentation.

2. Add required HttpHandler(s) and HttpModule(s) to default web.config file.

Following HttpHandler and HttpModule configurations need to be added to the default web.config file related to 51Degrees.mobi Framework. These sections has to be placed under the appropriate root elements like <system.web> or <system.webserver> based on the executing environment.

Configuration Related to Product Remarks
HttpHandler Framework <system.web> <httpHandlers> <add verb="GET" path="I.axd" type="FiftyOne.Framework.Mobile.Include.IncludesHandler, FiftyOne.Framework" validate="false"/> <add verb="GET" path="P.axd" type="FiftyOne.Framework.Image.ImageHandler, FiftyOne.Framework" validate="false"/> </httpHandlers> </system.web> <system.webServer> <handlers> <add name="Includes" verb="GET" path="I.axd" type="FiftyOne.Framework.Mobile.Includes.IncludesHandler, FiftyOne.Framework"/> <add name="Image" verb="GET" path="P.axd" type="FiftyOne.Framework.Image.ImageHandler, FiftyOne.Framework" /> </handlers> </system.webServer>
HttpModule Foundation and Framework <add name="Detector" type="FiftyOne.Foundation.Mobile.Detection.DetectorModule, FiftyOne.Foundation"/>
<system.web> <httpModules> <add name="Detector" type="FiftyOne.Foundation.Mobile.Detection.DetectorModule, FiftyOne.Foundation"/> </httpModules> </system.web> <system.webServer> <modules runAllManagedModulesForAllRequests="true"> <add name="51degrees.mobi Device Detector" type="FiftyOne.Foundation.Mobile.Detection.DetectorModule, FiftyOne.Foundation"/> </modules> </system.webServer>

From the above table based on the runtime environment the configuration section either from <system.web> or <system.webServer> has to be copied to web.config file. If you are running the web application from IIS 7 then use the configuration section from the later and comment the section from <system.web> or else IIS will throw configuration error during runtime.

3. Add references to the required assemblies.

The Framework needs 3 assemblies to be referenced for all the features to execute correctly. The assemblies are:

Assembly Features
FiftyOne.Foundation.dll Contains device detection and redirection algorithm. Easy to configure and customize.
FiftyOne.Framework.dll Contains mobile version of custom ASP.Net controls and rich set of features to implement light weight version of Mobile pages.
FiftyOne.MaxMind.dll Contains MaxMind implementation required to detect the location of the device based on the IP address. This is part of the Framework's Location control.

To add reference use Project -> Add Reference -> Browse option and browse the folder the installed folder. The default installation path is C:\Program Files (x86)\51Degrees.mobi\.Net Mobile Framework\References, select all the 3 assemblies listed in the above table. If your web application is based on .Net 4.0 then select the assemblies from the sub folder Ver4.

4. Finally you have to configure your 51Degrees.mobi – Framework license key

You can convert the existing Asp.Net mobile controls design as 51D Mobi Framework controls with simple steps like add the following configuration section to <system.web> of web.config file and replace the prefix </system.web>asp to mob of the control definitions.

Config section to add to web.config,

<pages enableEventValidation="false" viewStateEncryptionMode="Never"> <controls> <add assembly="FiftyOne.Framework" namespace="FiftyOne.Framework.Mobile.Controls" tagPrefix="mob"/> </controls> </pages>

Further reading:

1. To understand more about the 51Degrees.mobi Framework features or to know how to implement please go through the documentation and tutorials available on our website.

2. To know more about the 51Degress.mobi features like device detection and redirection or to know how to customize using the configurations please refer here.

For understanding the 51Degrees.mobi Device data usage, auto upgrade and licensing please refer here.