Chris Rauber - Starting out with ASP.Net Ajax and the Ajax Control Toolkit

this.Blog.Find(entry => entry.IsHelpful);

Thursday, April 10, 2008

Starting out with ASP.Net Ajax and the Ajax Control Toolkit

So only javascript gurus can make slick Ajax-enabled web pages, right? Wrong! Want to know the dirty little secret? It's actually really easy!

If you are not using Ajax already on your ASP.Net pages, here's a great place to start. It's always bothered me how on something as simple as paging and sorting on a GridView caused a full postback. Wrap that sucker in an UpdatePanel and you’ve instantly Ajax-enabled your page! By including the declaration ChildrenAsTriggers="true" (or not declaring it at all – it’s the default option), any postback event triggered in the UpdatePanel will automatically cause the page to partially re-render its contents. That’s it! No javascript needed. Well, actually there’s a ton of javascript involved – just none of it written by you. ;-)

First off, you need a couple of resources to get started. If you are using the 3.5 version of the framework, ASP.Net Ajax is already included by default. If you are using .Net 2.0, you will need to download the ASP.Net Ajax Extensions 1.0 (could they make it *any* more confusing?).

I am using the Ajax Control Toolkit to perform the animations during the partial post-back. The Ajax Control Toolkit has a nice set of tools to use to help you build rich web UIs, and as Clark Howard would say, "Hey, it's free!!!!" In the example below, I am using the UpdatePanelAnimationExtender to declaratively set a FadeOut animation to occur on the div container surrounding the UpdatePanel as the page posts back, and a FadeIn animation as it re-renders.

OK, so I lied. I am actually using a little javascript to dynamically show a spinning loading image centered on the grid during the postback. But, again, the ASP.Net Ajax library to the rescue! It makes our life a lot easier by providing all sorts of nice javascript shortcuts that are cross-browser compatible (like the Sys.UI.DomElement.getBounds() call I’m using).

Oh, you need to check out this site that will generate a custom loading image for you. Make sure you select a transparent background when you build your image.

Here is the code:

<!-- loading image is hidden by default -->
<img id="imgLoading" src="images/ajax-loader.gif" alt="Loading..." width="30" height="30" 
                style="display: none;" />
<div id="container">
    <asp:UpdatePanel ID="updPnl" runat="server" ChildrenAsTriggers="true">
        <ContentTemplate>
            <asp:GridView ID="gvw" runat="server" CssClass="grid"
                HeaderStyle-CssClass="header" AutoGenerateColumns="false" RowStyle-CssClass="odd"
                AllowPaging="true" AllowSorting="true" AlternatingRowStyle-CssClass="even">
                <Columns>
                    <asp:BoundField SortExpression="ID" HeaderText="ID" DataField="ID" />
                    <asp:BoundField SortExpression="Name" HeaderText="Name" DataField="Name" />
                    <asp:BoundField SortExpression="BirthDate" 
                        HeaderText="Date Of Birth" DataField="BirthDate" />
                </Columns>
            </asp:GridView>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
<ajaxToolkit:UpdatePanelAnimationExtender ID="animator" runat="server" TargetControlID="updPnl">
    <Animations>
        <OnUpdating>
            <Sequence>
                <!-- shows the loading image in the center of our grid -->
                <ScriptAction Script="showInProcessImage($get('imgLoading'), $get('container'));" />                
                <Parallel duration=".10" Fps="30">
                    <FadeOut AnimationTarget="container" minimumOpacity="0" />
                </Parallel>
            </Sequence>
        </OnUpdating>
        <OnUpdated>
            <Sequence>
                <Parallel duration=".25" Fps="30">
                    <FadeIn AnimationTarget="container" minimumOpacity="0" />
                </Parallel>
                <!-- hides the loading image -->
                <ScriptAction Script="hideInProcessImage($get('imgLoading'));" />
            </Sequence>
        </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

And the javascript:

<script language="javascript" type="text/javascript">

// show the image in the center of the container
function showInProcessImage(img, container) {
    // get the bounds of both the container and the image
    var containerBounds = Sys.UI.DomElement.getBounds(container);
    var imgBounds = Sys.UI.DomElement.getBounds(img);

    // figure out where to position the element (the center of the container)
    var x = containerBounds.x + 
            Math.round(containerBounds.width / 2) - Math.round(imgBounds.width / 2);
    var y = containerBounds.y + 
            Math.round(containerBounds.height / 2) - Math.round(imgBounds.height / 2);

    // set the position of the in progress image
    Sys.UI.DomElement.setLocation(img, x, y);
    
    // finally un-hide it
    img.style.display = '';
}

// hide the image
function hideInProcessImage(img) {
    img.style.display = 'none';
}

</script>

I've left out the details of actually handling the paging and sorting events on the GridView. I assume you are doing that already (or know how to do it).

One more thing to keep in mind - even though you are partially rendering the screen, you are still hitting the server (and your code-behind page). On your partial post-backs, don't perform any extra work in the code-behind that's not going to be rendered in the update panel (e.g. hitting the DB, populating drop-down lists, setting headings, etc.). And don’t be fooled into thinking that Ajax-enabled web apps take a significant burden off the server. If they are designed to be too "chatty", they can even make things worse!