title: ASP.NET Server Control client-side event handling
body: <p>I have a question regarding ASP.NET server controls with client functionalities. I want to improve the client-side event handling: when a child client-control fires an event, I want the parent client-control to be directly notified.</p>
  
  <p>Let's assume we have two server controls, MyWindow and MyTextBox. Both are client-side objects of type "Sys.UI.Control".</p>
  
  <p>The MyTextBox is a child of MyWindow:</p>
  
  <pre><code>public class MyWindow : Control, IScriptControl
  {
     private MyTextBox _mtb;
     //....
     protected override void CreateChildControls()
     {
         _mtb = new MyTextBox();
         _mtb.ID = "MTB";
         _mtb.OnClientTextChanged = "OnClientTextChanged";
         Controls.Add(_mtb);
     }
  
     //...
     public IEnumerable&lt;ScriptDescriptor&gt; GetScriptDescriptors()
    {
       ScriptControlDescriptor descriptor = new ScriptControlDescriptor("Test.MyWindow", ClientID);
       descriptor.AddComponent("myTextBox", _mtb.ClientID);
       yield return descriptor;
    }
  </code></pre>
  
  <p>client-side:</p>
  
  <pre><code>  function OnClientTextChanged(sender, args) {
        alert('test')
    }
  </code></pre>
  
  <p>Now, whenever the text of the textbox changes, the client-event is fired and calls the function "OnClientTextChanged".</p>
  
  <p>What I want is to notify the client object of "MyWindow". I could do that this way:</p>
  
  <pre><code>  function OnClientTextChanged(sender, args) {
        $find("MyWindow").textBoxChangedItsText();
    }
  </code></pre>
  
  <p>But how can I notify the client object of MyWindow directly without using this global javascript function? What I tested was</p>
  
  <pre><code>_mtb.OnClientTextChanged = string.Format("($find('{0}')).textBoxChangedItsText", ClientID);
  </code></pre>
  
  <p>but I the "textBoxChangedItsText" function inside the client object can not access the object itself - "this" is the function itself but not the object which I would find using "$find("MyWindow")"</p>
  
  <p>I hope the question is clear to persons with knowledge in client-side enabled AJAX server side controls.</p>
  
  <p>Thanks!</p>
  
  <p>Edit: Using this event hander on the client-side works:</p>
  
  <p>server-side:</p>
  
  <pre><code> _mtb.OnClientTextChanged = string.Format(" ($find('{0}')).textBoxChangedItsTextDelegate", ClientID);
  </code></pre>
  
  <p>client-side:</p>
  
  <pre><code>Test.MyWindow = function (element) {
     Test.MyWindow.initializeBase(this, [element]);
     this.textBoxChangedItsTextDelegate= Function.createDelegate(this, function (sender, e) {
        this.textBoxChangedItsText();
     });
  };
  
  Test.MyWindow.prototype = {
     initialize: function () {
        Test.MyWindow.callBaseMethod(this, 'initialize');
     },
     textBoxChangedItsText: function () {
        alert(this.get_id());
     },
     dispose: function () {
        Test.MyWindow.callBaseMethod(this, 'dispose');
     }
  };
  </code></pre>
  
  <p>What I still don't like is the attaching to the event server-side with the $find in the event handler: _mtb.OnClientTextChanged = string.Format(" ($find('{0}')).textBoxChangedItsTextDelegate", ClientID);</p>