I have an extender control that raises a textbox's OnTextChanged
event 500ms after the user has finished typing. The problem with this is that OnTextChanged
gets raised when the textbox loses focus, which causes problems (because of the postback).
What I'd like to do is give the extender control its own server-side event (say, OnDelayedSubmit
) so I can handle it separately. The event will originate in the extender control's behavior script (after the 500ms delay), so putting a __doPostBack
in onchanged
is not an option.
Can anyone shed light on how to go about this?
After plenty of reading up on extender controls and JavaScript, I've cobbled together a solution that seems to be working so far.
The main trick was getting the necessary postback code from server-side to the client-side behavior script. I did this by using an ExtenderControlProperty
(which is set in the control's OnPreRender
function), and then eval'd in the behavior script. The rest was basic event-handling stuff.
So now my extender control's .cs
file looks something like this:
public class DelayedSubmitExtender : ExtenderControlBase, IPostBackEventHandler
{
// This is where we'll give the behavior script the necessary code for the
// postback event
protected override void OnPreRender(EventArgs e)
{
string postback = Page.ClientScript.GetPostBackEventReference(this, "DelayedSubmit") + ";";
PostBackEvent = postback;
}
// This property matches up with a pair of get & set functions in the behavior script
[ExtenderControlProperty]
public string PostBackEvent
{
get
{
return GetPropertyValue<string>("PostBackEvent", "");
}
set
{
SetPropertyValue<string>("PostBackEvent", value);
}
}
// The event handling stuff
public event EventHandler Submit; // Our event
protected void OnSubmit(EventArgs e) // Called to raise the event
{
if (Submit != null)
{
Submit(this, e);
}
}
public void RaisePostBackEvent(string eventArgument) // From IPostBackEventHandler
{
if (eventArgument == "DelayedSubmit")
{
OnSubmit(new EventArgs());
}
}
}
And my behavior script looks something like this:
DelayedSubmitBehavior = function(element) {
DelayedSubmitBehavior.initializeBase(this, [element]);
this._postBackEvent = null; // Stores the script required for the postback
}
DelayedSubmitBehavior.prototype = {
// Delayed submit code removed for brevity, but normally this would be where
// initialize, dispose, and client-side event handlers would go
// This is the client-side part of the PostBackEvent property
get_PostBackEvent: function() {
return this._postBackEvent;
},
set_PostBackEvent: function(value) {
this._postBackEvent = value;
}
// This is the client-side event handler where the postback is initiated from
_onTimerTick: function(sender, eventArgs) {
// The following line evaluates the string var as javascript,
// which will cause the desired postback
eval(this._postBackEvent);
}
}
Now the server-side event can be handled the same way you'd handle an event on any other control.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With