asp.net页面“页面正在加载”

Question

当页面正在加载（检索数据等）时，如何显示通常在asp.net页面中看到的圆形旋涡图像？

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