Skip to content
AtlanticBT Monogram
October 29, 2009

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.

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project

Partner With Us

Ready for modern web technology and a sharp, user-friendly design? We want to give you exactly that. Contact us to get started.

Contact

Insights

Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.

Questions & Answers

What is the best web development framework?
Many people commonly ask “what is a framework in web development?” Web development frameworks can easily be confused with web development tools, languages, or parts of the web development stack (like PHP, Ruby, or Javascript).
Learn More
What is the best programming language for web development?
If there was one “best” programming language, then everything else would be obsolete. The reality is that there are so many different programming languages because there is no “best” language for any situation.
Learn More
How much does web development cost?
Web development can vary from a few hundred to millions of dollars depending on what is needed. You may simply need some changes to something that already exists, or you'd like to build a large or complex application.
Learn More
What is PHP web development?
PHP is a back end language primarily used for custom applications, content management systems (such as Wordpress), eCommerce engines (such as Magento), or even massive sites like Facebook.
Learn More
What is the best way to become a web developer?
We get lots of questions from university students working on projects -- How do I get into web development? How long does it take to learn? How much do web developers make?
Learn More
What is front end vs. back end development?
As web development evolved, it separated into logical specialization: front end web development and back end development. While back end development involves the server-side development, front end is the final rendering.
Learn More
What is full stack web development?
Full stack web development as a term evolved due to the separation of roles between front end and back end developers. A “full stack” developer is a developer that can work in both front end and back end technologies.
Learn More