Geeks With Blogs

News
Employers
Soppa Group India
iSmart Panache Inc
R Systems Internationals Ltd
Technovate eSolutions Pvt Ltd
The contents of this blog are my personal opinion and do not represent in any way the view of my employer.
These postings are provided "AS IS" with no warranties, and confer no rights.

Google PR™ - Post your Page Rank with MyGooglePageRank.com

Narendra Tiwari

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>

Posted on Wednesday, August 22, 2007 2:31 PM .Net | Back to top


Comments on this post: ASP.NET AJAX: Canceling an async postback

# re: ASP.NET AJAX: Canceling an async postback
Requesting Gravatar...
Idiot, stupid
Left by asdfasdf on Feb 27, 2008 5:21 PM

# re: ASP.NET AJAX: Canceling an async postback
Requesting Gravatar...
Khud ka code likho yaar. Kyon doosron ka code lekar apna blog bhartey ho?

Don't just blindly pick up code from others just to fill up your blog. Use your brain. Share something of your own or just close the shop down.

Nakal meoin akal chahiye. Title check karo!
Left by Narendra Tiwari on May 02, 2008 8:48 AM

# re: ASP.NET AJAX: Canceling an async postback
Requesting Gravatar...
fucking shit
Left by lol on May 24, 2008 10:02 AM

# re: ASP.NET AJAX: Canceling an async postback
Requesting Gravatar...
That was inspiring,

I like the way you wrote it .

Thanks for writing, most people don't bother.
Left by web development company on Aug 28, 2009 6:14 PM

Your comment:
 (will show your gravatar)


Copyright © Narendra Tiwari | Powered by: GeeksWithBlogs.net