getelementbyid во внешнем js не работает для asp.net-customcontrol

Question

есть пользовательский элемент управления с кнопкой. Существует внешний файл JavaScript, который пытается прикрепить некоторые события к моему элементу управления. Подобное событие onclick добавляется во время выполнения к кнопке. Для этого я использую

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

Этот элемент управления вызывается со страницы aspx, к которой я прикрепил файл JS. Страница не будет работать, я читаю статьи, которые будут работать, если я изменю код на что-то вроде

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

, но это работает, только если JS находится в файле aspx. Как заставить это работать для пользовательского контроля. Какие все шаги мне нужно выполнить, чтобы заставить работать идентификатор внешнего JS?

Пробное решение 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;
       }
   }

Отредактировано: все равно возвращается ноль. Может ли быть так, что JS запускается первым, а управления еще нет? Но это работает, если я передаю идентификатор управления следующим образом:

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

Создайте свойство для пользовательского элемента управления, которое возвращает идентификатор клиента кнопки, к которой вы должны обратиться в вашем JavaScript.

Ваш код будет выглядеть примерно так:

Внутри кода вашего пользовательского элемента управления:

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

В вашем JavaScript

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

EDIT Исправлена ​​опечатка в javascript.

Answer 2

В .NET, когда элементы управления вложены в форму, имена элементов управления также принимают имена их родителей.Например, объект с именем «ComboBox1» может закончиться как «ctl00_content_ctl00_ComboBox1» ко времени вывода HTML.Если вам нужно обратиться к кнопке по ее идентификатору во время выполнения браузера, то вы можете просмотреть сгенерированный HTML-код и посмотреть, каково окончательное имя кнопки, а затем использовать его в своем JS.Имейте в виду, что если имена любых родительских объектов кнопок изменятся, то имя кнопки может измениться.Таким образом, это не очень хорошее решение, особенно если у вас может быть много таких элементов управления на странице.

Существуют некоторые JavaScript-инфраструктуры, такие как jQuery и Prototype, которые предоставляют инструменты, позволяющие упростить поиск объектов в DOM и присоединение событий.