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

rouleaupromiseΑσφάλεια

5 Νοε 2013 (πριν από 3 χρόνια και 7 μήνες)

65 εμφανίσεις

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

26 oktober 2010

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
BBC
,
Bank of America
,
MySpace

and
Admob

among others. WURFL device
database is widely
-
accepted as the most advanced an
d 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

Follow
ing 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.










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

26 oktober 2010







Step 3: Web.config changes

The Web.config file should be changed to allow your existing web site to detect mobile
devices. Plea
se 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"

>

<
b
ody
>


<
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;


usin
g 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

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

26 oktober 2010


{


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.S
creenPixelsHeight.ToString();



//Apart from standard capability information provided by
"Request.Browser object",


//51degrees.mobi Foundation provides more detailed information
about the device capabilities.


LabelPlatf
orm.Text = "Platform : " +
((MobileCapabilities)Request.Browser).Platform.ToString();


LabelBrowser.Text = "Browser : " +
((MobileCapabilities)Request.Browser).Browser.ToString();


LabelJpg.Text = "Image : " +
((MobileCapabilities)Req
uest.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
c
ode 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.

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

26 oktober 2010





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 W
eb 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
us
ing it.

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

26 oktober 2010


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 Stu
dio 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.



When you create a new ASP.NET MVC application with Visual Studio, you get a sampl
e
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.

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

26 oktober 2010



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









Step 2: 51degrees.mobi resource downl
oad

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 sho
uld 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.

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

26 oktober 2010

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.















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()


{

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

26 oktober 2010


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 optimiz
ed 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);

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

26 oktober 2010


}


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.



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

26 oktober 2010


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.


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

Listing: Views
\
Mobile
\
Index.aspx

<%
@

Page

Language
="C#"

Inheri
ts
="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.
--
>

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

26 oktober 2010


<
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

Wh
en 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 req
uesting 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.).

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

26 oktober 2010


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 deliveri
ng 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 upg
rade. Method 2.2 works with MVC and .NET
version 3.5 and above allowing you to use Microsoft's latest technologies.

Last edited
Aug 13 at 5:06 PM

by

amaresh_jois
, version 54