asp image button click event with JQuery Mobile

Question

I have been working on a site in VB.NET and JQM - and all has been going OK.

Now, I am trying to include a standard Image button using a tag such as:

<asp:ImageButton ID="btnYear" runat="server" ImageUrl="~/images/buttons/year_btn.gif" />

and in the VB code behind file there is a click event similar to the following:

Private Sub btnYear_Click(sender As Object, e As System.Web.UI.ImageClickEventArgs) Handles btnYear.Click    
    Session("TimeFrame") = "YEAR"    
    *do other code* 
End Sub

When I click the Image Button and trace the code - all the code in the page events in the code behind file fire (page load, page prerender, etc) - but the click event for the image button never fires.

If I replace the Image button with a standard asp:Button and do all the same - then the click event in the code behind fires just fine! Is it not possible to use an ASP ImageButton within a JQM page and hold a click event in the VB Code behind file?

EDIT Ok much appreciation to andleer for his response - but it brings a new scenario (problem) with my page to light, also concerning these ImageButtons.

I have the ImageButton controls contained within a user control. My page is a single ASPX file with multiple <div data-role="page"> elemenst in it, each with its own ID ("page1", "page2", "page3", etc) - following the standard usage of JQM's multi-page functionality. Each "page" section contains an instance of the user control that contains the Image buttons. This all works well, with one problem - when the user navigates away from the default "page1" to any other "page" and clicks one of the image buttons, the code fires, the page reloads - and lands the user back on the default page - "page1".

This is no good - I needed a way to allow the user to fire the button and reload the page and stay on the "page" element they were viewing - JQM accomplishes these multiple pages using hash tags in the URL - so I found a line of code that I added to the page's load event which read:

`Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    Me.Form.Attributes("onsubmit") = "this.action+=top.location.hash;"

End Sub`

I was originally using radio buttons on my user control - which JQM was "skinning" so they appeard as buttons - and with this one line in the Page_Load event, a user could click a radio button on any "page" element and the code behind the radio buttons would fire and the page would reload with the user back on the same "page" element they clicked from - not so replacing the radio button with Image Buttons - when I add that line of code to the Page_Load event, the ImageButton controls completely cease to function - when I click the the code in their click even in the code behind does not fire - nor do any of the page level events such as Page_Load or Page_PreRender - clicking them now does absolutely nothing....

Any thoughts on this?

Answer 1

A new answer to address the second part of your question:

I have found that asp.net web forms simply doesn't work with jQuery Mobile multi page scenarios. Web forms requires all web controls to reside within a single <form /> element that needs to span all jQuery Mobile ("virtual") pages. This is in direct conflict with jQuery Mobile's need to have <form /> elements within each sub page for proper rendering and post packs.

Consider MVC instead.