Introduction to Mobile Web Forms

Article
09/14/2006

This section of the documentation introduces you to designing forms and ASP.NET mobile Web Forms pages using ASP.NET mobile controls. The mobile controls are built on and extend the technology of the Microsoft .NET Framework.

Note If you are authoring pages in a language other than English, please see Best Practices for Developing World-Ready Applications in the Microsoft ASP.NET documentation.

Authoring Tools

To begin authoring an ASP.NET mobile Web application, you must decide which tool to use. You can use the ASP.NET Mobile Designer that is provided as part of the Microsoft Visual Studio .NET Development Environment. Or you can use any text editor to create an Active Server Pages (.aspx) file that represents a mobile Web Forms page.

The designer provides a visual tool for creating mobile Web Forms and managed code (a code-behind file) for loading the new mobile Web Forms page.

Server-Side Applications

Each mobile Web Forms page contains at least one mobile form, indicated by the <mobile:Form> tag. Every mobile control tag must include the runat=server attribute.

After you create your application, you can view it using any of the supported browsers and a supported device. For more information, see Supported Devices.

Client-Side Scripts

Mobile controls run on the server. They transmit markup language that tells the client browser how to display the controls and content in the current form or page. The markup language contains identifiers for the controls. Like other types of Web pages, mobile Web Forms pages can contain scripts for the client browser to process. If these scripts refer to specific controls, they must use the identifier emitted in the markup language. These identifiers vary depending on what markup language the device supports. To obtain the exact name of the control, compile the application, browse to the page or form, and view its source markup language.

Traditional "Hello World"

The following is the time-honored "Hello World" source code example within a mobile control. This example demonstrates using a Form control as a container for a Label mobile control that contains the text "Hello, world!"

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" 
   Language="C#" %>
<mobile:Form id=Form1 runat="server">
   <mobile:Label id=Label1 runat="server">
      Hello, world!
   </mobile:Label>
</mobile:Form>

International "Hello World"

The mobile community is worldwide, so the following example is an international version of "Hello World". In this version of the previous example, a script creates an event handler to read the selection text, and then selects the next form. A switch statement handles the translations for the List control and then switches between the forms.

<%@ Page Language="c#" 
   Inherits="System.Web.UI.MobileControls.MobilePage" %>

<script runat="server">
public void MyEventHandler(Object source, ListCommandEventArgs e)
{
   Selection.Text = "You selected " + e.ListItem.Text;
   ActiveForm = SecondForm;

   switch (e.ListItem.Text)
   {
      case "French":
         Selection.Text = "Bonjour le monde";
         break;

      case "German":
         Selection.Text = "Hallo Welt";
         break;

      case "Italian":
         Selection.Text = "Ciao il mondo";
         break;

      case "Norwegian":
         Selection.Text = "Hei verden";
         break;

      case "Portuguese":
         Selection.Text = "Oi mundo";
         break;

      default:
         Selection.Text = "Hello World";
         break;
   }
}
</script>
<mobile:Form id="ListStuff" runat="server"   BackColor="White" ForeColor="#bb7023">
   <mobile:Label runat=server id="label">Pick a Language!
   </mobile:Label>
   <mobile:List runat=server id="ListMe"      OnItemCommand="MyEventHandler">
      <item Text="English" />
      <item Text="French" />
      <item Text="German" />
      <item Text="Italian" />
      <item Text="Norwegian" />
      <item Text="Portuguese" /> 
    </mobile:List>
</mobile:Form>

<mobile:Form id="SecondForm" runat="server"   BackColor="White" ForeColor="Green">
   <mobile:Label runat=server>Your "Hello World"      Translation</mobile:Label>
   <mobile:Label runat=server       id="Selection">1</mobile:Label>
   <mobile:Link runat=server id="GoBack"       NavigateURL="#ListStuff">back</mobile:Link>
</mobile:Form>

There is only one new mobile control used in the multilingual "Hello World": the List control. Its <Item> element provides the context for the text.

Changing the Text Encoding for an International Application

International applications often require you to change the character encoding from the default UTF-8 encoding. To change the text encoding, use the <globalization> Element, as in the following example, which sets the encoding to UTF-16:

<globalization>
  requestEncoding="utf-16"
  responseEncoding="utf-16"
/>

You can set the encoding in either the global Machine.config file, which specifies the encoding for all of your applications, or in the application's Web.config file, which specifies the encoding for only that application.

Share via