ページの読込やクレジットの課金処理など、ブラウザから何かアクションを起こしたときに長く待たされることがあります。
数秒でも待たされると、ユーザーが不安になって再度ボタンをクリックしたり画面を閉じてしまう場合もあるので、最近は処理中のアニメーションやボタンの制御などの対策が一般的となっています。
今回は ASP.NET でローディング画像を表示してユーザーの不安を解消させてみます。
ASP.NETで実現するには
早速ですが、ASP.NET で外部との通信がある機能で処理中のアニメーション画像を表示してみます。
アニメーション画像は、下記のサイトで簡単に作成が可能です。
アニメーション画像の表示方法はいろいろとありますが、今回は簡易的なので、ボタンのクリック時に同じ html 内に画像を表示してあげることにしました。
ASP.NET の場合はボタンのプロパティにある OnClientClick を利用します。
ここでクライアント側で実行する JavaScript が定義できるので、画像を表示させたいオブジェクト内の html を書き換えます。
1 2 3 4 5 6 7 8 | [ASP] <asp:Button ID="buttonExample" Text="サンプル" runat="server" OnClick="buttonExample_Click" OnClientClick="document.getElementById('load_image').innerHTML='<img src=\'example.gif\' />';" /> <div id="load_image"></div> |
