Click here to Skip to main content
13,199,685 members (68,590 online)
Click here to Skip to main content
Add your own
alternative version


27 bookmarked
Posted 10 Aug 2008

A Simple ASP.NET AJAX Control

, 10 Aug 2008
Rate this:
Please Sign up or sign in to vote.
A WebControl that handles client-server communications via AJAX.



This article is intended for anyone who is looking for an easy-to-use AJAX web control.


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.*/ 

//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.Write("Error occured in AJAX control - message: " + e.Message);

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

        /*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);

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.


This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)


About the Author

Aleš Hübl
Web Developer Nowire s.r.o.
Czech Republic Czech Republic
Currently student of Czech Technical University in Prague / Faculty of Information Technology, Czech Republic. Field - Web and Software Engineering, focused on Software Engineering.

I am interested in web-applications development.

My favourite languages and technologies are ASP.Net, C#, Javascript, AJAX and ScriptSharp.

You may also be interested in...


Comments and Discussions

GeneralMy vote of 1 Pin
__Gianluca__3-Sep-10 21:38
member__Gianluca__3-Sep-10 21:38 
QuestionHow to using this code width other control in Pin
anhsaodem17200222-Oct-08 16:42
memberanhsaodem17200222-Oct-08 16:42 
QuestionGood work, but why? Pin
Asghar Panahy12-Aug-08 22:02
memberAsghar Panahy12-Aug-08 22:02 
GeneralRepairs and fixes Pin
Aleš Hübl12-Aug-08 14:15
memberAleš Hübl12-Aug-08 14:15 
GeneralRe: Repairs and fixes Pin
Blue_Boy22-Nov-08 11:09
memberBlue_Boy22-Nov-08 11:09 
GeneralSome repairs Pin
Aleš Hübl11-Aug-08 5:17
memberAleš Hübl11-Aug-08 5:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171020.1 | Last Updated 10 Aug 2008
Article Copyright 2008 by Aleš Hübl
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid