（ASP页面查询等待提示效果）GridViewなどで検索中に「処理中メッセージ」を表示する方法（※他の長い時間処理も参照できる）

原博客 http://ino1970.blog119.fc2.com/blog-entry-163.html

GridViewなどで検索中に「処理中メッセージ」を表示する方法

「GridViewなどで検索中に「処理中メッセージ」を表示する方法」
これは単純にstylsheetで表示・非表示にする方法で実現します。

メッセージエリアを表示させるトリガとなるコントロールは何でもよいですが
以下の例ではDropDownList(AutoPostBack=True）です。

DropDownListが変更された瞬間Javascriptによりメッセージ領域が表示され、その後の
AutoPostBackでサーバ側処理は実行されます。

サーバ側処理の実行結果が、同画面に戻ってきてメッセージ領域は再描画され再び非表示になります。


①メッセージエリアの用意

position:absoluteなのでどこで邪魔になりません。formの直後にでも・・・
但しupdatepanelを使っている場合、ボタンと同じようにその中に入れて下さい。

<div id="waitMsg" style="display:none; padding:20px 40px; color:White; position:absolute;top:250px; left:150px">
検索中です。　しばらくお待ち下さい。
</div>

②JavaScriptの準備

    <script type="text/javascript" language="javascript">
        function changeVisible() {
            var idWaitMsg = document.getElementById('waitMsg');
            if (idWaitMsg.style.display == 'none') {
                idWaitMsg.style.display = 'block'; //表示する。
            } else {
            idWaitMsg.style.display = 'none'; //非表示にする。
            }
        } 
    </script>

③コントロールにjavascriptを貼り付ける

Load時にでも属性を付与しましょう。

ドロップダウンならonchange
DropDownList1.Attributes["onchange"] = "changeVisible(); ";

ラジオボタンならonClick
RadioButtonList1.Attributes["onClick"] = "changeVisible(); ";