Visual feedback for updating data in ASP.NET AJAX

Question

I am in the middle of developing a project, which uses ASP.NET/C#. I am using AJAX a lot in the pages, to provide a smooth experience for entering and updating data. One little visual issue is that due to pages not being posted back when data is changed, the user sees nothing at all happen. Is there a simple way in ASP.NET AJAX to provide some form of feedback to the user, to show that the data has been saved? i.e. a box that appears for a second or two, then fades out.

Or perhaps a general question to how you guys handle letting the user know their changes have been saved?

score 1 · Answer 1 · answered Jan 26 '11 at 14:41

If you are using Asp.net AJAX then you can use ScriptManager's beginRequest handler to show visual feedback (like loading image). An example of this can be found here.

If you are using jQuery AJAX then you can use ajaxStart() and ajaxStop() functions to show and hide visual feedback ui.

score 0 · Accepted Answer · answered Jan 26 '11 at 14:40

It is important to provide your users with feedback when waiting for AJAX requests to complete from a usability point of view and also because it stops them from doing things like clicking a submit button again because they think nothing is happening.

How you do depends on your implementation but normally you can do things like display an animated gif at the beginning of your ajax call (which you can generate at http://ajaxload.info/) and then hide it again in the onSuccess() method. If using jQuery something like

<div id="progress" style="display: none;"><img src="ajax-loading.gif"/></div>

$('#button').click(function(){
    $('#progress').show();
    // ajax call
});

function onSuccess() {
    $('#progress').hide();
}

This equally applies when using something like an AJAX enabled WCF service. You can also use the following when working with UpdatePanels

<asp:UpdatePanelAnimationExtender ID="uppEx"
    runat="server"
    BehaviorID="animation" 
    TargetControlID="upResults">
    <Animations>
        <OnUpdating>
            <Parallel duration="0">
                <ScriptAction Script="onUpdating();" />
                <EnableAction AnimationTarget="btnSearch" Enabled="false" />
                <FadeOut minimumOpacity=".2" />
            </Parallel>
        </OnUpdating>
        <OnUpdated>
            <Parallel duration="0">
                <ScriptAction Script="onUpdated();" />
                <EnableAction AnimationTarget="btnSearch" Enabled="true" />
                <FadeIn minimumOpacity=".2" />
            </Parallel>
        </OnUpdated>
    </Animations>
</asp:UpdatePanelAnimationExtender>

score 0 · Answer 3 · edited May 23 '17 at 12:26

There are various approaches to the "please wait" functionality on a web page. What you end up doing ultimately depends on the particular UI and whether it should "look like" a postback, just have a little spinning animation next to a given element, etc. Some relevant links:

Note that these links focus less on Microsoft's pluggable widget controls and more on plain old jQuery (or even plain old JavaScript without the jQuery library) for client-side code. It's a looser coupling to be desired, in my opinion.

Visual feedback for updating data in ASP.NET AJAX

3 Answers3