Fun with callbacks, Part 2: The RefreshPanel

ASP.NET 2.0 makes it easier to develop Web applications that do out-of band calls, as we saw in the previous post. But one thing I noticed is that most applications will really just want to refresh and update some part of the page without touching the rest of it. In this case, the second client-side script, the one that receives the results from the callback and updates the page is always the same, something like element.innerHTML = response;.

So I wrote this little control that inherits from Panel and just adds the necessary refresh features. What makes it different from the usual panel is that it of course implements ICallbackEventHandler so that it can handle callback events, but it also implements ICallbackContainer so that it is easy to get a client-side refresh event reference from it. ICallbackContainer only has one method, GetCallbackScript, which returns a callback script for a button control (this can be null) and a string event argument.

Here's a very simple example that uses the RefreshPanel to rebind a treeview without refreshing the rest of the page:

<script runat="server">
protected void OnTreeBind(object sender, TreeNodeEventArgs e) {
if (IsCallback) {
e.Node.Text += " Updated by callback";

public void ReBindTree(object sender, RefreshingEventArgs e) {

<asp:SiteMapDataSource runat="server" ID="xml" />
<sample:RefreshPanel runat="server" ID="MyPanel" OnRefreshing="ReBindTree">
<asp:TreeView runat="server" ID="MyTreeView" DataSourceID="xml" OnTreeNodeDatabound=OnTreeBind>
<SelectedNodeStyle BackColor=Blue Font-Bold=true ForeColor=White />
<sample:RefreshButton runat="server" Text="Refresh" id="RefreshButton" RefreshPanelID="MyPanel" />

Here, we only have an ordinary TreeView in a RefreshPanel. Just to show that something happened even if the underlying site map data has not changed, we handle TreeNodeDataBound on callbacks and add some text to each node.

The RefreshPanel has an OnRefreshing event that we handle to rebind the tree.

Finally, the RefreshButton is a control that goes hand in hand with the RefreshPanel. It derives from Button and has this additional RefreshPanelID property that enables you to point to the RefreshPanel that it's going to refresh when clicked.

Notice how we didn't write a single line of client-side code in this case because both RefreshPanel and RefreshButton already know exactly what to do.

Actually, we've only just scratched the surface of what you can do with these controls. In future posts, I'll explain how to build a ComboBox, a Chat room and other fun stuff with them. Stay tuned!

Update: The source code for this is at

Back to the first part:

Forward to the third part:

And the fourth:


  • Can you post the source for these controls?

  • Would be really interested in the chat room example. ay idea when it will be available?

  • I have created a webpart that switches between view, edit and create mode in AJAX.

    It uses several SharePoint server controls like PeopleSelector and DateTime.

    So, it is easier for me to just house the building of the controls on the server and push out the innerHTML to replace the parts innerHTML.

    However, the controls don't get properly wired when I do that. All of the events are not longer configured including Validation, Cascading DropdownList...

    Is there a way to rewire these events either on the client or on the server?

Comments have been disabled for this content.