ASP.NET 中继器中的 ImageButton 不会触发 OnClick 事件处理程序答案

【问题标题】：ImageButton in ASP.NET Repeater does not fire OnClick eventhandlerASP.NET 中继器中的 ImageButton 不会触发 OnClick 事件处理程序
【发布时间】：2009-12-21 13:52:51
【问题描述】：

我在转发器控件中有一个 ImageButton。我已将事件处理程序附加到 ImageButton 的 OnClick 事件。但是当我单击 ImageButton 时，该事件不会被触发。如果我遗漏了什么，请告诉我。谢谢

我已附上 aspx 页面和代码隐藏文件

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

文件后面的代码如下。

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();
        }
    }
}

【问题讨论】：

标签： c# asp.net

【解决方案1】：

在中继器控件中，按钮的行为方式与输出不同。

您需要设置按钮的“CommandName”属性并在Repeater.ItemCommand 事件中检查该命令名称并在那里执行您的逻辑。

【讨论】：

【解决方案2】：

我遇到了同样的问题，并通过使用带有“OnCommand”事件的 av asp:Linkbutton 来解决它。下面贴出我的标记和代码。

标记：

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

后面的代码：

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

        }
    }

【讨论】：