Implementing ICallbackEventHandler in .Net 2.0 Custom Control.
In this article I depict the use of ICallbackEventHandler with an example that shows random text generated from the server side code. For this purpose I have created a custom control named Show Tip.
How Show Tip control works.
Show Tip control renders the HTML button. Clicking this button initiates AJAX call to the server. The server processes the AJAX call raised from the client browser and returns the result. Lastly a JavaScript registered on the client browser displays the result in a DIV tag. The main motive behind this is to avoid the full page post backs. Show tip Button directly communicates with the server using "Sneaky Post back".
How callbacks also known as "Sneaky Post back" actually work.
The main magic lies in the ICallbackEventHandler interface.By implementing this interface and some lit bit of code one can easily trap the events raised from Client Browser, on the server and can respond to such events.
Steps to use ICallbackEventHandler .
Step 1)Render the JavaScript on Client Browser that will initiate the AJAX call.
To create the JavaScript that initiates the AJAX call use Page.ClientScript.GetCallbackEventReference() method.
This method returns a string
WebForm_DoCallback('ShowTip1',null,showResult,null,showError,false).
This is the JavaScript function that is used to callback to the server.
The parameters used for GetCallbackEventReference() method are listed below.
1) control - the control that initiates the AJAX call.
2) argument - the argument that is send to the server. In this example it is null as we are not passing any value back to server. But you can pass any value Example if you want to display price for the selected item from combo.
3) clientCallback - the name of the JavaScript function that executes after the result is returned from the server.
4) context - the argument that is passed back to the clientCallback() and clientErrorCallback() methods after the AJAX call completes . In this example it is null as we are not passing any value to client browser.
5) clientErrorCallback - the name of the JavaScript function that executes on client browser if an error on the server occues during AJAX callback.
6) useAsync - pass false to perform the AJAX call asynchronously.
Step 2)Implement the methods of ICallbackEventHandler to handle the AJAX call.
ICallbackEventHandler has two methods that need to be implemented on the server side.
1) RaiseCallbackEvent - This method is called first on server by AJAX call from the client.
2) GetCallbackResult - This method Returns the result of the AJAX call to the client.
Step 3)Render the JavaScript on Client Browser that manipulates the result received from the server. To render the JavaScript on Client Browser use Page.ClientScript.RegisterClientScriptInclude("ShowTip", Page.ResolveClientUrl("~/ClientScripts/ShowTip.js")) method.
The parameters used for RegisterClientScriptInclude() method are listed below.
1) key - any string that represents the script instance name.
2) url - the path of the JavaScript file to register on the client browser that is called when results are returned from the server.
To download the entire example Click Here
ASP .Net 2.0 bundles some controls like Grid View, Tree View and Details View that use AJAX callbacks to perform some special tasks like
Grid View uses callback to perform AJAX based paging and sorting.
Tree View uses callback to perform AJAX based expansion of nodes.
Details View uses callback to perform AJAX based paging.
You will have to enable some property to do so. I leave this small exercise to the readers.
In this article I depict the use of ICallbackEventHandler with an example that shows random text generated from the server side code. For this purpose I have created a custom control named Show Tip.
How Show Tip control works.
Show Tip control renders the HTML button. Clicking this button initiates AJAX call to the server. The server processes the AJAX call raised from the client browser and returns the result. Lastly a JavaScript registered on the client browser displays the result in a DIV tag. The main motive behind this is to avoid the full page post backs. Show tip Button directly communicates with the server using "Sneaky Post back".
How callbacks also known as "Sneaky Post back" actually work.
The main magic lies in the ICallbackEventHandler interface.By implementing this interface and some lit bit of code one can easily trap the events raised from Client Browser, on the server and can respond to such events.
Steps to use ICallbackEventHandler .
Step 1)Render the JavaScript on Client Browser that will initiate the AJAX call.
To create the JavaScript that initiates the AJAX call use Page.ClientScript.GetCallbackEventReference() method.
This method returns a string
WebForm_DoCallback('ShowTip1',null,showResult,null,showError,false).
This is the JavaScript function that is used to callback to the server.
The parameters used for GetCallbackEventReference() method are listed below.
1) control - the control that initiates the AJAX call.
2) argument - the argument that is send to the server. In this example it is null as we are not passing any value back to server. But you can pass any value Example if you want to display price for the selected item from combo.
3) clientCallback - the name of the JavaScript function that executes after the result is returned from the server.
4) context - the argument that is passed back to the clientCallback() and clientErrorCallback() methods after the AJAX call completes . In this example it is null as we are not passing any value to client browser.
5) clientErrorCallback - the name of the JavaScript function that executes on client browser if an error on the server occues during AJAX callback.
6) useAsync - pass false to perform the AJAX call asynchronously.
Step 2)Implement the methods of ICallbackEventHandler to handle the AJAX call.
ICallbackEventHandler has two methods that need to be implemented on the server side.
1) RaiseCallbackEvent - This method is called first on server by AJAX call from the client.
2) GetCallbackResult - This method Returns the result of the AJAX call to the client.
Step 3)Render the JavaScript on Client Browser that manipulates the result received from the server. To render the JavaScript on Client Browser use Page.ClientScript.RegisterClientScriptInclude("ShowTip", Page.ResolveClientUrl("~/ClientScripts/ShowTip.js")) method.
The parameters used for RegisterClientScriptInclude() method are listed below.
1) key - any string that represents the script instance name.
2) url - the path of the JavaScript file to register on the client browser that is called when results are returned from the server.
To download the entire example Click Here
ASP .Net 2.0 bundles some controls like Grid View, Tree View and Details View that use AJAX callbacks to perform some special tasks like
Grid View uses callback to perform AJAX based paging and sorting.
Tree View uses callback to perform AJAX based expansion of nodes.
Details View uses callback to perform AJAX based paging.
You will have to enable some property to do so. I leave this small exercise to the readers.
No comments:
Post a Comment