Introduction to ASP.NET Mobile Web Pages

This section of the documentation introduces you to designing ASP.NET mobile Web 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, see Best Practices for Developing World-Ready Applications in the Microsoft ASP.NET documentation.

Authoring Tools

To create ASP.NET mobile Web pages, you can use Microsoft Visual Studio or you can use a text editor. Visual Studio provides tools for creating mobile Web pages and its code, and for managing the application containing your mobile Web pages.

After you create your mobile pages, you can view them using a browser on a supported device. For more information, see Devices and Platforms Supported by the .NET Compact Framework.

Server-Side Applications

Mobile controls run on the server. They send markup language to the browser; the markup specifies how to display the controls and content in the current form or page.

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

Client Script

Like other types of Web pages, mobile Web pages can contain client script for the browser to process. If these scripts refer to specific Web server 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.

Traditional "Hello World" Example

The following code example illustrates a "Hello World" mobile Web page. The example demonstrates using a Form control as a container for a Label mobile control that displays 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" Example

The mobile community is worldwide. The following code example illustrates an international version of "Hello World". In this variation of the preceding example, a List control displays a list of languages as defined in individual <Item> elements. An event handler reads the language selected by a user and then switches to another form. A switch statement is used to display the correct text for the user's selected language.

<%@ 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"></mobile:Label>
  <mobile:Link runat=server id="GoBack" 
    NavigateURL="#ListStuff">back</mobile:Link>
</mobile:Form>

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.

See Also

Reference

Form

Label

<Item> Element

Concepts

Best Practices for Developing World-Ready Applications

Devices and Platforms Supported by the .NET Compact Framework

Other Resources

Developing ASP.NET Mobile Web Pages