Loading in content using AJAX is definitely, totally awesome.  A feature that I appreciate, when I see it, is client side notification of what’s going on asynchronously.  Of course; it’s not always appropriate since we are are, after all, trying to lighten up the users experience.  When you’re loading big chunks, that might take a while, or fulfilling requests, like update or delete, I think that providing some feedback is good practice.

Let’s say that I have a big block of heavy content that will be interactive.  For shameless self-promotion I’ll use my photo gallery on WillWrightPhotography.com as the example.

Here we have a more or less static header and footer, with a center content well that is interative. This interface provides an excellent opportunity to use AJAX for two reasons.

First, if I were to let the page load procedurally the whole site would be unavailable until the gallery was done loading.  Although you can’t see it from the front end, the gallery is cached on the server.  This is great for someone who’s coming to the site after the application has been started, but not so great for the person who’s request started the application in the first place.

Secondly, the user is able to filter the gallery by clicking on the “More” tab and selecting a keyword to filter by.  This results in a Postback in order to retrieve the new center well content.  The only thing changing is the gallery in the middle, so AJAX will provide the user with a much smoother experience.

Now, if I go ahead and take my own advice and use AJAX to load in the photo gallery asynchronously the user experience would be:

1. User initiates Request
2. Server Returns Header and Footer
3. Server starts asynchronous request for photo gallery
4. User thinks page (blank gallery) is done loading
5. User leaves because you give them no return on their investment
6. Server never gets to Respond the gallery

What we need to do is notify the user that something is going on behind the scenes.  Practically, I think that can be done by notifying the user when something has started and when something has ended.

So, let’s do that!

The Solution

Here’s a high level overview of what I want to accomplish.

1. User initiates Request
2. Server Responds with UI (basically header and footer)
3. Start asynchronous request for the gallery
4. Notify the user that an asynchronous request has been made
5. Server Responds with the gallery
6. Notify the user that the asynchronous request has completed

Number one is taken care of for us. (Awesome)

Number two is also taken care of for us.  (Why am reading this again?)

Number three; finally, something I can expound upon!  I’m using master pages for my solution so what you’re seeing here is just the content page.

Default.aspx

<asp:Content ContentPlaceHolderID="body" runat='server'>
    <asp:UpdatePanel ID="upGallery" OnLoad="upGallery_Load" runat="server">
        <ContentTemplate>
            <asp:Repeater runat="server" ID="gallery" OnItemDataBound="gallery_ItemDataBound">
                <HeaderTemplate>
                    <table cellpadding="0" cellspacing="0" border="0" class="gallery">
                        <tr>
                </HeaderTemplate>
                <ItemTemplate>
                    <td>
                        <uc:photo runat="server" ID="photoColumn1" file='<%# DataBinder.Eval(Container.DataItem, "file") %>' />
                    </td>
                </ItemTemplate>

                <FooterTemplate>
                        </tr>
                    </table>
                </FooterTemplate>
            </asp:Repeater>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Default.aspx.cs

    protected void Page_Load(object sender, EventArgs e)
    {
            //Load the Gallery in Asyncronously
            string script = "window.addEvent('domready', function() {";
            script += "__doPostBack('" + upGallery.ClientID + "','');";
            script += "});";
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), System.Guid.NewGuid().ToString(), script, true);
        }
    }

    protected void upGallery_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            BindData();
        }
    }

Let’s go through it. The markup is pretty self-explanatory, just take note of the OnLoad function wireup. When the UpdatePanel Load event fires it will be handled by upGallery_Load.

Let’s look at the code behind. On Page_Load I’m registering some client side JavaScript that will run once the DOM has fully loaded. I’m using MooTools which explains the syntax shown above. Once the DOM has fully loaded the client will initiate a Postback (Asynchronous) for the UpdatePanel. Thanks to Encosia for writing an article on how to Easily refresh an UpdatePanel, using JavaScript.

Since we’ve wired up an event handler for the UpdatePanel’s OnLoad event and IsPostBack will be true, the server side code is going to call BindData(). Put you’re cycle hungry code in here and it’ll be run after the UI has already rendered.

Now when someone makes a request for the page the user will get some immediate feedback in the form of the UI, and the time consuming request for the gallery is now running in the background. Eventually BindData() will finish and the Server will respond with the gallery.

We could stop right here, but let’s get fancy and add some client side notifications so that the user knows something is happening and should wait around for the results.

Number four notify the user that an asynchronous request has been made. We can do this with a couple of modifications.

Default.master (partial)

<head runat="server">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <script type="text/javascript" language="javascript">
        function BeginRequestHandler(sender, args) {
            alert("Loading Gallery");
        }
    </script>
</head>

Default.aspx.cs

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //Register the aync begin request handler
            //Load the Gallery in Asyncronously
            string script = "window.addEvent('domready', function() {";
            script += "Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);";
            script += "__doPostBack('" + upGallery.ClientID + "','');";
            script += "});";
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), System.Guid.NewGuid().ToString(), script, true);
        }
    }

I’ve defined a JavaScript function on the master page called BeginRequestHandler, and I’m registering it as an event handler for PageRequestManager’s beginRequest event. Check out MSDN’s documentation for more info on that. Make sure you wire up the event handler before you call __doPostBack(). If you don’t your handler won’t be called and you’re user won’t be notified.

From MSDN, the description for Sys.WebForms.PageRequestManager beginRequest Event is

Raised before processing of an asynchronous postback starts and the postback request is sent to the server.

In other words, when the Request for my gallery is made show an Alert to the user.

Number five, well, we’ve already taken care of that with BindData().

Number Six notify the user that the asynchronous request has ended. We’ve already seen how to write for the beginRequest event and I’m sure you followed my link to the MSDN documentation for PageRequestManager, so this is going to be easy. Let’s make two more modifications:

Default.master (partial)

<head runat="server">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <script type="text/javascript" language="javascript">
        function BeginRequestHandler(sender, args) {
            alert("Loading Gallery");
        }

        function EndRequestHandler(sender, args) {
            alert("Done");
        }
    </script>
</head>

Default.aspx.cs

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //Register the aync begin/end request handlers
            //Load the Gallery in Asyncronously
            string script = "window.addEvent('domready', function() {";
            script += "Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);";
            script += "Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);";
            script += "__doPostBack('" + upGallery.ClientID + "','');";
            script += "});";
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), System.Guid.NewGuid().ToString(), script, true);
        }
    }

Now I’ve got two handlers wired to two events, beginRequest and endRequest. That’s really all there is to it. You could extend this to as many events provided by PageRequestManager as you’d like!

Aesthetics

As it stands I’ve got a JavaScript Alert popping up twice every time the gallery UpdatePanel is updated. Not so aesthetically pleasing. Something that is aesthetically pleasing is a Macintosh. Let’s pull a Jobs and rip off someone else’s idea, dress it up, and resell it as our own (I’m not even going to do THAT really).

Head over to digitarald.de and check out the Roar Notifications project.

Lets implement this solution real quick so that our site not only functions well but looks hot too.

Default.master (partial)

<head runat="server">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <link rel="stylesheet" href="../styles/roar.css" type="text/css" />
    <script type="text/javascript" src="js/roar.js">
    <script type="text/javascript" language="javascript">
        var oRoar = new Roar({position:'upperRight',duration:4000});

        function BeginRequestHandler(sender, args) {
            oRoar.alert("Loading Gallery", "One moment please...");
        }

        function EndRequestHandler(sender, args) {
            oRoar.alert("Done", "Thank You!");
        }
    </script>
</head>

That’s it, we’re done!

The Particulars

I’m using the MooTools framework which is why my JavaScript looks the way it does. It’s also why I’ve used this Roar Notifications project. You could surely use whatever notifications you want with whatever framework you want.

I’ve also written the JavaScript straight into my master page. That’s cool for now but it might be more elegant to encapsulate it into it’s own .js file and then register that with the ScriptManager. I had problems getting everything to load in the correct order, which is why I’ve done it the way I have, but I’m sure this is not an insurmountable issue and would only take the proper application of gray matter and space-time.

As always, questions and comments are welcome!