3

我创建了一个自定义 Web 控件来充当带有图像的按钮。我希望能够将其设置为DefaultButtonASP.NET 面板控件的参数目标。我实现了IButton接口，使用控件加载页面时没有报错。但是，当我在该面板内的文本框中按 Enter 键时，不会引发控件的 Click 事件。当我用标准的 ASP.NET 按钮替换我的控件时，一切正常。

我有一个测试页，其面板包含一个文本框、一个自定义按钮的实例和一个标准的 asp.net 按钮。这些按钮连接到一个事件处理程序，该处理程序会将文本框更改为调用者的 ID。

当面板的 DefaultButton 设置为 ASP.NET 按钮时，在下一个框中按 Enter 可以正常工作 - 页面回发，并且文本框填充了标准按钮的名称。当面板的 DefaultButton 设置为我的按钮时，在文本框中按 Enter 会导致页面回发，但不会触发 Click 事件。手动单击按钮可以正常工作。

有谁知道我必须添加到我的自定义控件以使其处理来自面板控件的事件？我正在寻找在 Button 的源代码中使用 Reflector，但无法确定是什么导致了这种行为。

下面我贴出了控件的源码，以及测试页的相关源码。

控制来源：

public class NewButton : WebControl, IPostBackEventHandler, IButtonControl
{
    public NewButton() : base(HtmlTextWriterTag.A) { }

    public event EventHandler Click;

    public event CommandEventHandler Command;

    public string Text
    {
        get { return ViewState["Text"] as string; }
        set { ViewState["Text"] = value; }
    }

    public string ImageUrl
    {
        get { return ViewState["ImageUrl"] as string; }
        set { ViewState["ImageUrl"] = value; }
    }

    protected virtual void OnClick(EventArgs e)
    {
        if (Click != null)
            Click(this, e);
    }

    protected virtual void OnCommand(CommandEventArgs e)
    {
        if (Command != null)
            Command(this, e);
    }

    protected override void AddAttributesToRender(HtmlTextWriter writer)
    {
        base.AddAttributesToRender(writer);

        writer.AddAttribute(HtmlTextWriterAttribute.Class, "Button");
        writer.AddAttribute(HtmlTextWriterAttribute.Onclick, Page.ClientScript.GetPostBackEventReference(this, "Click"));
    }

    protected override void RenderContents(HtmlTextWriter writer)
    {
        // base.RenderContents(writer);

        writer.WriteFullBeginTag("span");
        writer.WriteFullBeginTag("span");

        if (!String.IsNullOrEmpty(ImageUrl))
        {
            writer.WriteBeginTag("img");
            writer.WriteAttribute("src", Page.ResolveClientUrl(ImageUrl));
            writer.Write(HtmlTextWriter.SelfClosingTagEnd);
            writer.Write(" ");
        }

        writer.WriteEncodedText(Text);
        writer.WriteEndTag("span");
        writer.WriteEndTag("span");
    }

    public void RaisePostBackEvent(string eventArgument)
    {
        if (this.CausesValidation)
        {
            Page.Validate(this.ValidationGroup);
        }
        OnClick(EventArgs.Empty);
        OnCommand(new CommandEventArgs(this.CommandName, this.CommandArgument));
    }

    public bool CausesValidation
    {
        get { return ViewState["CausesValidation"] as bool? ?? true; }
        set { ViewState["CausesValidation"] = value; }
    }

    public string CommandArgument
    {
        get { return ViewState["CommandArgument"] as string; }
        set { ViewState["CommandArgument"] = value; }
    }

    public string CommandName
    {
        get { return ViewState["CommandName"] as string; }
        set { ViewState["CommandName"] = value; }
    }

    public string PostBackUrl
    {
        get { return ViewState["PostBackUrl"] as string; }
        set { ViewState["PostBackUrl"] = value; }
    }

    public string ValidationGroup
    {
        get { return ViewState["ValidationGroup"] as string; }
        set { ViewState["ValidationGroup"] = value; }
    }
}

调用它的代码：

<asp:Panel ID="Panel1" runat="server" CssClass="StandardForm" DefaultButton="NewButton1">
    <asp:TextBox runat="server" ID="text1" Columns="40" />
    <MyControls:NewButton ID="NewButton1" runat="server" Text="Test" OnClick="OnClick" />
    <asp:Button runat="server" ID="OldButton1" OnClick="OnClick" Text="Test" />
</asp:Panel>

代码背后：

   protected void OnClick(object sender, EventArgs args)
    {
        text1.Text = "Click event received from " + ((WebControl) sender).ID;
    }

控件呈现如下：

<div id="ctl00_MainContent_Panel1" class="StandardForm" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_MainContent_NewButton1')">
    <input name="ctl00$MainContent$text1" type="text" size="40" id="ctl00_MainContent_text1" />
    <a id="ctl00_MainContent_NewButton1" class="Button" onclick="__doPostBack('ctl00$MainContent$NewButton1','')"><span><span>Test</span></span></a>
    <input type="button" name="ctl00$MainContent$OldButton1" value="Test" onclick="javascript:__doPostBack('ctl00$MainContent$OldButton1','')" id="ctl00_MainContent_OldButton1" />
</div>
4

2 回答 2

1

查看客户端标记（在浏览器中查看源代码）；此功能应在源代码中呈现类似的内容：

javascript:return WebForm_FireDefaultButton(event, 'ct100$bodyplaceholder$newbutton1')";

如果设置正确，则在您的页面中...如果第二个参数与您的按钮不正确匹配，它将无法正确触发。这可能有几个原因：

  1. 您是在渲染阶段渲染客户端/唯一 ID 还是调用 AddAttributesToRender。需要 ClientID 属性，因为它是将客户端元素链接到功能的方式，并且必须将其呈现给 id 属性。这发生在 AddAttributesToRender 方法中。
  2. 如果在该 JS 方法中，您看到 null，则它无法获取客户端 ID，通常是因为该属性被覆盖。

HTH。

于 2010-01-25T16:40:39.343 回答
1

WebForm_FireDefaultButton 函数的工作方式是它明确地在相关元素上查找 click() 事件。请注意，我指的是调用 element.click() 的能力，而不是 OnClick 属性。浏览器会为某些元素自动链接它，但不是链接，这是您的控件呈现的方式。如果您使用 LinkBut​​ton，您会注意到相同的行为。有几种不同的方法可以解决这个问题。您可以覆盖 WebForm_FireDefaultButton javascript 函数，如本文所示：

页面上的链接按钮并将其设置为默认按钮，在 IE 中可以正常工作，但在 Mozila 中不能

或者你可以在你的控件中添加一些代码来正确连接客户端点击功能，也许是这样的......虽然这不是我的想法：

protected override void OnPreRender(EventArgs e)
{
    string clickString = string.Format("document.getElementById('{0}').click = function() {{ {1} }};", this.ClientID, Page.ClientScript.GetPostBackEventReference(this, "Click"));

    Page.ClientScript.RegisterStartupScript(this.GetType(), "click_hookup_" + this.ClientID, clickString, true);
}
于 2010-01-25T17:31:16.777 回答