外部js中的getelementbyid不适用于asp.net-customcontrol

Question

有一个带有按钮的自定义控件。有一个外部 javascript 文件尝试将一些事件附加到我的控件。就像 onclick 事件在运行时添加到按钮上一样。为此，我使用

var save = document.getElementById("btnExecute");  

从附加了 JS 文件的 aspx 页面调用此控件。该页面无法工作，我读到的文章说，如果我将代码更改为类似的内容，它就会工作

var save = document.getElementById("<%= btnExecute.ClientID %>");  

，但只有当 JS 位于 aspx 文件内时它才工作。如何使其适用于自定义控件。我需要遵循哪些步骤才能使外部 JS 上的 ID 正常工作？

尝试了Ajax81的解决方案： 添加代码

namespace MyCompositeControl
{
    public class MyGrid : CompositeControl
    {
        public string ButtonClientID
        {
            get { return btnExecute.ClientID; }
            set { }
        }

        protected override void CreateChildControls()
        {
            #region Execute Button
            btnExecute.ID = "btnExecute";
            btnExecute.Text = "Execute"; 
            btnExecute.Click += new EventHandler(_button_Click);
            Controls.Add(btnExecute);
            #endregion
    }
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            string jsResourceName = "MyCompositeControl.Scripts.ControlScriptLibrary.js";
            ClientScriptManager cs = this.Page.ClientScript;
            cs.RegisterClientScriptResource(typeof(this,GetType()), jsResourceName);
        }
}

该按钮是动态添加的，如上面的代码所示。

ControlScriptLibrary.js

  function attachEvents()
   {   
       //var save = document.getElementById("btnExecute");
       var save = document.getElementById("<%=MyGrid.ButtonClientID%>");
       if(save!=null)
       { 
        save.onclick = onSaveAction;
       }
   }

编辑：仍然返回 null。难道，JS先跑了，控件还没有到吗？但是，如果我像这样传递控件 id，则此方法有效：

function MyController(executeButtonID, onSaveEventHandler)
{
    function attachEvents()
    {   
        //var save = document.getElementById("btnExecute");
        var save = document.getElementById(executeButtonID);
        if(save!=null)
        { 
            save.onclick = onSaveAction;
        }
    }
}

在我的控件的 RenderContent 方法中，我有以下 javascript 代码：

var myController = new MyController(this.btnExecute.ClientID, onSaveEventHandler);

如果我在控件上有更多按钮并且需要在 JS 中进行一些事件处理，则此方法将会终止。 Ajax81 的解决方案很好，但它对我来说还不起作用。

Answer 1

在 .NET 中，当控件嵌套在表单中时，控件的名称也采用其父控件的名称。例如，在输出 HTML 时，名称为“ComboBox1”的对象可能最终会变成“ctl00_content_ctl00_ComboBox1”。如果您需要在浏览器运行时通过 id 引用按钮，那么您可以检查生成的 HTML 代码并查看按钮的最终名称是什么，然后在 JS 中使用它。但请注意，如果任何按钮父对象的名称发生更改，则按钮的名称也可能会更改。因此，这不是一个很好的解决方案，特别是当页面上可能有许多此类控件时。

有一些 JavaScript 框架（例如 jQuery 和 Prototype）提供了一些工具，可以让您更轻松地在 DOM 中查找对象并附加事件。

Answer 2

为自定义控件创建一个属性，该属性返回您需要在 JavaScript 中处理的按钮的客户端 ID。

您的代码最终看起来像这样：

在您的自定义控件的代码隐藏中：

public string SaveButtonID
{
   get { return SaveButton.ClientID }
   set {/*nothing*/;}
}

在您的 JavaScript

var save = document.getElementById('<%=MyCustomControl.SaveButtonID%>");

EDIT 中
修复了 JavaScript 中的拼写错误。