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
Concepts
Best Practices for Developing World-Ready Applications
Devices and Platforms Supported by the .NET Compact Framework