Implementing Callback Methods on Custom or User Controls

One powerful feature of the AjaxMethodCallback control is the ability to call back to any control on a Page which means you can implement [CallbackMethod]s in your own user or custom controls. This makes it real easy to create reusable components that can interact with an AJAX client without having to separate the logic into a separate service or handler.

To hook AjaxMethodCallback to a user or custom control:

  • Create your control as usual
  • Add the appropriate [CallbackMethod] handlers into your control's code
  • Dynamically add the AjaxMethodCallback control using
  • Set the control's TargetControlId to your control's ID

Start by creating your control as usual and implement whatever features the control will have. The add your Callback methods that you want to expose to client callbacks and mark them up with [CallbackMethod] attribute as usual. Then add the OnInit() code to add the AjaxMethodCallback control that will handle these callback methods:

    public class CustomControlUsingAjaxCallbacks : Control
    {
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);

            AjaxMethodCallback callback = AjaxMethodCallback.CreateControlInstanceOnPage(this);

            // You can assign a custom id here which will reflect the generated proxy's name
            //callback.ID = "MyControl_Proxy";
        }

        protected override void Render(HtmlTextWriter writer)
        {
            base.Render(writer);
            writer.Write("<div class='errordisplay'>dummy control placeholder</div>");
        }

        [CallbackMethod]
        public string Add(int val1, int val2)
        {
            return val1 + val2;
        }
    }

That's all it takes on the server. The control takes care of the rest.

Calling the Server Method from the Client

On the client the process of calling the server callback then works as usual. You can use the proxy generated directly or manually create an instance of <yourControlId>_Callback_GetProxy() to create a new instance and call callMethod on it.

Using a Proxy:

function add() {
	MyControl_Callback.Add(parseInt($("#txtVal1").val()),parseInt($("#txtVal2").val())
			function(result) { alert(result); },
			function(error) { alert("Error: " + error.message); } );
}

You can also manually use xxx_xxx_GetProxy() if you decide you don't want to generate a proxy into the page (use GenerateClientProxy=false on the server control):

function add() {
	var myProxy = MyControl_Callback_GetProxy();
	myProxy.callMethod("Add",
			[ parseInt($("#txtVal1").val()), parseInt($("#txtVal2").val()) ]
			function(result) { alert(result); },
			function(error) { alert("Error: " + error.message); } );
}

To create an instance of the proxy that contains the properties configured by the server control you can use the <yourControlId>_Callback_GetProxy() method. This method is generated into the current HTML page so it'll be available to any script code in the same page or external .js files.

Then use the proxy instance and the callMethod() method to actually call the server. Pass the name of the method to call, along with the parameter in the proper type (int here) and an optional

This mechanism works both with custom and user controls using code.

Markup Instance in a User Control

For user controls you can also drop the AjaxMethodCallback control directly into the user control markup and the behavior is just like on a page. One difference is that you have to set the TargetInstance and point at the current user control preferrably in OnInit() (assuming MyCallbackProxy as control name) :

this.MyCallbackProxy.TargetInstance = this;

AjaxMethodCallback in the Page Cycle

It's important to understand how AjaxMethodCallback hooks into the page cycle. The callback occurs as part of OnLoad() processing of the page. This means that controls on the page will be loaded with data - anything up to Page.Load() will run before the Callback occurs.

Once AjaxMethodCallback enters into a callback the request will be ended after execution is complete or fails. The callback request is ended with Response.End().


© West Wind Technologies, 1996-2016 • Updated: 04/10/13
Comment or report problem with topic