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

Question

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

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

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

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

но это работает, только если JS находится в файле aspx. Как заставить это работать для пользовательского контроля. Какие все шаги мне нужно выполнить, чтобы заставить работать ID на внешнем 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

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

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

Answer 2

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

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

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

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

В вашем JavaScript

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

РЕДАКТИРОВАТЬ Исправлена ​​опечатка в JavaScript.