Mobile Web Development in ASP.NET - Part 2

Introduction


The first part of the article dealt with the Microsoft Mobile Internet ToolKit and Visual Studio environment and configuration settings required for creating a mobile based web application in ASP.NET. In the second part, I discuss few mobile controls and how to develop mobile pages that run on a browser or emulator…

ASP.NET Mobile Controls


A developer can create ASP.NET mobile Web Forms pages consisting of controls either in the ASP.NET Mobile Designer or with any text editor. Many of the controls are similar to desktop controls in Web Forms and to GUI controls in other programming languages, such as Microsoft Visual Basic.

MobilePage


This is the base class for all mobile ASP.NET pages. As such, the MobilePage control provides the outermost layer of all the containers in an ASP.NET mobile Web application. It is the only container associated with a URL and primarily contains style and context information common to all controls.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" Language="c#" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>

A mobile page requires two directives. The first directive instructs the ASP.NET page framework to use MobilePage as the base class for the page. The Inherits attribute is required. If the page inherits directly from a MobilePage object, the Inherits attribute must be set to the System.Web.UI.MobileControls.MobilePage namespace. If the page inherits from a code-behind class, the name of the class must be specified instead. The Language attribute is optional; you can set it to the language used on the page, as with any other Web Forms page.

The second directive registers the namespace used by ASP.NET mobile controls that have the mobile prefix. This allows you to declare mobile controls on the page by using the mobile prefix as below.




A MobilePage object can contain the following controls.

System.Web.UI.MobileControls.Form
A MobilePage object must contain at least one Form control and can contain more than more than one Form control.
System.Web.UI.MobileControls.Stylesheet
A style sheet is not required for a MobilePage object. A MobilePage control may or may not have a Stylesheet control.

Example1


This example creates a mobile page and a form, and then adds a label to the form.



<%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>



My First MobilePage with some controls in it




List Control


It renders a list of items to a mobile device. This control supports templated rendering through device template sets, and it supports internal pagination just as you find it in datalist control in ASP.NET. For information on Template Sets and Templated Controls or Pagination, I will discuss them in the later part of the article.

List control has both Static and Interactive Modes

Static mode
- The control behaves like a static list. Static list items can be declared as item child elements.
Interactive mode
- The control renders items as interactive elements.

The behavior of these modes is based on the presence of an event handler. When an event handler is not present, the control is set to static mode. When an event handler is present, the control is set to interactive mode, in which each item is an interactive element that generates an event when clicked.

You can optionally place DeviceSpecific/Choice construct inside a list control

The following controls can contain one or more List controls.

System.Web.UI.MobileControls.Form
System.Web.UI.MobileControls.Panel


A List control may or may not contain the following controls.

System.Web.UI.MobileControls.DeviceSpecific

System.Web.UI.MobileControls.Item
.

Device Templates in List control

HeaderTemplate
The header template is rendered at the beginning of the list. In paginated mode, the header is rendered on each page.
FooterTemplate
The footer template is rendered at the end of the list. In paginated mode, the footer is rendered on each page.
ItemTemplate
The item template is rendered for each list item.
AlternatingItemTemplate
If defined, an alternating item template is rendered instead of the item template for even items. For example, the second item is an alternating template, as is the fourth item, as is every subsequent even-numbered item.
SeparatorTemplate
The separator template is rendered between two items.

Example2


The following example displays a list of fruit. When you select a fruit, the control displays its price.


<%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage"
Language="C#" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>




Select a Fruit!
OnItemCommand="ListFruit_Click" >











Summary


The second part of the series has discussed two mobile controls, List and Label, placed in a mobile form container. Note that the Example2 has two mobile forms in a mobile page. In the Part3 of the article, you would get to know about more of the mobile controls.

Regard

Prateek