26.10 Creating Mobile ASP.NET Pages

You want to create ASP .NET pages that are targeted for mobile devices.

Technique

ASP.NET can allow you to create some pretty sophisticated Web sites, but for mobile devices that have small screens, your Web application might be unbearable to navigate. The Smart Device Extensions include ASP.NET Mobile Web Forms to allow you to create specific Web Forms tailored to small devices.

To create a new Mobile ASP.NET project, select the ASP.NET Mobile Web Application template from the New Project Wizard. Once you create the project, you are placed in the Web Form designer for mobile Web applications. One of the first differences you'll notice right away between Mobile ASP.NET pages and regular ASP.NET pages is the inability to use GridLayout . When the designer opens, you see a small window within the designer labeled Form1 , which is where you place any necessary Mobile ASP.NET controls.

Designing a Mobile ASP.NET application follows the same procedures of designing a regular ASP.NET page. The toolbox window, however, displays a separate tab for mobile Web applications named Mobile Web Forms. A lot of the same controls from ASP.NET are included, but this tab adds some controls and removes other controls. For instance, the DataGrid cannot be displayed on a mobile device due to its propensity to become quite large when rendering. However, a new control named the ObjectList fills the void and is discussed in the next recipe. Along with the ObjectList control, some of the Mobile Web Form controls include the PhoneCall , Form , TextView , Command , and DeviceSpecific controls. This recipe and the following three recipes use each one of these controls.

As an example, this recipe creates a Mobile Web Application whose initial page gives a user a list of links to other areas within the site, which exercises a few of the Mobile Web Form controls. Therefore, you add four Link controls to the initial form. Mobile ASP.NET applications can offer a different method of Web site navigation. In ASP.NET, each form was associated with its own class. In mobile ASP.NET applications, you have the option of sharing the same class for all forms that are created. By dragging and dropping a Form control, you are in essence creating a new page for the application while still working within the same code-behind file. When the whole page is initially loaded, only the form that appears at the top of the designer window is displayed. To create a link to another form on the same page, drag and drop a Link control and sets its NavigateUrl property to the name of the form to display when the link is clicked.

The downloadable code for this recipe is available on the Sams Web site (http://www.samspublishing.com) and contains a control-panel form used to navigate through the different forms and a simple calculator form that performs arithmetic operations and uses form validation. This form in particular demonstrates that creating mobile Web forms is similar to creating full ASP.NET applications. The recipes that follow use the Mobile ASP.NET Web Form controls.

Comments

Browsing the Internet on a Pocket PC is not truly convenient because a majority of the Web sites are just too large to render on such a small screen. Mobile devices are seeing an explosion when it comes to Internet connectivity, and any large Web site should have mobile-device “specific pages, if not now, then very soon.

A feature you might want to consider adding to your ASP.NET-driven site is detecting mobile devices. In other words, if a user connects to the site using a desktop-based browser, you should serve up regular ASP.NET application pages. If, however, she connects with a mobile-device “based browser such as a Pocket IE or cell phone, you should serve up specific mobile Web pages. You can do so by creating an entry page, usually named Default.aspx , and creating code within the Page_Load handler to redirect a user based on her browser type. To detect whether a user is connecting with a mobile device, access the Browser object property named IsMobileDevice through the Request object, as shown in the code that follows. If IsMobileDevice returns true , then redirect the user to your mobile-device “specific pages, and if not, redirect her to the normal ASP.NET pages:

 private void Page_Load(object sender, System.EventArgs e) {     if (Request.Browser["IsMobileDevice"] == "true" )     {         Response.Redirect("MobileDefault.aspx");     }     else     {         Response.Redirect("DesktopDefault.aspx");     } }