こんにちは、更新に時間がかかる更新パネルがあるASP.NET/C#アプリケーションを作成しています。計算中に「Loading ... Please Wait」メッセージを表示する方法はありますか?
現在、AJAXパネルアニメーションをフェードイン/フェードアウトして、計算中にパネルを非表示にし、完了したら再表示します。しかし、これはあまり実用的ではありません。
可能であればメッセージを表示する必要があります。
助けてくれてありがとう。
これは私のパネルのコードです:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
</Triggers>
<ContentTemplate>
//Contents goes here
</ContentTemplate>
</asp:UpdatePanel>
そして、Ajax Panelアニメーションエクステンダー
<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>
次のようにコードを使用できます
イメージをロードとして使用
<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>
素晴らしいチュートリアル: ASP.NETで進行状況を表示する3つの異なる方法AJAXアプリケーション