ASP.NET 在更新面板更新时显示“正在加载...”消息

Posted

技术标签:

【中文标题】ASP.NET 在更新面板更新时显示“正在加载...”消息【英文标题】:ASP.NET Display "Loading..." message while update panel is updating 【发布时间】:2011-12-03 23:41:20 【问题描述】:

您好,我正在创建一个 ASP.NET/C# 应用程序 我有一个需要时间来更新的更新面板。 有没有办法在计算期间显示“正在加载...请稍候”消息?

目前我正在使用 AJAX 面板动画淡入/淡出,使面板在计算时消失,然后在完成后重新出现。但这不是很实用。

如果可能,我需要显示一条消息。

感谢您的帮助。

这是我面板的代码:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
    </Triggers>
    <ContentTemplate>
        //Contents goes here
    </ContentTemplate>
</asp:UpdatePanel>

还有 Ajax 面板动画扩展器

<ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="UpdatePanel1">
    <Animations>
        <OnUpdating>
            <FadeOut Duration="1" Fps="20" />
        </OnUpdating>
        <OnUpdated>
            <FadeIn Duration="2" Fps="20" />
        </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

【问题讨论】:

【参考方案1】:

使用图片作为加载

<asp:UpdateProgress id="updateProgress" runat="server">
    <ProgressTemplate>
        <div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
            <asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/images/ajax-loader.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:45%;left:50%;" />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

使用文本加载

<asp:UpdateProgress id="updateProgress" runat="server">
    <ProgressTemplate>
        <div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
            <span style="border-width: 0px; position: fixed; padding: 50px; background-color: #FFFFFF; font-size: 36px; left: 40%; top: 40%;">Loading ...</span>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

【讨论】:

在页面 (.aspx) 或用户控件 (.ascx) 中。其次,你把这段代码放在哪里是关于 asp.net 的非常基本的事情 在哪里添加这是个好问题;特别是在处理执行多个 ajax 请求的复杂页面时。本文提供了有关在处理嵌套更新面板时在页面中放置此代码的位置的见解:msdn.microsoft.com/en-us/library/bb386421.aspx 在搞砸了 rad ajaxloadingpanels 之后,这变得容易多了,干杯【参考方案2】:

很棒的教程:3 Different Ways to Display Progress in an ASP.NET AJAX Application

【讨论】:

【参考方案3】:

您可以使用UpdateProgress 控件:

另见: ajax "loading" icon with UpdatePanel postbacks

【讨论】:

以上是关于ASP.NET 在更新面板更新时显示“正在加载...”消息的主要内容,如果未能解决你的问题,请参考以下文章

更新面板 AJAX asp.net 后运行脚本

ASP.Net 文件上传导致使用触发器在更新面板中回发

ASP.NET,在回发时显示加载消息

更新面板中的 ASP.NET 按钮问题

Asp.net 按钮 onclick 在更新面板中不起作用

从放置在更新面板外部的控件触发 asp.net 事件