ASP.Net ImageButton not firing onclick

Question

I'm testing out two ImageButton controls one is set programmatically inside a GridView_RowDataBound function and the other is hard-coded on the client side as follows:

Static ImageButton (Works and fires ImageButton_Click):

<asp:ImageButton OnClick="ImageButton_Click" runat="server" ID="Foo" ImageUrl="images/edit-icon.png" />

Dynamic ImageButton (Does not work, won't fire ImageButton_Click):

 protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
        {
.
.
.

    ImageButton i = new ImageButton();
                        i.ImageUrl = "/images/edit-icon.png";
                        i.ID = "icon_" + testID.ToString();
                        i.ToolTip = "Click to add a new comment";
                        i.Click += new ImageClickEventHandler(ImageButton_Click);
                        e.Row.Cells[5].Controls.Add(i);
.
.
.

    }

The Dynamic ImageButton renders as follows

<input type="image" name="GridView1$ctl24$DGV1$ctl02$icon_1234" id="GridView1_ctl24_DGV1_ctl02icon_1234" title="Click to add a new comment" src="/images/edit-icon.png" onclick="ImageButton_Click;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;GridView1$ctl24$DGV1$ctl02$icon_1234&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" style="border-width:0px;">

I notice the dynamic image button contains "onclick" vs the static imagebutton which has "OnClick", not sure if that makes a difference. I've been stumped on this for the last few hours, I don't know why the dynamic ImageButton is not firing. Please help.

UPDATE:

Thanks for all the feedback, I only need to process the ID of the ImageButton and it doesn't have to be server-side. Is there anyway I can do this from client-side using JavaScript in order to avoid postback? I tried re configuring the ImageButton as follows:

                      ImageButton i = new ImageButton();
                    i.ImageUrl = "/images/edit-icon.png";
                    i.ID = "icon_" + testID.ToString();
                    i.ToolTip = "Click to add a new comment";
                    i.OnClientClick = "submitComment(i.ID);return false;";
                    e.Row.Cells[5].Controls.Add(i);

I specify this function in the header of my web form

       <head runat="server">
            <script type="text/javascript">
             submitComment(i.ID){
             //Call WebMethod and pass comment along with this button's testID
}
    </script>
        </head>

But I get the following error when I click on the edit-icon ImageBtn:

Uncaught Reference Error: icon_12345 is not defined.

How is this so? If the edit-icons are already rendered and I'm just using client-side Javascript, shouldn't they already be defined and able to be properly referenced? This seems very counter intuitive to me. Am I missing something here? Is there some other control, besides and ImageButton, I can use for rendering the image without worrying about a postback, but that can still call the Javascript and pass along it's ID? What about using a regular Image control and just wiring it's onclick property to call the the submitComment function.

I'm having this problem as well. It seems like you cannot add an EventHandler to a button after the page_load function is called, as .NET will not register them properly. You could add it in Page_Init, but then you cannot dynamically bind it in the RowDataBound function, which is what I what to do as well. — onit
– onit, Commented Oct 25, 2011 at 14:42
Jay Douglass is correct in saying you are asking for pain and suffering by using this technique. It probably isn't necessary. If you give us a little more code from gv_RowDataBound() that shows WHY you are creating the ImageButton dynamically, I can probably propose an alternative way to accomplish the same task without dynamically creating the control on every postback. — pseudocoder
– pseudocoder, Commented Oct 25, 2011 at 15:11

Jay Douglass · Accepted Answer · 2011-10-25 14:52:16Z

4

The problem is that on postback ASP.NET does not remember that you dynamically added a control on the previous request. The control simply does not exist in the control tree so the event will not fire.

You are asking for pain and suffering when trying to dynamically add controls. The control must be recreated by you before Page_Load if you want the event to fire. See http://forums.asp.net/t/1186195.aspx/1 for more details.

I would just hide the ImageButton for rows that don't need it.

answered Oct 25, 2011 at 14:52

Jay Douglass

4,9382 gold badges31 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pseudocoder Over a year ago

Agree on all counts, except you assume that OP is creating the control dynamically because he only wants it to appear in some rows. There could be other reasons. But the basic concept is the same, the best way to solve this problem is usually a templated ImageButton, Binding Expressions, and use of the CommandName and CommandArgument attributes in combination with GridView.RowCommand

rick schott · Accepted Answer · 2011-10-25 14:44:21Z

1

You have to DataBind on each postback to get the control back into the ControlTree.

answered Oct 25, 2011 at 14:44

rick schott

21.1k5 gold badges54 silver badges81 bronze badges

Comments

Jay Douglass · Accepted Answer · 2011-10-26 16:41:17Z

0

Maybe you could try something like this? Just make a regular img element with a data binding expression for the onclick attribute. "ID" must be a field in the gridview datasource.

<Columns>
    <asp:TemplateField>
        <ItemTemplate>
            <img src="/images/edit-icon.png" onclick="submitComment('<%# Eval("ID", "icon_{0}") %>');"></img>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>

Untested, but I've used something like this before. ASP.NET can get picky parsing the databinding expression.

answered Oct 26, 2011 at 16:41

Jay Douglass

4,9382 gold badges31 silver badges20 bronze badges

Comments

Mario · Accepted Answer · 2013-04-09 20:02:36Z

0

If your page is routed, just add this code to masterpage on_load or on the page where you have the form

form1.Action = Request.Url.PathAndQuery;

answered Apr 9, 2013 at 20:02

Mario

15k21 gold badges64 silver badges118 bronze badges

Collectives™ on Stack Overflow

ASP.Net ImageButton not firing onclick

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related