ボタンをクリックした後のインジケータの表示

Question

複数のSQLクエリを実行するボタンをユーザがクリックした後にローディングインジケータを表示したいとします。私は、ボタンのクリックでdivを非表示にしようとしましたが、ボタンの背後にあるすべての作業が完了するまで表示されません。私も成功していないこのソリューションを試しました - http://forums.asp.net/t/1608046.aspx/1

何か提案がありますか？上記のリンクソリューションを使用している場合

code

<asp:Button ID="loadButton" OnClientClick="ShowDiv()" runat="server" 
onclick="loadButton_Click" Text="Go" /> 


<script type="text/javascript"> 
    function ShowDiv() 
    {setTimeout('document.getElementById("updatediv").style.display = "inline";', 500);}} 
</script> 


<div ID="updatediv" runat="server" > 
<img src="Images/ajax-loader.gif" /> Updating .... 
</div> 

code

私は次のエラーを取得する：

は**これはトリックを行うように見えた

code

<script type="text/javascript" language="javascript"> 
function ShowDiv() 
    $('#updatediv').show() } 
</script> 

code

Answer 1

あなたは、クライアント側でのショーのdiv要素ではなく、サーバ側を持っている必要があります。 ASPボタンには、サーバー側のClickイベントに加えて、OnClientClickが便利です。

これはもちろん、あなたが見せてくれるリンクです。あなたがそれに従っていれば、実行するポストバックを完了するのを待つべきではありません。

Answer 2

CSS：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
     <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
      <ContentTemplate> 
       <table runat="server" border="1" width="98%" align="center"> 
       <tr><td></td></tr> 
       </table> 
       <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> 
          <ProgressTemplate> 
           <img src="Images/Loading.gif" /><br /><center><font color=red>Processing Data...</font></center> 
          </ProgressTemplate> 
         </asp:UpdateProgress> 
       </ContentTemplate> 
      <Triggers> 
       <asp:AsyncPostBackTrigger ControlID="btnprocess" /> 
      </Triggers> 
     </asp:UpdatePanel> 

をそして、あなたはシンプルなjQueryのを使用している場合、あなたがする必要があるいくつかのタイマーに

System.Threading.Thread.Sleep(3000); 

を与える：

<style type="text/css"> 
     #UpdateProgress1 { 
      top:450px; left: 450px; 
      position: absolute; 
      background-color: #C3E1FF; 
      background-repeat: repeat-x; } 
</style> 

が示されているようscriptMananger、のUpdatePanelを追加ajaxの方法とここであなたはajaxでどうすべきかです：

$('#ShowDiv') 
    .hide() // hide 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
});