Click here to Skip to main content
Click here to Skip to main content

Introduction of Mobile Controls Available in ASP.Net

By , 22 Jan 2008
Rate this:
Please Sign up or sign in to vote.

Background

Cell phones (mobile telephones) have become part of our life style, and new mobile devices like the Palm Pilot, the Pocket PC, and the Auto PC is about to be added to the list.

One exciting thing about these new mobile devices is their ability to connect to the Internet and to execute web applications.

Mobile applications can now be developed to deliver any types of data, to any user, any place in the world!

Different mobile devices support different programming languages. Some support WAP and WML, some support HTML or a limited version of HTML, and some support both or a different language.

To support all types of mobile devices, developers must create one different application for each language.

With .NET Mobile, Microsoft has introduced a new platform for developing mobile applications.

This tutorial is about how to develop mobile applications with an extension to the .NET Framework, called the Microsoft Mobile Internet Toolkit (MMIT) or simply .NET Mobile.


What You Should Already Know

Before you continue you should have a basic understanding of the following:

  • HTML / XHTML
  • Namespaces
  • ASP .NET


.NET Mobile

.NET Mobile is an extension to Microsoft ASP.NET and the Microsoft's .NET Framework.

.NET Mobile is a set of server-side Web Forms Controls to build applications for wireless mobile devices, like web phones and PDAs.

These controls produce different output for different devices by generating WML 1.1, HTML 3.2, or compact HTML.


How Does It Work?

The following table shows how the .NET Mobile works:

Mobile Devices

The Internet

Internet Information Services - IIS

The .NET Framework

ASP.NET

.NET Mobile

  • A web client requests a web page
  • The request travels the Internet
  • The request is received by IIS
  • The request is handled by the .NET framework
  • The requested page is compiled by ASP.NET
  • .NET Mobile handles any mobile device requirements
  • The page is returned to the client

How To Start

Developing a mobile web application with ASP.NET is very easy:

1. Create an ASP.NET page

2. Include System.Mobile.UI

3. Add Mobile Controls to the page

Mobile Pages

A mobile page is much the same as an ordinary .NET web page. It is a text file with an aspx extension, and it can contain a variety of web controls.

The difference is the page directive that identifies the page as a mobile page, and the controls used on the page, which are mobile controls.

The mobile controls can be programmed device-independently, and the page will produce an output that suits the device that access it.


Mobile Forms

Each mobile page must have at least one mobile form, and each mobile form can have a number of mobile controls.

Note that mobile pages can have multiple mobile forms. This is due to the nature of mobile devices. Mobile devices have small screens and it is very normal to navigate between screens with a simple link.


Automatic Paging

.NET Mobile supports automatic paging for different mobile devices.

The paging is handled differently for each control. For example when paging takes place the controls included in a panel control will stay together.

Displaying Text

This mobile page uses a TextView control to display a large amount of text:

<%@ Page



Inherits=



"System.Web.UI.MobileControls.MobilePage"%>



<%@ Register



TagPrefix="Mobile"



Namespace="System.Web.UI.MobileControls"



Assembly="System.Web.Mobile" %>



<<city /><place />Mobile</place /></city />:Form runat="server">



<<city /><place />Mobile</place /></city />:TextView runat="server">



This is a very long text to demonstrate



how text can be displayed over several screens.



This is a very long text to demonstrate



how text can be displayed over several screens.  



This is a very long text to demonstrate



how text can be displayed over several screens.  



This is a very long text to demonstrate



how text can be displayed over several screens.  



</<city /><place />Mobile</place /></city />:TextView>



</<city /><place />Mobile</place /></city />:Form>



When this page is displayed on a mobile device, the navigation and display functions of the page will be compiled differently for different devices with different display characteristics.

When the text is displayed on a pocket PC with a small display, the user will be able to scroll the text with a scroll bar, but on a cell phone the text will be displayed over several screens with proper navigation tools added.

Note that all mobile controls must have the runat attribute set to "server", in order to secure proper rendering of the page for different devices.

Single Forms

This mobile page has one form:

<%@ Page



Inherits=



"System.Web.UI.MobileControls.MobilePage"%>



<%@ Register



TagPrefix="Mobile"



Namespace="System.Web.UI.MobileControls"



Assembly="System.Web.Mobile" %>



<<city /><place />Mobile</place /></city />:Form runat="server">



   <<city /><place />Mobile</place /></city />:Label runat="server">Hello W3Schools



   </<city /><place />Mobile</place /></city />:Label>



</<city /><place />Mobile</place /></city />:Form>




Multiple Forms

This mobile page has two forms:

<%@ Page



Inherits=



"System.Web.UI.MobileControls.MobilePage"%>



<%@ Register



TagPrefix="Mobile"



Namespace="System.Web.UI.MobileControls"



Assembly="System.Web.Mobile" %>



<<city /><place />Mobile</place /></city />:Form id="f1" runat="server">



 <<city /><place />Mobile</place /></city />:Label runat="server">Hello W3Schools



 </<city /><place />Mobile</place /></city />:Label>



 <<city /><place />Mobile</place /></city />:Link runat="server" NavigateURL="#f2">2



 </<city /><place />Mobile</place /></city />:Link>



</<city /><place />Mobile</place /></city />:Form>



<<city /><place />Mobile</place /></city />:Form id="f2" runat="server">



 <<city /><place />Mobile</place /></city />:Label runat="server">Hello Again



 </<city /><place />Mobile</place /></city />:Label>



 <<city /><place />Mobile</place /></city />:Link runat="server" NavigateURL="#f1">1



 </<city /><place />Mobile</place /></city />:Link>



</<city /><place />Mobile</place /></city />:Form>




Links

Note the <Mobile:Link> element in the example above. The link control lets the user navigate between the two mobile forms.

Programming Events

Mobile controls have an object model with programmable properties, methods and events.

For a complete overview please refer to the reference section.


Submitting Text

This page has two forms:

<%@ Page



Inherits=



"System.Web.UI.MobileControls.MobilePage"%>



<%@ Register



TagPrefix="Mobile"



Namespace="System.Web.UI.MobileControls"



Assembly="System.Web.Mobile" %>



<script runat="server">



Dim age






Sub AgeClick(sender As Object, e As EventArgs)



age=text1.Text



ActiveForm=Form2



End Sub



Sub Form2_Activate(sender As Object,e As EventArgs)



  message.Text="You are " & age & " years old"



End Sub



</script>






<<city /><place />Mobile</place /></city />:Form id="form1" runat="server">



<<city /><place />Mobile</place /></city />:Label runat="server">Age?</Mobile:Label>



<<city /><place />Mobile</place /></city />:TextBox runat="server" id="text1" />



<<city /><place />Mobile</place /></city />:Command runat="server" OnClick="AgeClick" Text="Submit" />



</<city /><place />Mobile</place /></city />:Form>






<<city /><place />Mobile</place /></city />:Form id="form2" runat="server" OnActivate="Form2_Activate">



<<city /><place />Mobile</place /></city />:Label runat="server" id="message" />



</<city /><place />Mobile</place /></city />:Form>



When a page has two forms, the first form is always opened by default.

The first form has a label with the text "Age?", an input box to input the age, and a submit button.

The second page is activated by the submit button on the first page, and displays a response.

When the application runs on a mobile device, the two pages will display like this:

Form 1

Age?
<input name="age" />
<input type="submit" />

Form 2

You are 11 years old



Input Controls

There is a number of mobile controls that support user input.

The most common input control is perhaps the TextBox control, which was demonstrated in the previous chapter. The TextBox control is perfect for simple user input like names, numbers, identifications and keywords.

For larger amount of input a TextView control is a better choice. The TextView control allows long multi-line input like the one you need for SMS or other messages.


Numeric Input

The numeric attribute of the textbox control can be set to true or false to specify whether the textbox should accept only numeric input.

Note: This behavior will normally work on cell phones by changing the input mode from letters to numbers. For HTML browsers however, this behavior is normally not supported.


Password Input

The password attribute of the textbox control can be set to true or false to specify whether the textbox should be treated as a password field.

A password field will hide the input by displaying * (stars) instead of ordinary text.


List Controls

TextBox and TextView controls are well suited for entering input, but sometimes you want the user to select from a list of predefined values.

The SelectionList Control supports drop down lists, check boxes and radio buttons. This topic is covered in another chapter.

The List Control supports selection from menus and lists. The List Control is covered in another chapter.


User Interface Controls

User Interface Controls are controls which display the user interface:

Name

Function

Command

Performs an action

Form

Defines a container for mobile controls

Image

Defines an image

Label

Defines a text

Link

Defines a hyperlink

List

Defines a list

MobilePage

Defines a container for mobile controls

ObjectList

Defines a list of data objects

Panel

Defines a container for other controls

SelectionList

Defines a list to select from

StyleSheet

Defines styles to be applied to other controls

TextBox

Defines a single line input box

TextView

Defines a multi-line input box

For a full control reference, including properties methods, events, and more examples, please refer to the "Mobile Reference" page.

Validation Controls

Validation controls are used to validate the data entered by a user.

Validation controls allow you to validate an input control (like a TextBox), and display a message when validation fails.

Each validation control performs a specific type of validation (like validating against a specific value or a range of values).

By default, page validation is performed when a command control is clicked. You can prevent validation when a control is clicked by setting the CausesValidation property to false.


Validating Input

This page has two forms:

<%@ Page



Inherits=



"System.Web.UI.MobileControls.MobilePage"%>



<%@ Register



TagPrefix="Mobile"



Namespace="System.Web.UI.MobileControls"



Assembly="System.Web.Mobile" %>



<script runat="server">






Sub Page2(Sender as Object,E as EventArgs)



If Page.IsValid Then



  ActiveForm=f2



  text2.Text="You are " & age.text & " years old"



end if



End Sub






</script>






<<city /><place />Mobile</place /></city />:Form id="f1" runat="server">



<<city /><place />Mobile</place /></city />:CompareValidator runat="server"



  ControlToValidate="age"



  Type="Integer"



  ValueToCompare="18"



  Operator="GreaterThanEqual">



You must be at least 18



</<city /><place />Mobile</place /></city />:CompareValidator>






<<city /><place />Mobile</place /></city />:Label runat="server">Age?</Mobile:Label>



<<city /><place />Mobile</place /></city />:TextBox id="age" runat="server" />



<<city /><place />Mobile</place /></city />:Command OnClick="Page2" runat="server">



Submit</Mobile:Command>



</<city /><place />Mobile</place /></city />:Form>






<<city /><place />Mobile</place /></city />:Form id="f2" runat="server">



<<city /><place />Mobile</place /></city />:Label id="text2" runat="server" />



</<city /><place />Mobile</place /></city />:Form>



The first form has a label with the text "Age?", an input box to input the age, and a submit button.

The second page is activated by the submit button on the first page, and displays a response.

If the input validates as error, an error message is displayed.

When the application runs on a mobile device, the two pages will display like this:

Form 1

Age?
<input name="age" />
<input type="submit" />

Form 2

You are 21 years old




The ValidationSummary Control

The previous example used a CompareValidator control to validate an input field. The field to validate was defined by the attribute ContolToValidate.

You can also use a ValidationSummary control with the attribute FormToValidate, to validate all the input of a form.

This way you can display a summary of errors instead of one error at the time.


Validation Controls Reference

For a full control reference, including properties methods, events, and more examples, please refer to the "Mobile Reference" page.

Selecting from a List

This page has two forms:

<%@ Page



Inherits=



"System.Web.UI.MobileControls.MobilePage"%>



<%@ Register



TagPrefix="Mobile"



Namespace="System.Web.UI.MobileControls"



Assembly="System.Web.Mobile" %>



<script runat="server">



Sub Show_Price(sender As Object,e As ListCommandEventArgs) 



  text1.Text=e.ListItem.Text & "=" & e.ListItem.Value



  ActiveForm=f2



End Sub






</script>






<<city /><place />Mobile</place /></city />:Form id="f1" runat="server">



<<city /><place />Mobile</place /></city />:List runat="server"



OnItemCommand="Show_Price">



<Item text="Volvo" value="$30,000" />



<Item text="BMW" value="$32,000" />



<Item text="Audi" value="$34,000" />



</<city /><place />Mobile</place /></city />:List>



</<city /><place />Mobile</place /></city />:Form>






<<city /><place />Mobile</place /></city />:Form id="f2" runat="server">



<<city /><place />Mobile</place /></city />:Label runat="server" id="text1" />



</<city /><place />Mobile</place /></city />:Form>



The first form has a list of cars.

The second page displays a price. This page is activated when a car is selected on the first page.

When the application runs on a mobile device the two pages will display like this:

Form 1

Volvo
BMW
Audi

Form 2

Volvo=$30,000



The SelectionList

This mobile page uses a SelectionList to let the user select a car:

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

<script runat="server">
Sub Car_Click(sender as Object, e as EventArgs)
ActiveForm=f2
t1.text=cars.Selection.Value
End Sub
</script>

<Mobile:Form id="f1" runat="server">
<Mobile:SelectionList runat="server" id="cars" >
<Item Text="Volvo" Value="$30,000" />
<Item Text="BMW" Value="$32,000" />
<Item Text="Audi" Value="$34,000" />
</Mobile:SelectionList>
<Mobile:Command runat="server"
OnClick="Car_Click" Text="Submit" />
</Mobile:Form>

<Mobile:Form id="f2" runat="server">
<Mobile:Label id="t1" runat="server" />
</Mobile:Form>

When this page is displayed on a mobile device, the navigation and display functions of the page will be compiled differently for different devices with different display characteristics.

Fore some devices, like a handheld PC, it might display a dropdown list to choose from. For a cell phone it might display a list of options to select from.

Some mobile devices will display GIF images. Other mobile devices will display BMP images or WBMP images. The Image Control allows you to specify different images for each preferred image type.

This mobile page displays an image:

<%@ Page



Inherits=



"System.Web.UI.MobileControls.MobilePage"%>



<%@ Register



TagPrefix="Mobile"



Namespace="System.Web.UI.MobileControls"



Assembly="System.Web.Mobile" %>



<<city /><place />Mobile</place /></city />:Form runat="server">



<<city /><place />Mobile</place /></city />:Image runat="server">



  <DeviceSpecific>



    <Choice ImageURL="image.gif" />



    <Choice ImageURL="image.bmp" />



    <Choice ImageURL="image.wbmp" />



  </DeviceSpecific>



</<city /><place />Mobile</place /></city />:Image>



</<city /><place />Mobile</place /></city />:Form>



When this page is displayed on pocket PC, a GIF image will be displayed. On a cell phone a WBMP image or a BMP image will be displayed, according to the characteristics of the cell phone.

The AdRotator Control

This mobile page displays different advertisements:

<%@ Page



Inherits=



"System.Web.UI.MobileControls.MobilePage"%>



<%@ Register



TagPrefix="Mobile"



Namespace="System.Web.UI.MobileControls"



Assembly="System.Web.Mobile" %>



<<city /><place />Mobile</place /></city />:Form runat="server">



<<city /><place />Mobile</place /></city />:AdRotator runat="server"



 AdvertisementFile="advertisements.xml">



</<city /><place />Mobile</place /></city />:AdRotator>



</<city /><place />Mobile</place /></city />:Form>



This is the ad file called "advertisements.xml":

<?xml version="1.0" ?>

<Advertisements>



<Ad>

<ImageUrl>image1.gif</ImageUrl>

<BmpImageUrl>image1.bmp</BmpImageUrl>

<WBmpImageUrl>image1.wbmp</WBmpImageUrl>

<NavigateUrl>http://www.1.com</NavigateUrl>

<AlternateText>Visit 1</AlternateText>

</Ad>



<Ad>

<ImageUrl>image2.gif</ImageUrl>

<BmpImageUrl>image2.bmp</BmpImageUrl>

<WBmpImageUrl>image2.wbmp</WBmpImageUrl>

<NavigateUrl>http://www.2.com</NavigateUrl>

<AlternateText>Visit 2</AlternateText>

</Ad>



<Ad>

<ImageUrl>image3.gif</ImageUrl>

<BmpImageUrl>image3.bmp</BmpImageUrl>

<WBmpImageUrl>image3.wbmp</WBmpImageUrl>

<NavigateUrl>http://www.3.com</NavigateUrl>

<AlternateText>Visit 3</AlternateText>

</Ad>



</Advertisements>


The Calendar Control

This mobile page displays a calendar:

<%@ Page



Inherits=



"System.Web.UI.MobileControls.MobilePage"%>



<%@ Register



TagPrefix="Mobile"



Namespace="System.Web.UI.MobileControls"



Assembly="System.Web.Mobile" %>



<script runat="server">






Sub CalChanged(sender as Object,e as EventArgs)



lab1.Text="You selected " & c1.SelectedDate



ActiveForm=f2



End Sub






</script>






<<city /><place />Mobile</place /></city />:Form id="f1" runat="server">



<<city /><place />Mobile</place /></city />:Calendar id="c1"



 OnSelectionChanged="CalChanged" runat="server" />



</<city /><place />Mobile</place /></city />:Form>






<<city /><place />Mobile</place /></city />:Form id="f2" runat="server">



<<city /><place />Mobile</place /></city />:Label id="lab1" runat="server" />



</<city /><place />Mobile</place /></city />:Form>



In this example a calendar is displayed in the first form. When the user select a date from the calendar, the selected date is displayed in a new form.


The PhoneCall Control

This mobile page will display the text "Tove's number" and dial the number (555) 555-5555 when the user selects the text:

<%@ Page



Inherits=



"System.Web.UI.MobileControls.MobilePage"%>



<%@ Register



TagPrefix="Mobile"



Namespace="System.Web.UI.MobileControls"



Assembly="System.Web.Mobile" %>



<<city /><place />Mobile</place /></city />:Form runat="server">






<<city /><place />Mobile</place /></city />:PhoneCall runat="server"



PhoneNumber="(555) 555-5555"



Text="Tove's number"



AlternateFormat="{0}" />






</<city /><place />Mobile</place /></city />:Form>



The attribute "AlternateFormat" has the value "{0}". This displays the text from the attribute "Text".

If you use the value "{1}" it will display the text from the attribute "PhoneNumber".

You can also use a construct like this: AlternateFormat="{0} is {1}". This will display the text "Tove's number is (555) 555-5555".


Utility Controls

For a full control reference, including properties methods, events, and more examples, please refer to the "Mobile Reference" page.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Rehan Shafi

Pakistan Pakistan
I am software developer currently working with mobizone Pakistan.
Areas of Interest:
Web Development, Application Development, Compiler Construction and Software Quality Assurance.
Development Tools:
C#.Net, VB.Net, ASP, ASP.Net, PHP, JAVA
DBMS:
Oracle, SQL Server, MySQL, MS-Access
 
Rehan Shafi
Software Developer
Mobizone Pakistan
rehan841@gmail.com

Comments and Discussions

 
GeneralMy vote of 1 Pinmemberboci9-Jan-10 13:05 
GeneralFormatting PinmvpMark Nischalke2-Mar-07 2:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 23 Jan 2008
Article Copyright 2007 by Rehan Shafi
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid