Wrapping ASP.NET Client Callbacks

News

Tweets by @RJPeres75

Navigation

My Friends

My Links

Permanent Posts

Portuguese Communities

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

  

    #region Public properties and events

    public event EventHandler<CallbackEventArgs> Callback;

  

    [DefaultValue(true)]

    public Boolean Async

    {

        get;

        set;

    }

  

    [DefaultValue(false)]

    public Boolean SendAllData

    {

        get;

        set;

    }

  

    #endregion

  

    #region Protected override methods

  

    protected override void Render(HtmlTextWriter writer)

    {

        writer.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID);

        writer.RenderBeginTag(HtmlTextWriterTag.Span);

  

        base.Render(writer);

  

        writer.RenderEndTag();

    }

  

    protected override void OnInit(EventArgs e)

    {

        String reference = this.Page.ClientScript.GetCallbackEventReference(this, "arg", "onCallbackSuccess", "context", "onCallbackError", this.Async);

        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");

  

        this.Page.ClientScript.RegisterStartupScript(this.GetType(), String.Concat("callback", this.ClientID), script, true);

  

        base.OnInit(e);

    }

  

    #endregion

  

    #region Protected virtual methods

    protected virtual void OnCallback(CallbackEventArgs args)

    {

        EventHandler<CallbackEventArgs> handler = this.Callback;

  

        if (handler != null)

        {

            handler(this, args);

        }

    }

  

    #endregion

  

    #region ICallbackEventHandler Members

  

    String ICallbackEventHandler.GetCallbackResult()

    {

        CallbackEventArgs args = new CallbackEventArgs(this.Context.Items["Data"] as String);

  

        this.OnCallback(args);

  

        return (args.Result);

    }

  

    void ICallbackEventHandler.RaiseCallbackEvent(String eventArgument)

    {

        this.Context.Items["Data"] = eventArgument;

    }

  

    #endregion

}

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.

Development With A Dot

Recent Posts

Sponsors

Tags