Click here to Skip to main content
11,577,475 members (55,809 online)
Click here to Skip to main content

AJAX for ASP.NET

, 28 Jun 2005 202.5K 4.6K 111
Rate this:
Please Sign up or sign in to vote.
An easy way to use AJAX with ASP.NET.

Introduction - What is AJAX?

AJAX, or Asynchronous JavaScript and XML, is a fancy way to use JavaScript and XML to communicate with a web server without refreshing the web page. You can visit this web page for more information about AJAX; it has a good list of links.

Why use AJAX?

There are a couple of reasons to use AJAX in lieu of the traditional form submission. The first is that it is very light weight: instead of sending all of the form information to the server and getting all of the rendered HTML back, simply send the data the server needs to process and get back only what the client needs to process. Light weight means fast. The second reason to use AJAX is because (as the logo in the link above makes clear) AJAX is cool.

Using AJAX with ASP.NET

Even though AJAX is a client side technology that uses JavaScript, the client-server interaction is very important.

Adam Vandenberg has put together a nice JavaScript wrapper for AJAX. His wrapper even does caching, although that will not be discussed here. His wrapper is used in the code examples and project files.

Using the code

There are four parts of the code that are important to look at:

  1. The HTML

    There are two form elements that will interact with AJAX. The input button "btn1" will invoke the AJAX code, which will make a server call and fill the select element "select1".

    <select id="select1"></select>
    <input id="btn1" value="Fill Select" type="button" <BR>       onclick="getOptions();">
  2. The JavaScript that calls the AJAX.

    The function getOptions() will do the main work.

    // Create the Request object (the AJAX wrapper)
    var request = new Request();
    // Change this to fit your environment
    var url = "http://localhost/ajax/";
    function getOptions()
    {
        // Call the AJAX
        // Notice the second parameter is actually a function to handle the <BR>    // response
        request.GetNoCache(url + "requests/getOptions.aspx",
        function(result)
        {
            if (result.readyState!=ReadyState.Complete)
                return;               
            if (result.status==HttpStatus.OK && result.responseText != "")
            {
                // If the request was successfull and returned data
                var vals = result.responseText.split("~");
                for (i=0; i<vals.length; i++)
                {
                    var pair = vals[i].split("|");
                    var op = new Option(pair[1], pair[0], false, false);
                    var sel = document.getElementById("select1");
                    sel.options[sel.length] = op;
                }
                alert("Remember that the new values in form" + 
                      " element 'select1' are not in viewstate." + 
                      " Code appropriately.");
            }
            else
            {
                // Handle the failure condition
                alert('Get options failed.');
            }
        }
        )
    }
  3. The ASPX file.

    The important thing here is that the aspx file only returns the string (XML) data from the code behind.

    <%@ Page language="c#"
                Codebehind="getOptions.aspx.cs"
                AutoEventWireup="false"
                Inherits="ajax.requests.getOptions" %>
    <%=result%>
  4. The code behind.
    protected string result = string.Empty;
    private void Page_Load(object sender, System.EventArgs e)
    {
        for (int i=0; i<10; i++)
        {
            result += i.ToString() + "|option " + i.ToString() + "~";
        }
        // to drop the last '~'
        result = result.Substring(0, result.Length - 1); <BR>}

What's Next

As you can see, it is very easy to have a lightweight AJAX component interact with ASP.NET. I know what you are thinking: "Steve, wait a minute: I thought you had to use XML to use AJAX?" From the example, you can see that the string being returned is a pipe and tilde delimited string. You do not have to use XML. There are a lot of places where XML would be very useful, but using this implementation it is not required.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Steven A Bristol
Web Developer
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

 
Questionajx solution Pin
bhagwat prasad14-Feb-12 5:53
groupbhagwat prasad14-Feb-12 5:53 
GeneralMy vote of 1 Pin
ubaid215-Jul-10 20:00
memberubaid215-Jul-10 20:00 
GeneralYou can see Pin
ChiranjibC7-Feb-07 1:28
memberChiranjibC7-Feb-07 1:28 
GeneralRe: You can see Pin
Islam94-Nov-07 0:53
memberIslam94-Nov-07 0:53 
GeneralHav you tried... Pin
Doodie Woddy Doodlechips24-Jan-07 2:00
memberDoodie Woddy Doodlechips24-Jan-07 2:00 
GeneralTurn ASP.NET controls into AJAXenabled controls Pin
OmegaCD8-Jul-06 20:45
memberOmegaCD8-Jul-06 20:45 
GeneralRe: Turn ASP.NET controls into AJAXenabled controls Pin
Steven A Bristol9-Jul-06 2:33
memberSteven A Bristol9-Jul-06 2:33 
GeneralUse the Ajax.NET library, not any of the advertisement messages trolls have left here. Pin
Steven A Bristol27-Jun-06 12:24
memberSteven A Bristol27-Jun-06 12:24 
GeneralIs AJAX all about js Pin
Syed Moshiur Murshed20-May-06 4:32
memberSyed Moshiur Murshed20-May-06 4:32 
Generalrequest is null or not an object Pin
Shri Pal31-Mar-06 22:03
memberShri Pal31-Mar-06 22:03 
GeneralRe: request is null or not an object Pin
Shri Pal31-Mar-06 22:08
memberShri Pal31-Mar-06 22:08 
GeneralRe: request is null or not an object Pin
zhongguosou2-May-06 16:10
memberzhongguosou2-May-06 16:10 
GeneralRe: request is null or not an object Pin
zhongguosou2-May-06 16:42
memberzhongguosou2-May-06 16:42 
GeneralRe: request is null or not an object Pin
Diamond1120-Aug-06 23:16
memberDiamond1120-Aug-06 23:16 
Generalthank you Pin
minhhai_cd@yahoo.com2-Mar-06 21:34
memberminhhai_cd@yahoo.com2-Mar-06 21:34 
NewszumiPage for ASP.NET Pin
Amir L.21-Dec-05 13:01
memberAmir L.21-Dec-05 13:01 
GeneralComfortASP.NET Pin
dazei22-Sep-05 6:39
memberdazei22-Sep-05 6:39 
GeneralThe code presented is very amateurish Pin
Dmitri Kirillov10-Jul-05 6:12
memberDmitri Kirillov10-Jul-05 6:12 
GeneralAspnet Newbies here, need help open project. Pin
KhmerKid30-Jun-05 22:16
sussKhmerKid30-Jun-05 22:16 
GeneralRe: Aspnet Newbies here, need help open project. Fixed Pin
khmerkidnow30-Jun-05 22:38
memberkhmerkidnow30-Jun-05 22:38 
Generalajax.net - The free library for .net (c#) Pin
ploufs29-Jun-05 2:12
memberploufs29-Jun-05 2:12 
GeneralRe: ajax.net - The free library for .net (c#) Pin
John Rayner17-Oct-05 12:12
memberJohn Rayner17-Oct-05 12:12 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150603.1 | Last Updated 28 Jun 2005
Article Copyright 2005 by Steven A Bristol
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid