asp.net page "page is loading"

Question

How can I display the circular swirl image, that is usually seen in asp.net pages, while a page is loading (retrieving data etc)?

Answer 1

If you're using UpdateProgress/UpdatePanel, here are some samples: http://www.asp.net/Ajax/Documentation/Live/overview/UpdateProgressOverview.aspx

Here is a loading gif sample using UpdateProgress:

<asp:UpdateProgress ID="updProg" AssociatedUpdatePanelID="updPnl" DisplayAfter="0" runat="server">
    <ProgressTemplate>
        <div id="progInd">
            <img id="indic" src="/images/loadgifs/z.gif" alt="..." />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>  

<asp:ScriptManager ID="sm" runat="server" />

<asp:UpdatePanel ID="updPnl" runat="server">
<ContentTemplate>
        ...
    <asp:Timer ID="tmrTrigPostbk" runat="server" Interval="10" />
</ContentTemplate>
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="tmrTrigPostbk" EventName="Tick" />
</Triggers>    
</asp:UpdatePanel>

protected void Page_Load(object sender, EventArgs e)
{
    tmrTrigPostbk.Enabled = !IsPostBack;
}

Answer 2

Are you using UpdatePanel? or Are you using Javascript libraries like Jquery? If former then you can add the swirl to UpdateProgress if the latter (JQuery) then you can trigger the image on .ajaxStart() method.

HTH

Answer 3

I use the jQuery BlockUI plugin to make this pretty easy to do, even inside an area on the page, say a dialog box.

http://malsup.com/jquery/block/

here is an example making an AJAX call to the server:

    function GetNewContactInfo(contactId) {

    if (0 === contactId) {
        showErrorMsg('You must select a Contact to Retrieve');
        return;
    }

    var request = {
        ContactId: 0
    };

    wjBlockUI();

    request.ContactId = contactId;

    ContactServiceProxy.invoke({ serviceMethod: "GetContact",
        data: { request: request },
        callback: function(response) {
            DisplayNewContactInfo(response);
        },
        error: function(xhr, errorMsg, thrown) {
            postErrorAndUnBlockUI(xhr, errorMsg, thrown);
        }
    });

}

Inside the DisplayNeewContactInfo function I call $.unblockUI(); to take the message away. I have the actual invoking of the BlockUI call in a wrapper function:

function wjBlockUI(msg) {

var defaultMsg = '<img src="../images/activity.gif" />';

if (null !== msg) {
    defaultMsg = msg
}

$.blockUI({ overlayCSS: { backgroundColor: '#aaa' }, message: defaultMsg });

}

You can download the entire project these examples came from, http://professionalaspnet.com/WCFJQuery.zip