Question

I have a custom ASP.NET button with an image element inside it (and an asp literal). I want a button with an image an text, but I would prefer not to use CSS as setting the background image with CSS seems to remove all of the standard button formatting (gradients, borders, etc, that are automatically created). I have the button hooked up to a standard server-side click event. I have the button placed inside an ASP:UpdatePanel. When I open the site in Chrome (v 12) and click directly on the image rendered on the button, the click event on the server-side doesn’t fire. There is a post-back though. If I use FireFox or IE, it works fine (ie, the server-side ConfirmButton_Click fires). And if I have the button outside of the UpdatePanel, it is also fine in Chrome.

Code (I left out the imports):

1.My custom button that allows an Image:

namespace MyControlLibrary
{
/// <summary>
/// Render an HTML button instead of an input element.
/// </summary>
[ToolboxData("<{0}:HTMLButton runat=server></{0}:HTMLButton>")]
[ParseChildren(false)]
[PersistChildren(true)]
public class HTMLButton : Button
{
    protected override HtmlTextWriterTag TagKey
    {
        get
        {
            return HtmlTextWriterTag.Button;
        }
    }

    protected override void RenderContents(HtmlTextWriter output)
    {

        RenderChildren(output);
    }
}
}

2.The page, code-behind:

 namespace WebApplication2
    {
        public partial class _Default : System.Web.UI.Page
        {
            protected void ConfirmButton_Click(object sender, EventArgs e)
            {
                 // would be nice to be able to do something here
            }
       }
    }

3.The ASP Markup:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master"     AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>

<%@ Register Assembly="MyControlLibrary" Namespace="MyControlLibrary" TagPrefix="CUSTOM" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager runat="server" ID="ScriptManager1">
    </asp:ScriptManager>
    <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Always">
        <ContentTemplate>
            <CUSTOM:HTMLButton runat="server" ID="HTMLButton2"     OnClick="ConfirmButton_Click"
                Enabled="true">
                <img id="Img1" runat="server" src="~/images/page_go.png" alt="some alt     text" />
                <asp:Literal ID="Literal1" runat="server" Text="Inside an ASP:UpdatePanel"     />
            </CUSTOM:HTMLButton>
        </ContentTemplate>
    </asp:UpdatePanel>
    <CUSTOM:HTMLButton runat="server" ID="HTMLButton1" OnClick="ConfirmButton_Click"
        Enabled="true">
        <img id="Img2" runat="server" src="~/images/page_go.png" alt="some alt text" />
        <asp:Literal ID="Literal2" runat="server" Text="Just on the page" />
    </CUSTOM:HTMLButton>
</asp:Content>

Update: Additional Information

On the Network tab of the Chrome built-in debugger, I see that when I click directly on the image on the button (thus causing the problem), the Form Data is a little different than when I click on the non-image area of the button.

ScriptManager1:UpdatePanel1|HTMLButton2
__EVENTTARGET:
__EVENTARGUMENT:
__VIEWSTATE:/wEPDwUJNDk5NDQ3MTUyZGSFDQs1Xrosg9lxmcJ 3Q6Nz2 zbrq0CLJEKUy3yWQ0yw==
__EVENTVALIDATION:/wEWAwK8nZ3eAgKqrv38BgLZ8qO9CG7K1tlR9ucFA1AbifYgZtWmVKs/NshLxmxCD39QxIE9
__ASYNCPOST:true
HTMLButton2: 

Above is what I see when I click, not on the image. Ie, it causes the server-side click event to fire as I expect. When I click directly on the image, the “HTMLButton2” is missing from the ScriptManager1 and from the last line.

Answer 1

Okay, the solution that I found was this: I added a client-side JS/jQuery function tied to onclick of the Img inside the button. It cancels the current event, and does a click on the parent element. Here is the code:

    function clickParent(e) {
        var parentButton = $(e.srcElement).parent().get(0);
        e.preventDefault();
        $(parentButton).click();
    }

As a matter of fact, I actually register this script as well as hook up the onclick of the image from within my custom HTMLButton control so that I don’t have to put the script in every page that uses the button. I didn’t see the need to post those details though.