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

【问题标题】：asp.net page "page is loading"asp.net 页面“页面正在加载”
【发布时间】：2010-04-13 14:45:19
【问题描述】：

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

【问题讨论】：

重复stackoverflow.com/questions/750358/…

【解决方案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;
}

【讨论】：

【解决方案2】：

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

HTH

【讨论】：

实际上都不是。它是一个简单的数据检索和填充文本字段。如果我想要该功能，我想我必须使用 UpdatePanel？

【解决方案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

【讨论】：