Implementing Client Callbacks Programmatically without Postback

Introduction:

If you want to bind data from updatable Data Source in GridView or other Data Control you have to refresh (post back) the Web Page or the user have to fire event which refresh the GridView by clicking or selecting from Drop menu..Etc

Example:  

You have 2 Dropdown List: the first one shows Countries and the second shows every selected County Cities, we have to use AutoPostBack for the first Dropdown List to Post Back the Page with every Select by User to shows the Cities as we see. You have to know that PoskBack reduce the performance of the page and the page and its controls are re-created.                                

The Problem: 

By using Post back:

• The page code runs on the server, and a new version of the page is rendered to the browser.
• Post back introduce processing overhead that can decrease performance.
• If the client script in the page is maintaining some state information (local variable values), posting the page and getting a new copy of it destroys that state. 

The popular Solution:

Use AJAX Update Panel to post back only the control inside Update Panel:

Update Panel Advantages:

• Partial-Page Rendering.
• Partial-page updates support.
• Remove the requirement to refresh the whole page with each post back, which improves the user experience.

Using Update Panel:

• Drag /Drop Script Manager on your web page.
• Drag / Drop Update Panel.
• Drag / Drop GridView Data Control inside the Update Panel.

The Problem with using this popular Solution:

• The web page size is over optimum size, when using ScriptManager.
• The Update Panel store huge view state size for it and its content.

The Best Solution is:

"Implementing Client Callbacks Programmatically without Post Back"

Examples of client callbacks:

Several Web server controls use client callbacks. For example, the Tree View control uses client callbacks to implement it’s populate on demand functionality.

Get started: Follow me:

1-    Implement the ICallbackEventHandlerinterface:

public partial class _Default : System.Web.UI.Page,ICallbackEventHandler 

{ 

This interface provide the following 2 methods:   

• Aspx.cs Code:
  • RaiseCallbackEvent method:  This method will be invoked to perform the callback on the server.
  • GetCallbackResult method: This method will return the callback result to the client.

 

    private string _callbackArg;

 

    void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)

    {

        _callbackArg = eventArgument;

    }

 

    string ICallbackEventHandler.GetCallbackResult()

    {

        return RaiseCallbackEvent(_callbackArg);

    }

 

 

• Aspx.cs Client Side Code:
  • Page.ClientScript.GetCallbackEventReference: the helper function that performs the actual request to the server, which is generated automatically by ASP.
• Aspx Client Side code (client callback function):
  • This  function receives the result from the server code that processed the callback event, accepting a string that represents the results:

    <script type="text/javascript">

    function RateContent(result, context)

    {

        document.getElementById('Result').innerHTML = result;

    }

    </script>