MOSS 2007 ImageButton Doesn't Fire Event?

English (versi Indonesia)

Today I have got a panic call from my fellows developer, stating that the ImageButton doesn’t fire events when user click on it. He added that it was working yesterday - but today when he come back to the page it behaves strangely. Trying to understand what’s going on, I interviewed the story behind the problem.

1. He creates a webpart that extensively using table layouts. The webpart contains few textbox and a submit button.

   

2. Then, today he decide to replace submit button with ImageButton. However, it stop firing event. He makes sure that he only change System.Web.UI.WebControls.Button into System.Web.UI.WebControls.ImageButton - additionaly he also change click event delegate to listen to ImageClickEventArgs.

   

What might be the problem?

I think, first because by design event firing in ImageButton is different with Button (simply because it fires ImageClickEventArgs instead of EventArgs - other explaination must be somewhere in theory). Second, there should be kind of sink when ImageButton fires event. I will not try to explore the first argument - but the second argument is challenge to solve.
Lets define sink - as is a kind of dump box or masked event because of its behaviour or design. The events must be raise up from the control to the host application, however it sinked somewhere in the bubbling path. Let’s see control hierarchy in the questioned webpart.

Having that hierarchy in our mind, we can start to see what happened in the code. The bigger likelyhood is Panel, because it works mainly as a container for other controls. So, here is the original code

adminPanel visibility will be set to true on certain conditions, but by default it will be invisible. I am not sure why this works when he attach Button() but stop working when he attach ImageButton(). However, I think the invisibility of the panel covering event bubbling from ImageButton(). So to avoid sink-ing problem, I suggest not to set the visibility to false when the panel is being contructed in CreateChildControls() method. Now the code looks like,

Compiling and testing the solution, it works as expected.

--o0o–

Indonesian (English version)

Siang ini saya mendapat pertanyaan dari salah seorang teman, tentang mengapa ImageButton tidak bekerja sebagaimana mestinya - ketika di klik , tidak ada reaksi apapun kecuali refresh halaman. Dia menambahkan, bahwa sehari sebelumnya webpart tersebut bekerja dengan baik - namun hari ini ketika dia mencoba kembali terjadi keaneah seperti yang dia ceritakan. Saya mencoba memahami apa yang sebenarnya ingin dia lakukan, dengan bertany ini dan itu akhirnya didapatkan gambaran awal kejadian tidak bekerjanya webpart itu.

1. Webpart dibuat secara intensive dengan menggunakan layout table. Didalam webpart ada beberapa text box, dan sebuah tombo submit.

   

2. Kemudian, hari ini dia mencoba untuk mengganti tombol submit (Button()) dengan menggunakan ImageButton. Namun sayangnya ImageButton tersebut tidak menghasilkan event apapun. Dia meyakinkan bahwa yang diganti hanya deklarasi System.Web.UI.WebControls.Button menjadi System.Web.UI.WebControls.ImageButton - ditambahkannya lagi bahwa EventArgs diganti menjadi ImageClickEventArgs pada delegate control tersebut.

   

Jadi apa yang mungkin menjadi penyebabnya?

Dalam benak saya, kemungkinan pertama adalah karena desain keluarnya event di ImageButton berbeda dengan Button (ini mudah saja, karena ImageButton menghasilkan ImageClickEventArgs dan bukan EventArgs - mungkin ada penjelasan teoritis lain yang bisa didapatkan di buku??). Kemungkinan kedua adalah karena adanya perangkap ketika ImageButton menghasilkan event. Dalam hal ini, kemungkinan pertama tidak perlu lagi digali - namun kita perlu menggali solusi untuk kemungkinan kedua.
Disini saya mendefinisikan perangkap sebagai sebuah kotak sampah/buangan atau tirai atas event yang terjadi karena sifat / desain kontrol yang digunakan. Sebuah even akan dihasilkan oleh kontrol dan diberikan kepada host/parent nya; sehingga jika event tersebut tidak bisa ditangkap oleh host - berarti selama perjalanannya ada yang menangkap dan membuang event itu. Mari kita lihat hirarki control yang ada pada webpart yang sedang bermasalah tersebut,

Dengan berbekal hirarki itu, kita dapat mulai menganalisa bagian mana yang mungkin menjadi penyebab anomali itu. Kemungkinan terbesar adalah pada bagian Panel - karena panel memiliki fungsi utama sebagai wadah untuk kontrol yang lain. Berikut ini gambaran kode webpart tersebut,

adminPanel visibility akan diatur true berdasarkan kondisi-kondisi tertentu, namun secara default diharapkan tidak terlihat. Meskipun saya tidak yakin mengapa kode ini bekerja hanya untuk Button() namun tidak bekerja untuk ImageButton(). Namun, saya pikir bahwa pengaturan tidak terlihatnya panel menutupi kaluarnya event dari ImageButton(). Dengan demikian, untuk menghindari masalah perangkap itu, sebaiknya kita tidak mengatur visibility menjadi false ketika panel sedang dikonstruksi didalam CreateChildControls(). Dengan perbaikan itu maka kode yang baru akan nampak sebagai,

Kita lakukan kompilasi ulang dan pengetesan, dan nampaknya solusi tersebut berhasil sesuai dengan yang diharapkan.