While working with AJAX we can make the web page more interactive by introducing the Fade behavior, and we can also introduce the provision of cancellation of async AJAX operation.

This is how we can leverage on usability aspect of the application.

Matt Berseth has posted a nice article to acheive this behaviour through ASP.Net AJAX, following is the source code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" language="javascript">
   
    function onUpdating(){
        // get the update progress div
        var updateProgressDiv = $get('updateProgressDiv');
        // make it visible
        updateProgressDiv.style.display = '';

        //  get the gridview element       
        var gridView = $get('<%= this.gvCustomers.ClientID %>');
       
        // get the bounds of both the gridview and the progress div
    var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
    var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
       
    // do the math to figure out where to position the element (the center of the gridview)
    var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
    var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
       
    // set the progress element to this position
    Sys.UI.DomElement.setLocation (updateProgressDiv, x, y);       
    }

    function onUpdated() {
        // get the update progress div
        var updateProgressDiv = $get('updateProgressDiv');
        // make it invisible
        updateProgressDiv.style.display = 'none';
    }
   
    function onAbort(){
        if(Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()){
            //  abort the postback
            Sys.WebForms.PageRequestManager.getInstance().abortPostBack();
            //  get the reference to the animation for the gridview
            var gvCustomersAnimation = $find('animation');
            //  simulate stopping by replaying the animation
            gvCustomersAnimation._postBackPending = false;
            gvCustomersAnimation.get_OnUpdatingBehavior().quit();
            gvCustomersAnimation.get_OnUpdatedBehavior().play();
        }
    }
   
    </script>

</head>
<body>
    <form id="form" runat="server">
        <asp:ScriptManager ID="scriptManager" runat="server" />
        <div>
            <asp:SqlDataSource ID="sqldsCustomers" runat="server"
                SelectCommand="select customerid, companyname, contactname, contacttitle from dbo.customers"
                SelectCommandType="Text" ConnectionString="todo" />
           
            <p style="background-color:AliceBlue; width:95%">
                Example of using the events exposed by the PageRequestManager to cancel an async postback<br />
                Click on the column headers or the paging buttons to force an async-postback<br />
            </p>
            <br />
            <asp:Label ID="lblTitle" runat="server" Text="Customers" BackColor="lightblue" Width="95%" />
            <asp:UpdatePanel ID="updatePanel" runat="server">
                <ContentTemplate>
                    <asp:GridView ID="gvCustomers" runat="server" AllowPaging="true" AllowSorting="true"
                        PageSize="20" DataSourceID="sqldsCustomers" Width="95%">
                        <AlternatingRowStyle BackColor="aliceBlue" />
                        <HeaderStyle HorizontalAlign="Left" />
                    </asp:GridView>
                </ContentTemplate>
            </asp:UpdatePanel>
            <ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="updatePanel">
                <Animations>
                    <OnUpdating>
                        <Parallel duration="0">
                            <%-- place the update progress div over the gridview control --%>
                            <ScriptAction Script="onUpdating();" />
                            <%-- fade-out the GridView --%>
                            <FadeOut minimumOpacity=".5" />
                         </Parallel>
                    </OnUpdating>
                    <OnUpdated>
                        <Parallel duration="0">
                            <%-- fade back in the GridView --%>
                            <FadeIn minimumOpacity=".5" />
                            <%--find the update progress div and place it over the gridview control--%>
                            <ScriptAction Script="onUpdated();" />
                        </Parallel>
                    </OnUpdated>
                </Animations>
            </ajaxToolkit:UpdatePanelAnimationExtender>
            <div id="updateProgressDiv" style="display:none; position:absolute;">
                <table>
                    <tr><td align="center"><img src="Img/simple.gif" /></td></tr>
                    <tr><td align="center"><input type="button" onclick="onAbort();" value="Cancel" /></td></tr>
                </table>
            </div>
        </div>
    </form>
</body>
</html>