Wednesday, June 01, 2005
Script Callback in ASP.NET 2.0
A lot has been said and done about updating part of an ASP.NET page without posting the entire page back to the server. The concept is rather not new, there have been many implementations in the past e.g. using Remote Scripting, Web Services, Java applets and lately in ASP.NET 1.1 using AJAX or (Asynchronous Javascript and XML), which relied on XMLHTTP. But fortunately ASP.NET 2.0 natively supports Out-of-band calls; in fact many of ASP.NET 2.0’s new controls like GridView and Treeview use script callbacks extensively. There is an API available in .NET Framework 2.0 to implement Script Callback in your own controls.
In my example below, I select an "Employee Name" from a HTML Select control and press the send button where I have attached a Javascript code, the page does a callback to a server-side script, where the server-side script hits the database, finds the required information, sends the information back to the client-side Javascript code, the Javascript code using browsers DHTML capabilities, populates the <div> control on the page with the "Department" of the Employee. That’s it! You get the information from the server without refreshing the entire page and re-rendering each control on the page.
In the code above, I bind a Javascript code to a button control that sends some information required for a callback such as the target object that handles the call, which is the same as the calling page (Me), value from the HTML Select control, the name of the client-side Javascript that receives the information sent by the server-side script and an optional error handler and context object.
The client-side script above receives the results and populates the <div> with the result sent from the server.
The server-side function accepts and returns a string, and contains all the server-side code to hit the database and retreive additional information. One caveat with the script callbacks is that the browsers should implement advanced DOM and has strong DHTML support, therefore the browser ideal for this scenario should belong to the uplevel family of browsers like Internet Explorer 5+, Netscape 6+, and Safari 1.2+.
Download the source code
In my example below, I select an "Employee Name" from a HTML Select control and press the send button where I have attached a Javascript code, the page does a callback to a server-side script, where the server-side script hits the database, finds the required information, sends the information back to the client-side Javascript code, the Javascript code using browsers DHTML capabilities, populates the <div> control on the page with the "Department" of the Employee. That’s it! You get the information from the server without refreshing the entire page and re-rendering each control on the page.
In the code above, I bind a Javascript code to a button control that sends some information required for a callback such as the target object that handles the call, which is the same as the calling page (Me), value from the HTML Select control, the name of the client-side Javascript that receives the information sent by the server-side script and an optional error handler and context object.The client-side script above receives the results and populates the <div> with the result sent from the server.
The server-side function accepts and returns a string, and contains all the server-side code to hit the database and retreive additional information. One caveat with the script callbacks is that the browsers should implement advanced DOM and has strong DHTML support, therefore the browser ideal for this scenario should belong to the uplevel family of browsers like Internet Explorer 5+, Netscape 6+, and Safari 1.2+.
Download the source code
# posted by Zubair.NET! @ 10:40 AM 
