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?

Answer 1

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>