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) {
MyTreeView.DataBind();
}
</script>
<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 />
</asp:TreeView>
</sample:RefreshPanel>
<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 http://www.gotdotnet.com/workspaces/workspace.aspx?id=cb2543cb-12ec-4ea1-883f-757ff2de19e8
Back to the first part:
http://weblogs.asp.net/bleroy/archive/2005/04/08/397761.aspx
Forward to the third part:
http://weblogs.asp.net/bleroy/archive/2005/05/19/407539.aspx
And the fourth:
http://weblogs.asp.net/bleroy/archive/2005/06/27/415936.aspx