UpdataPanelで非同期ポストバック中にローディングアイコンを表示して操作不可にする
UpdataPanelでの非同期ポストバックは、見かけ上は処理しているのかどうかがわかりませんので、ローディングアイコンなどを表示して読み込み中ということをユーザーに知らせると親切です。
UpdateProgressを使う
UpdatePanelのポストバックの開始と終了のイベントを設定するで紹介したように、リクエストの開始と終了のタイミングでローディングアイコンの表示非表示を切り替える方法もありますが、UpdateProgressを使えば簡単に非同期ポストバック中に指定した要素を表示し、ポストバックが完了したタイミングで表示していた要素を非表示にできます。
以下のようにコントロールを置いておくだけで、デフォルトではすべてのUpdataPanelの非同期ポストバック時にProgressTemplate内の要素が表示されます。
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="False" DisplayAfter="0">
<ProgressTemplate>
<div class="loading">
</div>
</ProgressTemplate>
</asp:UpdateProgress>オーバーレイのスタイルで操作不可にする
非同期ポストバック中に画面を操作されたくない場合は以下のようにcssのスタイルでオーバーレイをするようにします。
また、カーソルをwaitにしてロード中であることがわかるようにします。
/*透明なdivで画面全体を覆う*/
.loading {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
opacity: 0;
cursor: wait;
z-index: 100000;
}