Пользовательская кнопка ASP с элементом Img, не запускающим событие на стороне сервера при использовании Chrome и нажатии непосредственно на изображение

У меня есть пользовательская кнопка ASP.NET с элементом изображения внутри нее (и литералом asp). Мне нужна кнопка с изображением и текстом, но я бы предпочел не использовать CSS, поскольку установка фонового изображения с помощью CSS, похоже, удаляет все стандартное форматирование кнопок (градиенты, границы и т. д., которые создаются автоматически). У меня есть кнопка, подключенная к стандартному событию щелчка на стороне сервера. У меня есть кнопка, размещенная внутри ASP:UpdatePanel. Когда я открываю сайт в Chrome (версия 12) и нажимаю непосредственно на изображение, отображаемое на кнопке, событие click на стороне сервера не срабатывает. Зато есть постбэк. Если я использую FireFox или IE, все работает нормально (т. е. срабатывает кнопка ConfirmButton_Click на стороне сервера). И если у меня есть кнопка за пределами UpdatePanel, в Chrome тоже все в порядке.

Код (я пропустил импорт):

1. Моя пользовательская кнопка, которая позволяет изображение:

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. Страница, код программной части:

 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. Разметка ASP:

<%@ 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>

Обновление: дополнительная информация

На вкладке «Сеть» встроенного отладчика Chrome я вижу, что когда я нажимаю непосредственно на изображение на кнопке (что вызывает проблему), данные формы немного отличаются от тех, когда я нажимаю на область без изображения кнопка.

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

Выше показано то, что я вижу, когда нажимаю не на изображение. Т.е. это приводит к срабатыванию события щелчка на стороне сервера, как я и ожидал. Когда я нажимаю непосредственно на изображение, «HTMLButton2» отсутствует в ScriptManager1 и в последней строке.


events c# asp.net imagebutton updatepanel
person Jeff M    schedule 20.07.2011    source источник
comment
Вы видели это обсуждение?   -  person Kirill    schedule 20.07.2011
comment
Я видел это. Независимо от того, связано ли поведение Chrome между двумя проблемами или нет, это решение, похоже, не применимо к этой проблеме. Я попробовал это исправление, хотя. Кроме того, как указано, проблема, с которой я сталкиваюсь, возникает только тогда, когда кнопка находится внутри ASP:UpdatePanel, поэтому я думаю, что изменение CSS не сделает и не сломает это.   -  person Jeff M    schedule 21.07.2011

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, решение, которое я нашел, было следующим: я добавил клиентскую функцию JS/jQuery, привязанную к клику Img внутри кнопки. Он отменяет текущее событие и делает щелчок по родительскому элементу. Вот код:

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

На самом деле, я фактически регистрирую этот скрипт, а также подключаю щелчок изображения из своего пользовательского элемента управления HTMLButton, чтобы мне не приходилось помещать скрипт на каждую страницу, которая использует кнопку. Однако я не видел необходимости публиковать эти подробности.

person Jeff M    schedule 21.07.2011
comment
Я хотел бы добавить, что я до сих пор понятия не имею, почему такое поведение произошло в Chrome. - person Jeff M; 21.07.2011