CODEWITHSUNDEEP
c#asp.net
user279521
user279521

Reputation: 4807

asp.net page "page is loading"

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

Upvotes: 0

Views: 1710

Answers (3)

Chris Love
Chris Love

Reputation: 3893

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

Upvotes: 1

Steve
Steve

Reputation: 5952

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;
}

Upvotes: 2

Raja
Raja

Reputation: 3618

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

Upvotes: 1

Related Questions