Click here to Skip to main content
13,797,304 members
Click here to Skip to main content
Add your own
alternative version


105 bookmarked
Posted 19 Dec 2008
Licenced CPOL

ClientCallback custom control for web applications

, 19 Dec 2008
Rate this:
Please Sign up or sign in to vote.
A client callback custom control and how to use it in WebForms.



There are scenarios where we have a list of items on one side of a page (the list can be ordered or hierarchical) and on selection of an item from this list, all the details related to it is shown on the other half of the page. All this without a postback or a flicker would give a smooth and good feel to the user.

For example, we have a finance related Web application. We need to see the details related to a stock script in our portfolio (a number of scripts are listed on the same page). The moment a script is selected, all the details and the current status of the script is shown on the same page without any postback or flicker.

Out here, the above described scenario was achieved using the Client Callback feature introduced in ASP.NET 2.0. I found that a good amount of code related to this feature can be embedded inside a custom control such that it is easy to use. Moreover, if we use callback a number of times on a page, it would reduce lots of code. So, I tried to develop a "user friendly" custom control to use the Client Callback feature.


In my current project, we had a scenario where different manufacturing parts were categorized (because of the hierarchical structure in the categorization, we decided to go with a tree view control). On selection of any one part (node), we were supposed to show the status and the data related to it in a grid placed on the same page. Performance was one of the major demands from the client. So, based on the needs, we decided to go with the Client Callback feature. The sample is based on this experience of mine.

Using the code

First, the important code parts of the custom control:

Apart from inheriting the control from WebControl, we also inherit it from ICallbackEventHandler.

public class MyCustomCallBackControl : WebControl, ICallbackEventHandler {}

The OnInit() method of the control is overridden. The callback scripts related to the control are embedded here.

// OnInit was overriden in order to attach a callback handler to the control
protected override void OnInit(EventArgs e)
     string callback = Page.ClientScript.GetCallbackEventReference(this, "input", 
                       string.Concat(ID, "OnSuccess"), "context");
                       ID, string.Concat("function ", ID, 
            "Callback(input, context) { ", callback, "; }"), true);
     //Above line - Script added during runtime:
     //function MyCustomCallBackControl1Callback(input, context) 
     //    WebForm_DoCallback('MyCustomCallBackControl1',
     //          input,MyCustomCallBackControl1OnSuccess,context,null,false);      

     //General meaning of it:
     // WebForm_DoCallback(eventTarget, eventArgument, eventCallback, 
     //                    context, errorCallback, useAsync)

We will need to write the GetCallBackResult and RaiseCallBackEvent methods related to implement the ICallbackEventHandler interface.

// Event handler for code logic at server side on client-callback
// Event bubbling done here 
public event EventHandler MyCallBackEvent;
public void RaiseCallbackEvent(string eventArgument)
      argumentParameter = eventArgument;
      if (MyCallBackEvent != null)
          MyCallBackEvent(this, EventArgs.Empty);

public string GetCallbackResult()
      //Returns back the output set during the callback
      return renderedOutput;

The Client Callback custom control is now ready to use.

We will now work on how to use the control on our web page. We drag drop the control on the page, and define the code-behind handler for it, basically, the server code that will run when the callback control is called.

// Bubbled event for Callback control placed
// One can handle the operations required during the callback out here.
protected void CallBackControl_Perform(object sender, EventArgs e)
    DataTable dt = RetrieveDataTable(((
    gvTest.DataSource = dt;

    //Setting of the response output for callback
    using (System.IO.StringWriter sw = new System.IO.StringWriter())
        gvTest.RenderControl(new HtmlTextWriter(sw));
        ((MyCustomControls.MyCustomCallBackControl)sender).RenderedOutput = sw.ToString();

In our sample, we will bind the tree nodes to this callback control. This is done using JavaScript.

//Client Side callback event attached
tNode.NavigateUrl = "javascript:OnNodeClick('" + tNode.Value + "');";

We are just left with defining the JavaScript functions that are attached to the custom callback control. The functions will be bound in the OnNodeClick method defined above.

//Node Callback Click Event
function OnNodeClick(nodeID)
    // Method name to call has a fixed naming convention
    // CustomCallbackControl name + "Callback" 
        // Parameters to the function would be:
            // 1st : Input 
            // 2nd : Context                     
    MyCustomCallBackControl1Callback(nodeID, null); 

// Function name has a fixed naming convention
// CustomCallbackControl name + "OnSuccess"
function MyCustomCallBackControl1OnSuccess(responseText) 
    // Based on responseText, action taken on client side     
    document.getElementById("tdGridView").style.display = "block";
    document.getElementById("gvTest").outerHTML = responseText;   

We are finished with using the control now. The naming conventions for the JavaScript functions are defined, and need to be given accordingly.

Points of interest

Performance came out really good, that too with a simple and sleek UI. It was a good experience learning the comparisons and differences between using an UpdatePanel and a callback control.

Making it a custom control helped a lot. Even a beginner can use it without knowing much of what is happening inside it (it can be used multiple times on the same page). The control was easy to use and came out to be a good weapon in my Web stock! :)


  • 19th December, 2008: Initial post.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sandeep Mewara
Software Developer (Senior)
India India
Current location: Bangalore, India.

Comments and Discussions

GeneralUpdatePanel Pin
gstolarov31-Dec-08 14:17
membergstolarov31-Dec-08 14:17 
AnswerRe: UpdatePanel Pin
Sandeep Mewara4-Jan-09 21:49
mentorSandeep Mewara4-Jan-09 21:49 
GeneralRe: UpdatePanel Pin
gstolarov5-Jan-09 4:53
membergstolarov5-Jan-09 4:53 
AnswerRe: UpdatePanel Pin
Sandeep Mewara5-Jan-09 9:52
mentorSandeep Mewara5-Jan-09 9:52 
GeneralExcellent article! Pin
Stuart_Mic24-Dec-08 20:56
memberStuart_Mic24-Dec-08 20:56 
GeneralRe: Excellent article! Pin
Sandeep Mewara29-Dec-08 18:26
mentorSandeep Mewara29-Dec-08 18:26 
GeneralToo good... Pin
Tim Hammer24-Dec-08 11:07
memberTim Hammer24-Dec-08 11:07 
GeneralRe: Too good... Pin
Sandeep Mewara29-Dec-08 18:25
mentorSandeep Mewara29-Dec-08 18:25 
Thanks Tim!
GeneralReally nice one! Pin
chkumar19-Dec-08 21:34
memberchkumar19-Dec-08 21:34 
GeneralRe: Really nice one! Pin
Sandeep Mewara21-Dec-08 19:10
mentorSandeep Mewara21-Dec-08 19:10 
GeneralAnother good job Pin
Abhijit Jana19-Dec-08 3:47
mentorAbhijit Jana19-Dec-08 3:47 
GeneralRe: Another good job Pin
Sandeep Mewara21-Dec-08 19:10
mentorSandeep Mewara21-Dec-08 19:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.181207.3 | Last Updated 19 Dec 2008
Article Copyright 2008 by Sandeep Mewara
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid