Walkthrough: Customizing ASP.NET Mobile Web Pages for Specific Devices

Article
02/14/2011

Device filters, templating techniques, and property override features in ASP.NET mobile Web pages enable you to customize your application to render controls differently for different devices. This walkthrough shows you how to use Visual Studio to create templates, device filters, and property overrides for a mobile control. For more background on device filters, see ASP.NET Device Filtering Overview

During this walkthrough, you will learn how to:

Add an ASP.NET Web page and a mobile Web configuration file.
Add a List control to a form.
Add a templated control to a mobile Web page.
Edit the control templates.
Apply property overrides for a template.

Device Customer

Prerequisites

To complete this walkthrough, you need:

Visual Studio or Visual Web Developer Express Edition.
The ability to run the page on a device such as a mobile phone. You can run this walkthrough even if you have only a desktop browser. However, a device emulator can enable you to see more directly the functionality of the controls you will use in this walkthrough.
Access to Microsoft Internet Information Services (IIS) and permission to create a new application (or virtual directory) in IIS. It is recommended that you use a local copy of IIS for the pages in the application, which makes it easiest to test the application with your emulator. However, if you cannot create an application using IIS, you might still be able to use an emulator with the ASP.NET Development Server. For details, see How to: Work with Emulators and Browsers.

Creating the Web Site

If you have already created a local IIS Web site in Visual Web Developer (for example, by following the steps in Walkthrough: Creating a Local IIS Web Site in Visual Studio), you can use that Web site and skip to the next section, "Creating a Mobile Web Page and Configuration File." Otherwise, create a new local IIS Web site by following these steps.

Note

If you have installed a device emulator, the Web site you work with in this walkthrough must be accessible to the emulator, so this walkthrough recommends using an IIS Web site. If your emulator can access Web pages served by the ASP.NET Development Server, you can create or open a file system Web site instead.

To create a local IIS Web site

Open Visual Studio.
On the File menu, click New Web Site.

The New Web Site dialog box appears.
Under Visual Studio installed templates, click ASP.NET Web Site.
Click Browse.

The Choose Location dialog box appears.
Click Local IIS.
Click Default Web Site.
Click the Create new Web program icon, which is located in the upper-right corner.

This icon is not labeled, but when you hold the mouse pointer over it, a ToolTip identifies the icon.

A new application named WebSite is added under Default Web Site.
In the box for the new Web site, enter C:\WebSites\DeviceSpecificWalkthrough, and then click Open.
In the Language list, click the programming language that you prefer to work in.
Click OK.

Visual Web Developer creates the new Web site and opens a new page named Default.aspx.

Creating a Mobile Web Page and Configuration File

In this section, you will create a mobile Web page, which is similar to a regular ASP.NET Web page, but includes some elements unique to mobile pages. For example, all mobile Web pages must inherit from MobilePage and include a Form control. You will also create a mobile Web.config file, which you will use later to create device-specific features.

You will also add a control that displays data and that supports the use of templates. The mobile controls that support templates are the List, ObjectList, and DeviceSpecific controls. The following procedures use a List control. You will add code later in the walkthrough to emulate a data source.

To create an ASP.NET mobile Form and a mobile Web Configuration file

If the Default.aspx file is open, close it.

It will not be used in this walkthrough.
If the Web site has a Web.config file, delete it. (If you are working with an existing Web site, temporarily rename the Web.config file while you are working with this walkthrough.)
In Visual Studio, on the File menu, click New, and then click File. In Visual Web Developer Express, on the File menu, click New File.

The Add New Item dialog box appears.
Under Visual Studio Installed Templates, click Mobile Web Configuration File.
Click OK.

The new configuration file is opened in the editor. Note the <deviceFilters> section of the Web.config file. These filters will appear in a list later in the walkthrough.
Close the Web.config file.
On the File menu, click New, and then click File.

The Add New Item dialog box appears.
Under Visual Studio Installed Templates, click Mobile Web Form.
In the Name box, enter the name of the file.

For example, type TemplateTest.
Clear the Place code in separate file check box.
Click OK.
Switch to Design view.
From the Mobile Web Form tab of the Toolbox, drag a List control into the Form control.

Selecting a Device Filter

Now you have your Web site, a mobile controls version of the Web.config file, and a form with a List control. In the next procedure, you will select the default device filter.

A device filter enables applications to customize the appearance of controls for specific hardware devices or for categories of devices. The customization is based on the capabilities of the browser in the device being used with the application. For more information about device filters, see Introduction to Device Filters

To select a default device filter

Right-click the List control and then click Templating Options.

The Templating Options dialog box appears. In the Applied Device Filter list, there are no filters listed. This means that no device filters have been applied to the control.
Click Edit.

The Applied Device Filters dialog box appears.
If there are no items in the Available Device Filters list, verify that your Web.config file has a <deviceFilters> section containing elements for a variety of device filters. If necessary, refer to the preceding procedure to create a mobile Web.config file.
In the Available Device Filters list, select (Default) and click Add to List.
Click OK.

The Templating Options dialog box is still open.
In the Applied Device Filter list, select (Default).

In the Markup Schema list box, Mobile HTML 3.2 Template displays.

Note

The information specified in the Markup Schema field is used only by the designer and has no effect at run time. The schema provides Microsoft IntelliSense and syntax checking in the Source view.
Click Close.

Editing Templates

You can now edit individual templates for the List control you added to the page. The List control defines the following templates:

Header template
Footer template
Item template
Alternating item template
Separator template

In the following procedure, you will put Label controls in the header template and the item template. In addition, you will bind the Label control in the item template to a data value.

To edit the templates

Right-click the List control, click Edit Templates, and then click Header and Footer Templates.

The HeaderTemplate and FooterTemplate boxes are displayed in the form.
From the Mobile Web Forms tab in the Toolbox, drag a Label control into the header template.
In the Properties window, set the Text property to Cities List.
Right-click the List control, click Edit Templates, and then click Item Templates.

The ItemTemplate and AlternatingItemTemplate boxes are displayed in the form.
From the Mobile Web Forms tab in the Toolbox, drag a Label control into the item template.
Right-click the Label control and then click Edit DataBindings.

The DataBindings dialog box is displayed.

In the Code Expression box, enter the following expression:

CType(Container, MobileListItem)

(MobileListItem)Container

Click OK.
Right-click the List control and then click End Template Editing.
Save the file and close it.

Creating Data to Display in the List Control

To emulate reading data from a database or other data source, you will create some data in code that the List control can bind to.

To create data in code

Switch to Source view.
Copy the following code and paste it into the <script runat="server"> element in the page.

Note

The example code uses a MobileListItem object to structure the data into two properties, Text and Value. You could also create a custom class and set the DataTextField and DataValueField properties of the List control to use the properties of your custom class.
```
Private Sub Page_Load()
    Dim _arrayList As New ArrayList()

        _arrayList.Add(New MobileListItem("San Francisco", "SF"))
        _arrayList.Add(New MobileListItem("Seattle", "SEA"))
        _arrayList.Add(New MobileListItem("New York", "NY"))
    List1.DataSource = _arrayList
    List1.DataBind()
End Sub
```

Applying Property Overrides

For each device filter you have selected, you can set properties specific to that device and override the corresponding properties in the List control. In the following procedure, you will set the DataTextField and ForeColor properties for the (Default) device filter.

To apply property overrides for a specific device filter

Switch to Design view.
Select the List control, and in the Properties window, click the ellipsis button () in the (PropertyOverrides) box.

The Property Overrides dialog box is displayed.
In the Applied Device Filter list, click (Default).

The Device Specific Properties list displays the properties that you can override.
For the DataTextField property, enter Text.

This ensures that the Text property of each MobileListItem in the data source will appear in the List at run time for the specified device filter.
Set the ForeColor property to Red.
Click OK.

Testing the Page

You can now run the page.

To test the page

In Solution Explorer, right-click TemplateTest.aspx and then click View in Browser.

The page appears in your default browser.
To view the page in a device emulator, follow the device emulator manufacturer's instructions to navigate to the page.

If your emulator matches the selected device filter listed in the Web.config file, you will see the output you specified for that device.

Next Steps

This walkthrough has illustrated how to use Visual Studio to create a control with device-specific property settings, select a device filter, edit the templates for that filter, and set property overrides for that filter.

You might also switch to Source view and look at the declarative markup generated by Visual Studio.

Look at the page in several browsers or emulators to see if your device-specific settings provide different output for your default browser and for your emulator. You can extend the walkthrough by selecting another device filter in addition to the default filter in order to see output unique to your emulator.

For more information, see the following topics: