• 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 2013 2014 4G 51Degrees 5G A.C.Roma A7 ABI Acer Affiliate Marketing Alcatel Amazon AMP Analysis Analytics Android Android 5.0 Lollipop Android Kitkat Android Lollipop Android Media Stick Apache API Apple Apple TV Archos Asha Asian Market ASP.NET Asus Australia Big Data Black Friday Blackberry Blink Browser C C# Case Study CeBIT CES Chrome Cloud CMS combinations Comparison Competition CoolPad COTW Cron CSS3 Data Data Blog Data File Data Model Daydream Denver Design Desire Eye Desktop Detection Developers Device Device Data Device Detection Device Intelligence Device Popularity Device property Device Types Device Use Display dmexco DoCoMo Doogee DotNetNuke Download Drupal Email EReader E-Reader Ericsson Evaluation Event Examples EXPLAY Rio Facebook feature Firefox Firefox OS Fly Foundation Framework France Galaxy S3 Galaxy S5 Galaxy Tab A Galaxy Tab A 8.0 Galaxy Tab A 9.7 Germany git repositories Global Google Google Daydream GSMA HAProxy Hardware Hisense HTC HTC ONE MAX HTC OS HTML5 HTTP Huawei HUAWEI. UPDATE HUDL Huwaei IBC Icemobile Prime 4.0 IE IFA IIS Image Optimiser Image Optimizer India Infographic Ingeniux Internet usage iOS iOS 7 iOS 8 ipad iPhone iPhone 6 IsEmailBrowser IsWebApp Italy Japan Java Javascript Jolla Kentico Keynote Kindle Kindle Fire Kindle Fire HD Leagoo Lenovo LG Location Log File Analysis LTE Lumia Map Memory Meta Data Mi 4S Micromax Microsoft Miia Style Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Module Motorola MVC4 MWC MWC 2017 MWC16 MyPhone Native Native Apps NET New Release News News Letter Nexus Nexus 6 Nexus 9 NFC NGINX Nokia Non-Mobile NVIDIA Omate On7 OnePlus 5 Opera Opera Mini Operating System Optimisation OS OSX 10.10 OTA Panasonic Patent PC Pebble Performance phablet phone PHP Poland Presentation Press Release Price Band PRIV PS4 Python QMobile QR Codes Redirection Research Reseller Responsive Images RESS Review reviews RIM Ringmark RWD Samsung Scala Screen Screen resolution Screen Size SEO Server Set Box Set Top Box Sharepoint Shark 1 SHIFT phones Sitecore SLUSH Smart TV Smartphone Smartphones Smartwatches Snapdragon Sony Sony Xperia Spain Swedish Beers Symbian Tablet Tablets Tesco Testing Tips Top 5 TOTW TV UDS UK Umbraco Update updates US User Agent UserAgent User-Agent Vendors Version 3 VoLTE VR Wearable Web Web Apps WebKit WebMatrix White Paper Widgets Widnows WiFi Wiko Wileyfox Windows Windows Phone Xbox XBox One Xiaomi Xperia Xperia z Yosemite Z10 ZenFon 2 ZOPO ZTE