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>