StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POASP.NET Server Control client-side event handling
text
Body
copied!<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<ScriptDescriptor> 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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload