ImageButton in ASP.NET Repeater does not fire OnCl

I have an ImageButton inside a repeater control. I have attached an eventhandler to the OnClick event of the ImageButton. But when I click the ImageButton the event does not get fired. Please Let me know if I am missing something. Thanks

I've attached the aspx page and the codebehind file

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddTag.aspx.cs" Inherits="IV.Web.Searchv2UI.AddTag.AddTag" EnableEventValidation="false" EnableViewState="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>

    </title>
    <style type="text/css">
    .add-tag-color-required
{
    color:Red;
}

.add-tag-float-right
{
    float:right;
}

    </style>
    <script type="text/javascript">
        function GetRadWindow() {
            var oWindow = null;
            if (window.radWindow)
                oWindow = window.RadWindow; //Will work in Moz in all cases, including classic dialog      
            else if (window.frameElement.radWindow)
                oWindow = window.frameElement.radWindow; //IE (and Moz as well)      
            return oWindow;
        }

        function Cancel() {
            // clean save search fields
            document.forms[0].reset();

            //get a reference to the current RadWindow
            var oWindow = GetRadWindow();
            oWindow.close();
        }

    </script>
</head>
<body >
    <form id="formAddTag" runat="server">

        <%-- RadScriptManager --%>
        <telerik:RadScriptManager ID="radScriptManager" runat="server" />
        <%-- RadScriptManager --%>        

         <%-- Telerik Decorator --%>
        <telerik:RadFormDecorator id="radFormDecorator" runat="server" DecoratedControls="All" />
        <%-- Telerik Decorator --%>

        <%-- StyleSheetManager --%>
        <runway:StyleSheetManager ID="runwayStyleSheetManager" runat="server" />
        <%-- StyleSheetManager --%>




        <telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel" runat="server" />

        <telerik:RadAjaxPanel ID="radAjaxPanelAddTag" runat="server" CssClass="span-12" LoadingPanelID="radAjaxLoadingPanel">
            <div class="span-12 last height-2">
                <div class="span-7 height-2">

                        <asp:Label ID="labelAddTag" Text=" Tags" runat="server" CssClass="color-a-4" />
                        <br/>
                        <span>&nbsp;Enter tags seperated by commas.</span>
                    </div>
                </div>
                <br/>
                <div class="span-7 last height-2">
                    <telerik:RadTextBox ID="radTextBoxTags" runat="server" MaxLength="45" Width="98%" />
                    <asp:RequiredFieldValidator ID="requiredFieldValidatorSearchName" runat="server" ControlToValidate="radTextBoxTags"
                                                Display="None" ErrorMessage="Tag is required.">
                    </asp:RequiredFieldValidator>
                </div>


                <div class="span-5 last height-2">

                        <asp:Button id="buttonAdd" runat="server" Text="Add" CausesValidation="true" Width="45px" OnClick="buttonAdd_Click" />
                        <asp:Button id="buttonCancel" runat="server" Text="Cancel" CausesValidation="false" Width="50px" OnClientClick="Cancel(); return false;" />
                 </div>
                   <br />     
                    <div class="span-12">     
                   <asp:Repeater ID="repeaterTag" runat="server">

                    <ItemTemplate>

                        <asp:Label ID="labelTag" runat="server" Text="<%#Container.DataItem %>"></asp:Label>
                        <asp:ImageButton runat="server" ID="imageButtonRemove" ImageUrl="~/App_Themes/ChromeTheme/Images/message_close_9x9.png" ToolTip="Remove" OnClick="imageButtonRemove_Click" />

                        <span>&nbsp;</span>

                     </ItemTemplate>
                   </asp:Repeater>
               </div>  

        </telerik:RadAjaxPanel>   
        </form>
</body>
</html>

The code behind file is as follows.

using System;
using System.Collections.Generic;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace IV.Web.Searchv2UI.AddTag
{
    public partial class AddTag : System.Web.UI.Page
    {


        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                List<string> tags = new List<string>();

                tags.Add("semiconductor");
                tags.Add("electronics");
                tags.Add("us");

                ViewState["Tags"] = tags;

                repeaterTag.DataSource = tags;
                repeaterTag.DataBind();



            }
        }

        protected void buttonAdd_Click(object sender, EventArgs e)
        {
            List<string> tags = (List<string>)ViewState["Tags"];
            string[] newTags = radTextBoxTags.Text.Split(',');
            if (newTags.Length > 0)
            {

                foreach(string tag in newTags)
                {
                    if (!tags.Contains(tag))
                    {
                        tags.Add(tag);
                    }
                }
            }
            ViewState["Tags"] = tags;
            repeaterTag.DataSource = tags;
            repeaterTag.DataBind();

            radTextBoxTags.Text = string.Empty;
        }

        protected void imageButtonRemove_Click(object sender, EventArgs e)
        {
            List<string> tags = (List<string>)ViewState["Tags"];
            ImageButton button = (ImageButton)sender;

            Panel panel = (Panel)button.Parent;
            string tag = ((Label)(panel.Controls[1])).Text;

            tags.Remove(tag);
            ViewState["Tags"] = tags;
            repeaterTag.DataSource = tags;
            repeaterTag.DataBind();
        }
    }
}

回答1:

Inside a repeater control, a button does not behave the same way as out.

You need to set the "CommandName" property of the button and in the Repeater.ItemCommand event check for that command name and do your logic there.

回答2:

I had det same problem, and solved it by using av asp:Linkbutton with a with the "OnCommand" event. My markup and code behind is posted below.

Markup:

<asp:Repeater ID="rptRecipients" runat="server">
            <HeaderTemplate>
                <table>
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                        <asp:Label ID="LabelRecipient" Text='<%# Eval("Value")%>' runat="server"></asp:Label>
                    </td>
                    <td>
                    <asp:LinkButton OnCommand="lbRemove_Command"  CommandArgument='<%# Eval("Key")%>'
                            CommandName="Remove"  runat="server">
                        <asp:Image ImageUrl="~/Images/delete.png" runat="server" />
                    </asp:LinkButton>
                    </td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>

Code behind:

 protected void lbRemove_Command(object sender, CommandEventArgs e)
    {
        switch (e.CommandName)
        {
            case "Remove":
                Recipients.Remove(e.CommandArgument.ToString());
                rptRecipients.DataSource = Recipients;
                rptRecipients.DataBind();
                break;

        }
    }