Пользовательская кнопка ASP с элементом Img не запускает событие на стороне сервера при использовании Chrome и нажатии непосредственно на изображение - PullRequest
Новая
       14

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

1 голос
/ 20 июля 2011

У меня есть настраиваемая кнопка ASP.NET с элементом изображения внутри (и литералом asp).Мне нужна кнопка с изображением и текстом, но я бы предпочел не использовать CSS, поскольку установка фонового изображения с помощью CSS, кажется, удаляет все стандартное форматирование кнопок (градиенты, границы и т. Д., Которые создаются автоматически).У меня кнопка подключена к стандартному событию щелчка на стороне сервера.У меня есть кнопка, размещенная внутри ASP: UpdatePanel.Когда я открываю сайт в Chrome (v 12) и нажимаю непосредственно на изображение , отображаемое на кнопке, событие щелчка на стороне сервера не запускается.Хотя есть постбэк.Если я использую 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:

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

1 Ответ

0 голосов
/ 21 июля 2011

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

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

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

...