A Simple ASP.NET AJAX Control
A WebControl that handles client-server communications via AJAX.
Introduction
This article is intended for anyone who is looking for an easy-to-use AJAX web control.
Background
The actual control consist of two parts: a server-side WebControl which handles AJAX requests from the client, and on the other side, a client-side JavaScript object which handles the responses from the server.
Using the code
This control was intended to be as easy to use as it can be, and so it is.
Server-side code
//You have to create the AJAX control
//in the Page Load method and add it to the page
protected void Page_Load(object sender, EventArgs e)
{
AJAX aj = new AJAX("myAJAX" //Client ID
, "AJAXCallbackHandler", //Client callback handler fucntion
this.AJAXCommandEventHandler, //Command recieved event handler
this.AJAXErrorOccuredEventHandler); //Error occured event handler
/*Basically you can add the ajax control anywhere on the page, but
be sure not to forget it.*/
this.Controls.Add(aj);
}
//Method that will handle incoming requests from the client
private void AJAXCommandEventHandler(object sender, AJAXCommandEventArgs e)
{
/*AJAXCommandEventArgs has only two properties - request and response
If you want to send something to the client
you have to write it in the response property.*/
e.Response = "Response from the server";
}
//Method that will fire if some error occurs in AJAX control
private void AJAXErrorOccuredEventHandler(object sender, AJAXErrorEventArgs e)
{
/*You may for example write the error message to the response.
AJAXErrorEventArgs has only Message property.*/
Response.Close();
Response.Write("Error occured in AJAX control - message: " + e.Message);
Response.End();
}
When the page loads, the server control will generate a JavaScript into the head section of the page. This script contains the object that you can use to send requests to the server.
Client-side code
<script type="text/javascript">
function SendToServer(message)
{
/*You can access the javascript object with
ID that you specified, when creating the control on
the server.*/
//You can send requests to server with SendCommand method
myAJAX.SendCommand("message");
/*Optionally you can set timeout paramater
in miliseconds - so when the callback
lasts more than timeout it will return with 'Message timeout'*/
myAJAX.SendCommand("message", 10000);//wait for responce for 10s
}
/*Function that will handle response from the server
It has to be named as you specified it when creating
the control the server.
It takes only one parameter - response object. That consists of
Request and Response fields*/
function AJAXCallbackHandler(resp)
{
alert("Request was: " + resp.Request +
" and response from the server is " + resp.Response);
}
</script>
Points of interest
Note - if you send many callbacks in a short period of time, the inner JavaScript object will send the first one, and store the others in a buffer. When the response returns, or a timeout occurs, it sends the next callback from the buffer, and so on, until all callbacks are sent. This functionality makes possible that responses from the server will come in the same order as requests were sent.
But, even with this functionality, I recommend you to group those callbacks into a bigger one rather than send many in a sequence. On the other side, if your callbacks are large, then the first option is better.
I've also done some fixes, including sending bad characters ('<', '>', '=', '?', '&', ....) in a callback. Now, you can send anything you like, it should work just fine. If it doesn't, please let me know!
And that's just it. Now, you can easily use AJAX callbacks in your application. The control was tested and worked fine under IE7, IE8, Firefox v3.0, and Opera v9.51 browsers. Please let me know if you experience any difficulties while using the control. And, I will also like to hear some improvements suggestions.