I recently needed a textbox that would fire a server event when the textbox’s onblur JavaScript event was fired. It took a while of googling and asking coworkers questions to figure out how exactly to do it. Couldn’t seem to find an example of exactly what I needed.
I started off by creating a class that inherited from textbox and implemented ICallBackEventHandler. I soon realized that this was not going to work for what I needed. The ICallBackEventHandler is best suited for a simple Ajax control that just needs to update its own content. Problem is that I need a post back to happen in order to update other controls on the page.
So instead of implementing the ICallBackEventHandler interface I implemented the IPostBackEventHanlder interface. This turned out to be a much simpler, cleaner way to do it.
When implementing the IPostBackEventHandler you must Implement the RaisePostBackEvent method:
public class BlurTextbox : TextBox, IPostBackEventHandler { #region Implementation of IPostBackEventHandler /// <summary> /// When implemented by a class, enables a server control to process an event raised when a form is posted to the server. /// </summary> /// <param name="eventArgument">A <see cref="T:System.String" /> that represents an optional event argument to be passed to the event handler. </param> public void RaisePostBackEvent(string eventArgument) { } #endregion }
This method is what gets called by .net’s JavaScript when your control does a post back.
Now what we want to do is create the JavaScript function that will cause the post back will allow the RaisePostBackEvent method to handle the logic for that event.
I just created a method on the textbox that returns the script. You can use the Page.ClientScript.GetPostBackEventReference(Control control, string argument) method but this is not necessary because all the it generates is __doPostBack(‘controlName’,'argument’), either way works.
If you want to be able to have multiple instances of the control on the same page you need to write it yourself, this is what I did:
private string GetScript() { return "function OnBlurred(control, arg)\n{\n __doPostBack(control, arg);\n}"; }
There are two parameters needed, the control and the argument, the control string that the asp.net JavaScript call is expecting will need the textbox’s UniqueID for it to work properly.
Next I created a server side event on the control called Blur:
public delegate void OnBlurDelegate(object sender, EventArgs e); public event OnBlurDelegate Blur; private void RaiseOnBlurEvent() { if(Blur != null) { Blur(this, EventArgs.Empty); } }
Now we can call the RaiseOnBlurEvent() method in the implemented RaisePostBackEvent() method like:
public void RaisePostBackEvent(string eventArgument) { RaiseOnBlurEvent(); }
Lastly I overrode the OnInit event, called the base. I check if that script is already registered, if it’s not I register it, otherwise move one. Then registered the OnBlurred script we created, and added the JavaScript onblur event attribute to the textbox. I pass in the UniqueID and empty quotes because I don’t need any arguments.
protected override void OnInit(EventArgs e) { base.OnInit(e); if (!Page.ClientScript.IsClientScriptBlockRegistered("OnBlurTextboxEvent")) Page.ClientScript.RegisterStartupScript(GetType(), "OnBlurTextboxEvent", GetScript(), true); Attributes.Add("onblur", "OnBlurred('" + UniqueID + "','')"); }
Now all that is left to do is use it on some web page and setup the server side handling.
Aspx:
<cc3:BlurTextbox ID="Test" runat="server" OnBlur="Test_OnBlur"></cc3:BlurTextbox>
Server Handling:
protected void Test_OnBlur(object sender, EventArgs e) { }
The whole thing is here.
