ASP.NET 2.0 introduced a cool new feature, called client callbacks. Client callbacks make calling serverside code from the client side easy. Read more about it here.
To use client callback, System.Web.UI.ICallbackEventHandler interface should be implemented. The interface could be implemented by any control, but in my example I'll implement it on the page level. This interface has one method that should be implemented for the callback to work, it's the RaiseCallbackEvent method. This method accepts one argument, a string from the client, and returns back a string to the client. On the client, a function should be written that accepts this string and update the UI accordingly.
Updating the UI with client side code requires more work than doing it on the server side (at least for me). So lets say I want to display a grid of data using client callbacks, there are 2 ways of doing it. Either get the data from the server side and generate the table that will be used to display this data on the client side, or generate every thing (html + data) on the server and send it back to the client. So all what your client code has to do is just display the returned html. I would definitely go for the second option.
On the server side, I can make use of the already available server controls to generate the required html for me. Here's the code that grabs the html rendered by a GridView after binding it to a datasource.
SqlDataSource ds = new SqlDataSource();
ds.ConnectionString = "Data Source=local;Initial Catalog=Northwind;Integrated Security=True";
ds.SelectCommand = "select * from [Order Details] where OrderID=10248" + eventArgument;
GridView gv = new GridView();
gv.DataSource = ds;
gv.DataBind();
StringWriter sw = new StringWriter();
HtmlTextWriter hw = new HtmlTextWriter(sw);
gv.RenderControl(hw);
Now I can get the html rendered by the GridView by simply using sw.ToString(). I can use the above code in my RaiseCallbackEvent method to return the grabbed html back to the client side function. In the client side function all I have to do is just display the returned html.
Here's a complete example that gets the order details for the supplied order ID from the NorthWind database.
Default.aspx
<html>
<head runat="server">
<title>Callback example</title>
</head>
<script language="javascript">
function update(result, context)
{
document.getElementById("Label1").innerHTML =result;
}
</script>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input id="btn" type="button" value="button" runat="server" />
<br />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label">asp:Label>
</form>
</body>
</html>
Default.aspx.cs
public partial class _Default : System.Web.UI.Page,ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
string callbackref = this.ClientScript.GetCallbackEventReference(this, "document.all['TextBox1'].value", "update", "null");
btn.Attributes["onclick"] = String.Format("BLOCKED SCRIPT{0}", callbackref);
}
#region ICallbackEventHandler Members
public string RaiseCallbackEvent(string eventArgument)
{
SqlDataSource ds = new SqlDataSource();
ds.ConnectionString = "Data Source=local;Initial Catalog=Northwind;Integrated Security=True";
ds.SelectCommand = "select * from [Order Details] where OrderID=" + eventArgument;
GridView gv = new GridView();
gv.DataSource = ds;
gv.DataBind();
StringWriter sw = new StringWriter();
HtmlTextWriter hw = new HtmlTextWriter(sw);
gv.RenderControl(hw);
return sw.ToString();
}
#endregion
}
Happy programming...