iPad Browser ListBox Problem Solved

The problem which brought you to this blog is a best example to understand the kind of challenges Mobile web application development involves and how the 51Degrees.mobi .Net Mobile Framework is a solution for such challenges.

Problem

I have an ASP.Net web page with the ListBox control having AutoPostback set to true and OnSelectedIndexChanged event handler registered and in code behind SelectedIndex property is assigned to -1 because not to have default selection of item in ListBox.


<asp:ListBox runat="server" ID="ListBox1" AutoPostBack="true" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged">
            <asp:ListItem Text="Item 1" />
            <asp:ListItem Text="Item 2" />
            <asp:ListItem Text="Item 3" />
            <asp:ListItem Text="Item 4" />
            <asp:ListItem Text="Item 5" />
asp:ListBox>
<br />
<b>ASP.NET ListBoxb>

Code behind:


protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                ListBox1.SelectedIndex = -1;
        }
 
        protected void ListBox_1SelectedIndexChanged(object sender, EventArgs e)
        {
            Response.Write(".Net Mobile Framework: " + ListBox1.SelectedValue);
        }

When I request the page in iPad (3.2) browser it will be displayed as shown in the Figure 1 after selecting the first item from the ListBox, the ListBox's status remains as though no item has been selected and causes no post back and this behaviour annoys the user.

Screen shots

But if I select any other item other than the first it causes the post back and fires OnSelectedIndexChanged event handler as you would expect. This behaviour again differs from iPad versions 3.2 and 4.2 when you select the first item which is another surprise! But in common both the versions will not do post back when first item of ListBox is selected.

Figure 2: iPad showing ASP.Net ListBox items

Solution

I replace the ASP.Net ListBox control with 51Degrees.mobi Framework ListBox control and everything else remains same. You can download the trial version of the Framework from here. After replacing the controls page html source code will look like this,


<mob:ListBox runat="server" ID="ListBox1" AutoPostBack="true" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged">
    <mob:ListItem Text="Item 1" />
    <mob:ListItem Text="Item 2" />
    <mob:ListItem Text="Item 3" />
    <mob:ListItem Text="Item 4" />
    <mob:ListItem Text="Item 5" />
mob:ListBox>
<br />
<b>51Degrees.mobi ListBoxb>

Notice how only the <asp: tag prefix needs to be replaced with <mob:.

I will rebuild the solution and refresh the iPad browser to request the altered page. The page looks as the following Figure 3.

Figure 3: iPad showing 51Degrees.mobi ListBox items.

after selection of first item it does the post back fires the OnSelectedIndexChanged event at the server side and the response looks like as in the Figure 4.

Figure 4: iPad showing the page after auto post back of 51Degrees.mobi ListBox item selection.

Without even writing a single line of code to address the inconsistency it works with the Framework.

You may notice that the font size of the ListBox is larger than the ASP.Net ListBox this is because of the Framework feature called AutoSize which renders the selectable controls on the page with large size from the default content so that user can easily select using the fingers in touch screen based devices.

iPad Browser ListBox Problem Solved

Problem

Screen shots

Solution

Try us for free