Wrapping ASP.NET Client Callbacks
Client Callbacks are probably the less known (and I dare say, less loved) of all the AJAX options in ASP.NET, which also include the UpdatePanel, Page Methods and Web Services. The reason for that, I believe, is it’s relative complexity:
-
Get a reference to a JavaScript function;
-
Dynamically register function that calls the above reference;
-
Have a JavaScript handler call the registered function.
However, it has some the nice advantage of being self-contained, that is, doesn’t need additional files, such as web services, JavaScript libraries, etc, or static methods declared on a page, or any kind of attributes.
So, here’s what I want to do:
-
Have a DOM element which exposes a method that is executed server side, passing it a string and returning a string;
-
Have a server-side event that handles the client-side call;
-
Have two client-side user-supplied callback functions for handling the success and error results.
I’m going to develop a custom control without user interface that does the registration of the client JavaScript method as well as a server-side event that can be hooked by some handler on a page. My markup will look like this:
1: <script type="text/javascript">
1:
2:
3: function onCallbackSuccess(result, context)
4: {
5: }
6:
7: function onCallbackError(error, context)
8: {
9: }
10:
</script>
2: <my:CallbackControl runat="server" ID="callback" SendAllData="true" OnCallback="OnCallback"/>
The control itself looks like this:
1: public class CallbackControl : Control, ICallbackEventHandler
2: {
3: #region Public constructor
4: public CallbackControl()
5: {
6: this.SendAllData = false;
7: this.Async = true;
8: }
9: #endregion
10:
11: #region Public properties and events
12: public event EventHandler<CallbackEventArgs> Callback;
13:
14: [DefaultValue(true)]
15: public Boolean Async
16: {
17: get;
18: set;
19: }
20:
21: [DefaultValue(false)]
22: public Boolean SendAllData
23: {
24: get;
25: set;
26: }
27:
28: #endregion
29:
30: #region Protected override methods
31:
32: protected override void Render(HtmlTextWriter writer)
33: {
34: writer.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID);
35: writer.RenderBeginTag(HtmlTextWriterTag.Span);
36:
37: base.Render(writer);
38:
39: writer.RenderEndTag();
40: }
41:
42: protected override void OnInit(EventArgs e)
43: {
44: String reference = this.Page.ClientScript.GetCallbackEventReference(this, "arg", "onCallbackSuccess", "context", "onCallbackError", this.Async);
45: String script = String.Concat("\ndocument.getElementById('", this.ClientID, "').callback = function(arg, context, onCallbackSuccess, onCallbackError){", ((this.SendAllData == true) ? "__theFormPostCollection.length = 0; __theFormPostData = ''; WebForm_InitCallback(); " : String.Empty), reference, ";};\n");
46:
47: this.Page.ClientScript.RegisterStartupScript(this.GetType(), String.Concat("callback", this.ClientID), script, true);
48:
49: base.OnInit(e);
50: }
51:
52: #endregion
53:
54: #region Protected virtual methods
55: protected virtual void OnCallback(CallbackEventArgs args)
56: {
57: EventHandler<CallbackEventArgs> handler = this.Callback;
58:
59: if (handler != null)
60: {
61: handler(this, args);
62: }
63: }
64:
65: #endregion
66:
67: #region ICallbackEventHandler Members
68:
69: String ICallbackEventHandler.GetCallbackResult()
70: {
71: CallbackEventArgs args = new CallbackEventArgs(this.Context.Items["Data"] as String);
72:
73: this.OnCallback(args);
74:
75: return (args.Result);
76: }
77:
78: void ICallbackEventHandler.RaiseCallbackEvent(String eventArgument)
79: {
80: this.Context.Items["Data"] = eventArgument;
81: }
82:
83: #endregion
84: }
And the event argument class:
1: [Serializable]
2: public class CallbackEventArgs : EventArgs
3: {
4: public CallbackEventArgs(String argument)
5: {
6: this.Argument = argument;
7: this.Result = String.Empty;
8: }
9:
10: public String Argument
11: {
12: get;
13: private set;
14: }
15:
16: public String Result
17: {
18: get;
19: set;
20: }
21: }
You will notice two properties on the CallbackControl:
-
Async: indicates if the call should be made asynchronously or synchronously (the default);
-
SendAllData: indicates if the callback call will include the view and control state of all of the controls on the page, so that, on the server side, they will have their properties set when the Callback event is fired.
The CallbackEventArgs class exposes two properties:
-
Argument: the read-only argument passed to the client-side function;
-
Result: the result to return to the client-side callback function, set from the Callback event handler.
An example of an handler for the Callback event would be:
1: protected void OnCallback(Object sender, CallbackEventArgs e)
2: {
3: e.Result = String.Join(String.Empty, e.Argument.Reverse());
4: }
Finally, in order to fire the Callback event from the client, you only need this:
1: <input type="text" id="input"/>
2: <input type="button" value="Get Result" onclick="document.getElementById('callback').callback(callback(document.getElementById('input').value, 'context', onCallbackSuccess, onCallbackError))"/>
The syntax of the callback function is:
-
arg: some string argument;
-
context: some context that will be passed to the callback functions (success or failure);
-
callbackSuccessFunction: some function that will be called when the callback succeeds;
-
callbackFailureFunction: some function that will be called if the callback fails for some reason.
Give it a try and see if it helps! 