ASP.NETで処理中の画像を表示する

ASP.NETで処理中の画像を表示する

ASP.NETASP.NETで処理中の画像を表示する

ページの読込やクレジットの課金処理など、ブラウザから何かアクションを起こしたときに長く待たされることがあります。待たされると、ユーザーが不安になって再度ボタンをクリックしたり、画面を閉じてしまう場合もあるので、最近は処理中のアニメーションやボタンの制御などの対策が一般的となっています。

今回、ASP.NET で、外部との通信がある機能で処理中のアニメーション画像を表示してみました。アニメーション画像は、下記のサイトで簡単に作成が可能です。

Ajaxload - Ajax loading gif generator

アニメーション画像の表示方法はいろいろとありますが、今回は簡易的なので、ボタンのクリック時に同じ html 内に画像を表示してあげることにしました。ASP.NET の場合はボタンのプロパティにある OnClientClick を利用します。ここでクライアント側で実行する JavaScript が定義できるので、画像を表示させたいオブジェクト内の html を書き換えます。

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

最終更新日:

関連記事

人気記事

新着情報