ASP.NET Tutorial

Basic Form Controls

All of the controls needed to create mobile Web pages are included in .NET Version 1.1. Any pages that use these features much include the following directives.

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

Pages must inherit from a standard code-behind page called System.Web,UI.MobileControls.MobilePage that is installed with .NET Version 1.1. The second directive identifies the namespace "Mobile" as prefix to all mobile controls.

The <mobile:Form> Tag

All page content on a mobile ASP.NET page is enclosed inside a special <mobile:Form> tag whose general format is shown below.

<mobile:Form runat="server"
  id="id"
  Font-Name="font name"
  Font-Size="Normal|Small|Large"
  Font-Bold="False|True"
  Font-Italic="False|True"
  ForeColor="foreground color"
  BackColor="background color"
  Alignment="Left|Center|Right"
  StyleReference="style reference"
  Wrapping="Wrap|NoWrap"
>

    ...child controls

</mobile:Form>

The only required parameter is runat="server". It should be noted that the <mobile:Form> tag is the only enclosing tag on the page. There are no <html>, <body>, or other common HTML tags as shown in the following general page outline.

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

<mobile:Form runat="server">

  ... form controls
	
</mobile:Form>

There are only a few style settings that can be made for the page. These are special style attributes, not CSS style settings. In fact, attempting to use CSS style sheets on the page results in errors. There is a mobile equivalent to CSS style sheets that is covered in a following tutorial.

The <mobile:Label> Control

Much like standard Web pages, literal text can be coded on the page. It is displayed word-wrapped on the screen. However, since mobile devices have limited screen space for displaying text messages, text strings are normally displayed within controls, which are also scriptable. One such text display control is the <mobile:Label> control, whose general format is shown below.

<mobile:Label
  runat="server"
  id="id"
  Font-Name="font name"
  Font-Size="Normal|Small|Large"
  Font-Bold="False|True"
  Font-Italic="False|True"
  ForeColor="foreground color"
  BackColor="background color"
  Alignment="Left|Center|Right"
  StyleReference="style reference"
  Text="text string"
  Wrapping="Wrap|NoWrap"
>

  ...text string

</mobile:Label>

Text to be display is either coded in the Text attribute of a single, empty tag, or it is enclosed inside the opening and closing tag pairs. This tag and others have optional styles that can be set with tag attributes.

The mobile:Label tag displays its content on a line followed by a line-break character. Therefore, it is not necessary to code a <br/> tag following the label.

As a server control, the mobile:Label tag is scriptable. It must be assigned an id for reference in the script. As a quick example, the following page displays a welcome message along with the date.

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

<SCRIPT runat="server">

Sub Page_Load
  DateOut.Text = DateString()
End Sub

</SCRIPT>

<mobile:Form runat="server">

  <mobile:Label runat="server" Text="Welcome to my site."/>
  Today is <mobile:Label id="DateOut" runat="server"/>

</mobile:Form>

When displayed on a cell phone the page is rendered as shown below.

The <mobile:TextView> Control

The <mobile:TextView> control displays literal text similar to the <mobile:Label> control, but with optional markup tags. Its general format is shown below.

<mobile:TextView
  runat="server"
  id="id"
  Font-Name="font name"
  Font-Size="Normal|Small|Large"
  Font-Bold="False|True"
  Font-Italic="False|True"
  ForeColor="foreground color"
  BackColor="background color"
  Alignment="Left|Center|Right"
  StyleReference=" style reference"
  Wrapping="Wrap|NoWrap"
  Text="text string"
>

  ...text string and HTML

</mobile:TextView>

The control encloses literal text that can also include HTML tags to format the text. For example, the following code displays wrapped text that includes styling and line breaks.

<mobile:Form runat="server">

  <mobile:TextView runat="server">
    This is a long text string that contains <b>bold</b> and <i>italic</i>
    formatting surrounding selected words.<br/>
    <br/>
    The text also contains line-break tags to leave blank lines in the
    screen display.<br/>
    <br/>
  </mobile:TextView>

</mobile:Form>

The text that appears between the opening and closing tags is not scriptable. However, the control includes an optional Text property that can be set by script. When this property is scripted it replaces the text appearing between the tags, but HTML formatting tags are not permitted with this property setting.

The <mobile:Link> Control

Links between mobile Web pages can made with the <mobile:Link> control. Its general format is shown below.

<mobile:Link
  runat="server"
  NavigateUrl="url"
  id="id"
  Font-Name="font name"
  Font-Size="Normal|Small|Large"
  Font-Bold="False|True"
  Font-Italic="False|True"
  ForeColor="foreground color"
  BackColor="background color"
  Alignment="Left|Center|Right"
  StyleReference="style reference"
  Text="text string"
  Wrapping="Wrap|NoWrap"
>

  ...text string

</mobile:Link>

A relative or absolute URL is coded in the NavigateURL property. The text string to be converted to a link is enclosed between the opening and closing tags. In the following example a page contains links to two other pages which contain a link back to the first page.

Home.aspx

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

<mobile:Form runat="server">

  <mobile:Label runat="server" Text="Welcome to my site."/>
  <br/>
  <mobile:Link runat="server" NavigateURL="DatePage.aspx">
    Date Page
  </mobile:Link>
  <mobile:Link runat="server" NavigateURL="TimePage.aspx">
    Time Page
  </mobile:Link>

</mobile:Form>

DatePage.aspx

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

<SCRIPT runat="server">

Sub Page_Load
  DateOut.Text = DateString()
End Sub

</SCRIPT>

<mobile:Form runat="server">

  Today is <mobile:Label id="DateOut" runat="server"/>
  <br/>
  <mobile:Link runat="server" NavigateURL="Home.aspx">
    Home
  </mobile:Link>

</mobile:Form>

TimePage.aspx

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

<SCRIPT runat="server">

Sub Page_Load
  TimeOut.Text = TimeString()
End Sub

</SCRIPT>

<mobile:Form runat="server">

  Today is <mobile:Label id="TimeOut" runat="server"/>
  <br/>
  <mobile:Link runat="server" NavigateURL="Home.aspx">
    Home
  </mobile:Link>

</mobile:Form>

Cell phone display is shown in the following screen shots.

Creating Multiple Forms

Normal ASP.NET pages can contain only a single <form runat="server"> tag. Under ASP.NET mobile controls, however, a page can contain several forms, each of which represents a screen display. This ability permits you to package multiple screens on the same .aspx page. This practice is approapriate where screens are containers for a small amount of output, as would be the case for most cell phone screens; it is also appropriate where scripts can bind output to all page controls when the page is first loaded.

The above example pages are rewritten below as a single page with multiple forms.

Home.aspx

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

<mobile:Form id="HomeScreen" runat="server">
  <mobile:Label runat="server" Text="Welcome to my site."/>
  <br/>
  <mobile:Link runat="server" NavigateURL="#DateScreen">
    Date Page
  </mobile:Link>
  <mobile:Link runat="server" NavigateURL="#TimeScreen">
    Time Page
  </mobile:Link>
</mobile:Form>

<mobile:Form id="DateScreen" runat="server">
  Today is <mobile:Label id="DateOut" runat="server"/>
  <br/>
  <mobile:Link runat="server" NavigateURL="#HomeScreen">
    Home
  </mobile:Link>
</mobile:Form>

<mobile:Form id="TimeScreen" runat="server">
  Today is <mobile:Label id="TimeOut" runat="server"/>
  <br/>
  <mobile:Link runat="server" NavigateURL="#HomeScreen">
    Home
  </mobile:Link>
</mobile:Form>

All forms on the page must have id values to identify them. Links between the forms (screens) are made to these form ids prefixed with the character "#". As shown in the screen shots below, screen navigation is identical to that produced with multiple pages.

Although standard ASP.NET pages do not permit multiple forms, the above code works correctly even when displayed in a standard browser or in Pocket PC browsers as shown below.

Linking Models

It is well to keep in mind the two models for designing and linking pages. As shown in the following diagram, one model employs a single .aspx page on which are coded as many <mobile.form> controls as needed to represent the multiple screens to be displayed. The second model separates multiple screens into separate .aspx files. For the most part it is your choice as to how you design your applications, given operational contingencies that might arise in linking and passing information between the pages.

If you have downloaded and installed the Openwave emulator, you can link to the example pages on this tutorial page through the following URLs:

http://msconline.maconstate.edu/tutorials/aspnet/aspnet16/Mobile3.aspx
http://msconline.maconstate.edu/tutorials/aspnet/aspnet16/Mobile6.aspx

These pages also display in a standard browser.