A simpler AJAX implementation in ASP.NET

A week ago I wrote about the native client callback feature of ASP.NET 2.0 and why it isn’t always the smart choice. That post got me some good feedback that inspired me to build a custom callback implementation so you wouldn’t have to use the native one. I could just use other AJAX libraries such as ASP.NET AJAX or Ajax.NET, but that’s not fun.

When I started thinking about this little project I imagined it to be complex, but actually it turned out to be extremely simple with very little code. It is less than 100 lines of code including the JavaScript and code comments. Remember, that this is not an all-in-one AJAX framework, but a simple and fast way to do client callbacks.

Good things

• Uses GET instead of POST for performance reasons
• Doesn’t send the ViewState to eliminate the overhead
• Simple implementation

Limitations

Because it doesn’t send the ViewState you are not able to check the state of the controls on the page. You can use the Session and Cache and any other store, just not the ViewState. You cannot implement it on custom server controls, because it only works on pages.

Implementation

The solution consists of two things: a base class for the page and a small JavaScript file.

Step 1 - change inheritage

In the page you want to do client callbacks, just inherit from CallbackPage instead of System.Web.UI.Page and override the IncommingCallback(string argument, string context) method. Here is an example of such a page’s code-behind file.

public partial classdefault : CallbackPage
{
 protectedoverridevoid IncomingCallback(string argument, string context)
 {
  if (context == "verify")
  {
   if (argument == "william")
    base.SetCallbackResponse("true");
  }
 }
}

Step 2 - Insert JavaScript

Next, add the JavaScript file to the header of the HTML document or copy its content into your own script file.

<script type="text/javascript" src="scripts/callback.js"></script>

The JavaScript file contains one method that creates the callbacks and it is called CreateCallback. I'll show you how to use it below. That’s the entire implementation.

Example of use

Let’s imaging that we want a text box where the visitors write their name. When they click a button, it verifies the entered name server-side and sends the result to a JavaScript function.

Step 1 - Create JavaScript method

Let’s start by adding the JavaScript method to the page:

< script type ="text/javascript">

function NameVerifier(response)

{

  if (response == "true" )

    alert( "You are verified" );

  else

    alert( "You are not verified" );

}

</ script >

Step 2 - Call the method

< asp : TextBox runat ="server" ID ="txtName" />

< input

  type ="button"

  onclick ="CreateCallback(NameVerifier, document.getElementById(' <%=txtName.ClientID %> ').value, 'verify')"  
  value ="Create callback" />

Notice the onclick event of the button. It calls the CreateCallback(callback, argument, context) JavaScript method. The callback parameter is the name of the JavaScript method that should be called when the callback returns with the result. The argument parameter is the value that you want to send to the server-side IncomingCallback method. The context parameter also goes to the IncomingCallback method and it is used to separate the different callbacks you have on a page.

The SetCallbackResponse(string argument) server-side method sends the argument parameter back to the client – if it isn’t called, nothing is sent back.

Download

The zip file contains the base class and the JavaScript file.

CallbackPage.zip (1,17 KB)