• About Us
  • Blog
  • Basket
  • Account
  • Sign In
  •  

Blog

Published on Thursday, June 16, 2011

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:

iPad showing ASP.Net ListBox

Figure1: iPad showing ASP.Net ListBox.

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.


iPad showing ASP.Net ListBox items

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.

 

iPad showing 51Degrees.mobi ListBox items

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.



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

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.

Comments (0)

Author: Products Team

Categories: Development

Tags:

Murali Setty
>

Products Team

Other posts by Products Team
Contact author

Name:
Email:
Subject:
Message:
x

Tags

.NET 4G 51Degrees 5G Acer Adform Adtech Advertising Afilias Alcatel Amazon AMP Analysis Analytics Android Apache API Apple Asian Market ASP.NET Asus Blackberry Browser C C# Centro Chrome Cloud CMS CPU CSS3 Data Data Blog Data File Daydream Design Detection Developers Device Device Data Device Detection Device Intelligence Device Models Device property DeviceAtlas Disney dmexco DotNetNuke Download ebay Ericsson Event Facebook Firefox Foundation Framework Galaxy git repositories Google Google Analytics Google Daydream GPU GSMA Guess HAProxy Hash Trie HTC HTML5 HTTP HTTP Headers Huawei Infinix Ingeniux Internet usage iOS iOS 13 ipad iPadOS iPhone iPhone 11 Java Javascript Kentico LG Liferay LTE m.dot Memory Memory leak Meta Data Microsoft Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Motorola Mozilla MWC MWC 2017 MWC16 Native Apps NET New Release News Nexus NFC NGINX Nokia OnePlus 5 Opera Operating System Oppo Optimisation OS Patent Performance PHP Press Release Price Band programmatic Publishers Python Redirection Research Responsive Images Responsive web design RESS Review RTB RWD Safari Samsung Scala ScientiaMobile SEO Server Server-side optimisation Seznam.cz Sitecore Smart TV Smartphone Smartwatches Sony Swedish Beers Tablet Tencent Testing Tips Tutorial Umbraco Update User Agent User-Agent Valgrind Varnish Varnish Cache Video Vodafone VoLTE Web Web Apps Web content management Webtrekk White Paper Widgets WiFi Windows WURFL Xiaomi Xperia ZTE