Updating a .NET Page in Real-Time Using jQuery and AJAX

Here’s a problem I bet you’ve run into before. You have a long-running function on one of your .NET pages and you want to provide real-time feedback to the user while they’re waiting on the function to complete (by function, I mean a method or a set of methods in the code-behind). So you put a variable somewhere on your page and you update it as the function runs. Then you realize that the variable value won’t actually change on the front-end until the postback is complete, which in turn means that it will get updated only once and say “Finished.” Just in time to tell the user what they already know.

To get around this conundrum, I present to you jquery and ajax, my two favorite web technologies ever. AJAX is a group of technologies that allows you to interact with the server from the client-side without affecting the behavior of the existing page. What this means is that you can post to a page without getting the associated postback from .NET (and subsequent page refresh). If that doesn’t sound important, trust me, it is. If we can post to a page without getting a postback, then we’re already pretty close to real-time updates. All we need to do now is use jQuery to update the DOM as we do posts. Sound complicated? It isn’t.

Back to our example, suppose a user clicks a button and that button fires a postback and runs 3 methods in the code-behind, DoStep1(), DoStep2(), and DoStep3(). The first thing we need to do is simply move these methods to a new page. If your original page was called DoWork.aspx, then a good name for the new page would be DoWork_Ajax.aspx.

Now, back on DoWork.aspx, you probably have an asp element on your page that you’d like to update as the functions progress. You can replace this with a standard HTML element. DoWork() is a javascript function that will update this element. It looks like this:

function DoWork(step)
{
    if (step == 1)
    {
        $("#update-msg").html("Starting Work");
    }

    if (step == 4)
    {
        $("#update-msg").html("Finished");
        return false;
    }        

    $("#update-msg").load(
        "DoWork_Ajax.aspx #results span", 
        { workStep: step }, 
        function(){ DoWork(step + 1); } 
    ); 
}

Assume that #update-message is a span on our page, i.e. a placeholder for the status of our worker functions.

The logic flows as such: If we’re on step 1, tell the user we’re starting. If we make it past step 3, we’re done, so tell the user that too and return from this function. Finally, the meat of the function – Do an asyncronous post to DoWork_Ajax.aspx, telling it what step we’re on, and injecting a span from it into the DOM for the current page.

The PageLoad method for DoWork_Ajax.aspx looks like this:

switch (Request["workStep"])
{
    case "1":
        DoStep1();
        break;
    case "2":
        DoStep2();
        break;
    case "3":
        DoStep3();
        break;
}

Each method updates an element on the page, just like before. This is the element that gets injected into the DOM by our jQuery function on DoWork.aspx.

You’re doing the exact same work as before, but now you can update the page in real time. I’ve included a sample application that demonstrates everything I’ve talked about. For those that are interested, you can download the project and run it locally to see this in action.