Creating an Object for a List from a Collection Element

The following steps describe how a mobile List control constructs a MobileListItem instance from an element in the collection:

  1. The control checks whether the DataTextField or DataValueField properties are defined. If they are, the control uses these field names to discover properties from the element and set the Text and Value properties of the MobileListItem instance.

  2. If neither the DataTextField nor DataValueField properties are defined, the control sets the Text and Value properties of the MobileListItem instance to the string representation of the element (by using the ToString method).

  3. If an ItemDataBind event handler is defined, the handler is called. You can use this handler to set properties of the MobileListItem instance.

When providing default rendering, the list control represents a MobileListItem instance by its Text property. In templated rendering, the template can render a desired property of the MobileListItem instance or associated data-bound object.

When the ItemsAsLinks property is set, the List control renders items as hyperlinks. The value of the Text property becomes the link text, and the value of the Value property becomes the target URL.

Handling the Selection

If your list is complex, such as an array of objects, you cannot directly access the members of the selected item through the selection. However, if you design your application appropriately, you can access the associated object. If you are creating a group of objects to populate your list, you can make the group a global array, and then handle the returned value as an index into the array, as shown in the following code sample.

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

<script runat="server">
    Private customers(3) As Person

    Private Class Person
        Private _Name, _Nickname, _Initials As String

        Public Sub New(ByVal name As String, _
            ByVal nickname As String, ByVal initials As String)
            Me._Name = name
            Me._Nickname = nickname
            Me._Initials = initials
        End Sub

        Public ReadOnly Property Name() As String
            Get
                Return _Name
            End Get
        End Property
        Public ReadOnly Property Nickname() As String
            Get
                Return _Nickname
            End Get
        End Property
        Public ReadOnly Property Initials() As String
            Get
                Return _Initials
            End Get
        End Property
    End Class

    Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        ReDim customers(2)
        customers(0) = New Person("George Washington", "George", "GW")
        customers(1) = New Person("Abraham Lincoln", "Abe", "AL")
        customers(2) = New Person("Theodore Roosevelt", "Teddy", "TR")

        If (Not IsPostBack) Then
            ' Bind the array to the list.
            List1.DataSource = customers
            List1.DataTextField = "Name"
            List1.DataBind()
        End If
    End Sub

    Protected Sub List1_ItemCommand(ByVal sender As Object, _
        ByVal e As ListCommandEventArgs)

        Dim selectedPerson As Person = customers(e.ListItem.Index)
        Label1.Text = String.Format("{0} (AKA {1}), initials {2}", _
            selectedPerson.Name, selectedPerson.Nickname, _
            selectedPerson.Initials)

        ActiveForm = Form2
    End Sub

    Protected Sub Command1_Click(ByVal sender As Object, _
        ByVal e As EventArgs)

        Me.ActiveForm = Me.Form1
    End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
    <mobile:form id="Form1" runat="server">
        <mobile:List ID="List1" Runat="server" OnItemCommand="List1_ItemCommand">
        </mobile:List>
    </mobile:form>
    <mobile:Form ID="Form2" Runat="server">
        <mobile:Label ID="Label1" runat="server">Label</mobile:Label>
        <mobile:Command ID="Command1" Runat="server" OnClick="Command1_Click">Return to Form1</mobile:Command>
    </mobile:Form>
</body>
</html>
<%@ Page Language="C#" 
    Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile" 
    Namespace="System.Web.UI.MobileControls" 
    Assembly="System.Web.Mobile" %>

<script runat="server">
    private Person[] customers = new Person[3];

    private class Person
    {
        private String _Name, _Nickname, _Initials;

        public Person(String name, String nickname, String initials)
        {
            this._Name     = name;
            this._Nickname = nickname;
            this._Initials = initials;
        }

        public String Name     { get { return _Name;     } }
        public String Nickname { get { return _Nickname; } }
        public String Initials { get { return _Initials; } }
    }

    private void Page_Load(object sender, System.EventArgs e)
    {
        customers[0] = new Person("George Washington", "George", "GW");
        customers[1] = new Person("Abraham Lincoln", "Abe", "AL");
        customers[2] = new Person("Theodore Roosevelt", "Teddy", "TR");

        if(!IsPostBack)
        {
            // Bind the array to the list.
            List1.DataSource    = customers;
            List1.DataTextField = "Name";
            List1.DataBind();
        }
    }

    private void List1_ItemCommand(object sender, 
        ListCommandEventArgs e)
    {
        Person selectedPerson = customers[e.ListItem.Index];
        Label1.Text = String.Format("{0} (AKA {1}), initials {2}", 
            selectedPerson.Name, selectedPerson.Nickname,
            selectedPerson.Initials);

        ActiveForm = Form2;
    }

    protected void Command1_Click(object sender, EventArgs e)
    {
        this.ActiveForm = this.Form1;
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
    <mobile:form id="Form1" runat="server">
        <mobile:List ID="List1" Runat="server" OnItemCommand="List1_ItemCommand">
        </mobile:List>
    </mobile:form>
    <mobile:Form ID="Form2" Runat="server">
        <mobile:Label ID="Label1" runat="server">Label</mobile:Label>
        <mobile:Command ID="Command1" Runat="server" OnClick="Command1_Click">Return to Form1</mobile:Command>
    </mobile:Form>
</body>
</html>

See Also

Concepts

Accessing Data Using Listing Controls