ASP.NET显示与QUOT;载入中...＆QUOT;而更新面板更新信息 [英] ASP.NET Display "Loading..." message while update panel is updating

问题描述

您好我创建一个ASP.NET/C#应用 我有一个更新面板，需要时间来更新。 有没有一种方法来显示在计算的时候正在加载...请稍候信息？

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

我要显示一个消息，如果可能的。

感谢您的任何帮助。

这是我的面板的code：

 ＆LT; ASP：UpdatePanel的ID =UpdatePanel1=服务器＆GT;
    ＆LT;触发器＆GT;
        ＆LT; ASP：AsyncPostBackTrigger控件ID =Button1的事件名称=点击/＆GT;
    ＆LT; /触发器＆GT;
    ＆LT;的ContentTemplate＆GT;
        //内容放在这里
    ＆LT; /的ContentTemplate＆GT;
＆LT; / ASP：UpdatePanel的＆GT;
 

和阿贾克斯面板动画扩展

 ＆LT; ajaxToolkit：UpdatePanelAnimationExtender ID =UpdatePanelAnimationExtender1=服务器的TargetControlID =UpdatePanel1＆GT;
    ＆LT;动画和GT;
        ＆LT; OnUpdating＆GT;
            ＆LT;淡出时长=1FPS =20/＆GT;
        ＆LT; / OnUpdating＆GT;
        ＆LT; OnUpdated＆GT;
            ＆LT;淡入时间=2FPS =20/＆GT;
        ＆LT; / OnUpdated＆GT;
    ＆LT; /动画＆GT;
＆LT; / ajaxToolkit：UpdatePanelAnimationExtender＆GT;
 

解决方案

您可以用code如下当

使用图片作为荷载

 ＆LT; ASP：的UpdateProgress ID =的UpdateProgress=服务器＆GT;
    ＆LT; ProgressTemplate＆GT;
        ＆LT; D​​IV的风格=的位置是：固定;文本对齐：中心;高度：100％;宽度：100％;顶部：0;右：0;左：0; z-index值：9999999;背景颜色：＃000000 ;不透明度：0.7;＆GT;
            ＆LT; ASP：图片ID =imgUpdateProgress=服务器的ImageUrl =〜/图片/ AJAX-loader.gif还有AlternateText =载入中...工具提示=载入中...作风=填充：10px的;位置：固定;顶部：45％;左：50％; /＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / ProgressTemplate＆GT;
＆LT; / ASP：的UpdateProgress＆GT;
 

使用文字作为荷载

 ＆LT; ASP：的UpdateProgress ID =的UpdateProgress=服务器＆GT;
    ＆LT; ProgressTemplate＆GT;
        ＆LT; D​​IV的风格=的位置是：固定;文本对齐：中心;高度：100％;宽度：100％;顶部：0;右：0;左：0; z-index值：9999999;背景颜色：＃000000 ;不透明度：0.7;＆GT;
            ＆LT;跨度风格=边界宽度：0px;位置：固定;填充：50像素;背景颜色：#FFFFFF;字体大小：36px;左：40％;最高：40％;＆GT;载入中... ＆LT; / SPAN＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / ProgressTemplate＆GT;
＆LT; / ASP：的UpdateProgress＆GT;
 

Hello I am creating an ASP.NET/C# application I have an update panel that takes time to update. Is there a way to display a "Loading... Please Wait" Message during the time of the calculations?

Currently I am using AJAX panel animation fade in/fade out, to make the panel disappear while calculating and then reappear when done. But that is not very practical.

I need to display a message if possible.

Thank you for any help.

this is the code of my panel:

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

And the Ajax Panel animation extender

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

解决方案

You can use code as below when

using Image as Loading

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

using Text as Loading

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

这篇关于ASP.NET显示与QUOT;载入中...＆QUOT;而更新面板更新信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！