Question

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

Answer 1

如果您正在使用UpdateProgress / UpdatePanel，以下是一些示例：http://www.asp.net/Ajax/Documentation/Live/overview/UpdateProgressOverview.aspx

以下是使用UpdateProgress的加载gif示例：

<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

您使用的是UpdatePanel吗？或者你使用像Jquery这样的Javascript库？如果是前者，那么你可以添加漩涡到UpdateProgress，如果是后者（JQuery），那么你可以在.ajaxStart（）方法上触发图像。

HTH

Answer 3

我使用jQuery BlockUI插件使这很容易，甚至在页面上的一个区域内，比如一个对话框。

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

这是一个向服务器发出AJAX调用的示例：

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

}

在DisplayNeewContactInfo函数中，我调用$ .unblockUI（）;接受消息。我在包装函数中实际调用了BlockUI调用：

function wjBlockUI(msg) {

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

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

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

}

您可以下载这些示例来自的整个项目http://professionalaspnet.com/WCFJQuery.zip

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

3 个答案: