Introduction
This page provides a step by step guide to add the .NET Mobile API to an existing ASP web site. New files need to be added to the web site, the web.config file changed to allow your existing web site to detect mobile devices and finally a landing page created for mobile devices.
Step 1 – Include 4 New Files
4 files need to be added to the existing web site.
- App_Data/wurfl.xml.gz
- App_Data/web_browsers_patch.xml
- bin/FiftyOne.Foundation.dll
- M.aspx
These files can be extracted from the Enhance download available here.
Step 2 – Change the web.config File
Add the following sectionGroup to the configSections element of the web.config file. This section is normally found at the top of the file.
<configSections>
<sectionGroup name="fiftyOne">
<section name="log" type="FiftyOne.Foundation.Mobile.Configuration.LogSection, FiftyOne.Foundation" requirePermission="false" allowDefinition="Everywhere" restartOnExternalChanges="false" allowExeDefinition="MachineToApplication"/>
<section name="redirect" type="FiftyOne.Foundation.Mobile.Configuration.RedirectSection, FiftyOne.Foundation" requirePermission="false" allowDefinition="Everywhere" restartOnExternalChanges="false" allowExeDefinition="MachineToApplication"/>
<section name="wurfl" type="FiftyOne.Foundation.Mobile.Detection.Wurfl.Configuration.WurflSection, FiftyOne.Foundation" requirePermission="false" allowDefinition="Everywhere" restartOnExternalChanges="false" allowExeDefinition="MachineToApplication"/>
</sectionGroup>
</configSections>
These lines tell .NET about the Mobile API and allow it to make sense of the following 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. More information on these sections can be found here.
<fiftyOne>
<!-- When a mobile device is found to be accessing a non mobile page the mobileRedirectUrl setting is used to redirect the browser to a landing page for mobile devices.-->
<redirect mobileHomePageUrl="~/M.aspx"/>
<!-- The following settings provided the location of wurfl files. wurflFilePath is the path of the main wurfl file (mandatory). wurflPatches defines where any additional patch files can be located (optional).
-->
<wurfl wurflFilePath="~/App_Data/wurfl.xml.gz">
<wurflPatches>
<add name="browser_definitions" filePath="~/App_Data/web_browsers_patch.xml" enabled="true"/>
</wurflPatches>
</wurfl>
</fiftyOne>
Add the following element to allow the Mobile API to intercept new page requests and redirect them if the requesting device is a mobile.
IIS 7.X
<system.webServer>
<!-- IIS 7.X - Registers a module that is used to detect any new requests to the web site.Without this module mobile detection and redirection won't work.-->
<modules>
<add name="Detector" type="FiftyOne.Foundation.Mobile.Detection.DetectorModule, FiftyOne.Foundation"/>
</modules>
</system.webServer>
IIS 6.0 & Visual Studio
<!-- IIS 6.0 & Visual Studio - Registers a module that is used to detect any new requests to the web site. Without this module mobile detection and redirection won't work.-->
<httpModules>
<add name="Detector" type="FiftyOne.Foundation.Mobile.Detection.DetectorModule, FiftyOne.Foundation"/>
</httpModules>
Step 3 – Mobile Landing Page
Finally we need to add a mobile landing page. The one extracted from the zip file downloaded earlier looks like this. It uses the MobilePage functionality provided by .NET to display a page for mobile devices. A standard ASPX could be used containing simple content and layout instead.
<%@ Page Language="C#" AutoEventWireup="True" Inherits="System.Web.UI.MobileControls.MobilePage"%>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<mobile:Form runat="server" Title="Mobile Device">
<mobile:Label Runat="server" Alignment="Center" Font-Size="Large" Text="This is a Mobile Device" />
</mobile:Form>
</body>
</html>
Step 4 – Testing
Use a mobile emulator found here to confirm your web site responds correctly in a development environment. Using the M.aspx page provided you should see a screen similar to the following with the OpenWave emulator.
