Skip Navigation LinksHome > View Post

Ajaxed Part II. Server Side AJAX

Last time in this short series on the ASP.NET AJAX Extensions we looked at what I termed Client-Side AJAX. Today we're going to look at its counterpart, Server-Side AJAX.

You may remember in the Introduction that I loosely described the difference by considering 'where most of the code that is responsible for formatting the presentation of the AJAX call lives.'.

So, in this case we get to keep our hands entirely clean of JavaScript and achieve our goals using only the new AJAX controls.

For fairness, we'll recreate exactly the same UI that loads a list of names into a listbox 'out-of-band'.

The AJAX test page layout

After installing the ASP.NET AJAX Extensions (you have installed them right?) you should notice an addition to your Visual Studio 2005 toolbox:

The AJAX toolbox items

Building the page

Let's start building our page. This time, we're going to use ASP.NET in a way we're more used to. Yup, we'll be using ASP.NET controls - not plain HTML as we did last time (we weren't using postbacks so there was no point incurring the expense of full controls).

If you're going to use AJAX on your page, chances are, you're going to need a ScriptManager (we even used one of these in the Client-Side examples, if you remember). It's important that you put this at the top of your ASP.NET form, it must come before any of the other AJAX Controls.

Next we'll add the controls to make our page: a Button and a ListBox. Oh yes - but first lets add an UpdatePanel control from the AJAX toolbox and place our ListBox inside this panel. It should all look something like this.

How the page should look

The UpdatePanel is a region of the page that can be dynamically updated by out-of-band AJAX calls. You can have as many UpdatePanels on your page as you like and you can even nest them, one inside the other. They even work with MasterPages too.

Next we need to tell the UpdatePanel what control and events on the page should cause it to dynamically refresh. The UpdatePanel has a Triggers property which is a collection. Click the ellipsis to open the Collection Editor, as shown below.

Adding the Get People button to the triggers collection

As you can see in the screenshot above, I have have added the 'Get People' button to the Triggers collection and specified that its Click event should cause a refresh of the panel.

Of course, the last step is to make that button actually do something!

protected void _btnGetPeople_Click(object sender, EventArgs e)
{
    PeopleService service = new PeopleService();
    List<Person> people = service.GetPeople();
    
    //normally I would use object databinding here but want to keep things crystal...
    
    _lstPeople.Items.Clear();
    foreach (Person person in people)
    {
        _lstPeople.Items.Add(string.Format(
            "{0}, {1}, {2}",
            person.Name,
            person.Age,
            person.PhoneNumber));
    }
}

And we're done. That was it!

Why not download the code and check it out yourself (note, this is the same download as Part I).

What really demonstrates the power of this approach is considering an extended scenario. What if I wanted to add a new button that causes a full postback (not an AJAX async postback). Well, that's as easy as adding another button. But using the Server-Side approach I can access the state of the listbox (which person, if any, is selected) during that callback. That just wouldn't happen with the Client-Side AJAX approach, I'd need to build in an a way rebuilding such state (probably by accessing the post data in the Request.Form collection).

There is a downside to this though. The magic of server-side AJAX works because each call refreshes the page's ViewState when the async call returns. But what happens if the user makes multiple asynchronous calls at the same time? The viewstate would become corrupt, representing the state of the last async postback to finish. To prevent this, the ASP.NET AJAX extensions only allow one postback at a time.

Whereas, because you are in charge of your own state and synchronisation, in Client-Side AJAX you can do as many concurrent 'postbacks' as you like.

Tags: ASP.NET

 
Josh Post By Josh Twist
11:53 AM
22 Jan 2007

» Next Post: AJAX ASP.NET Extensions released
« Previous Post: Ajaxed Part I. Client side AJAX

Comments are closed for this post.

Posted by David Travis @ 28 Jan 2007 5:03 AM
Hi Josh,

Where can I find more information about the how the communication layer manages requests to the server. Specifically I want to focus on the information regarding simultaneous calls and how they are ordered to be executed one by one.

Thanks,
David.

© 2005 - 2014 Josh Twist - All Rights Reserved.