2009-10-13 61 views
0

我想在updatepanel的工作完成時顯示進度動畫,但不需要重新渲染updatepanel的內容。UpdatePanel和UpdatePanelAnimationExtender問題

如果我設置ChildrenAsTriggers =「false」,則UpdatePanelAnimationExtender的onupdated腳本不會觸發(function onUpdated())。
如果我設置ChildrenAsTriggers =「true」,並點擊顯示div按鈕,更新完成後,updatepanel的內容被重新渲染(div再次被隱藏)。

我的代碼:

<head id="Head1" runat="server"> 
    <title>Untitled Page</title> 
    <script language="javascript" type="text/javascript"> 
     function ShowHide(){ 
      var div = document.getElementById('div2'); 
      if (div.style.display=="none") 
       div.style.display=""; 
      else 
       div.style.display="none"; 


     } 

      function onUpdating(){ 
       // get the update progress div 
       var pnlPopup = document.getElementById("div2");       

      } 

      function onUpdated() { 
       // get the update progress div 
       var pnlPopup = $get("div2"); 
       // make it invisible 

      }  

    </script> 
</head> 
<body> 
<form id="form11" runat="server"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false"> 
     <ContentTemplate> 
     <input id="Button1" onclick="ShowHide();" type="button" value="Show Div (click first)" /> 
     <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Click" /> 
&nbsp;<div id="div1" style="background-color:Red;width:700px;height:200px;"> </div>   
     <div id="div2" style="background-color:Blue;width:700px;height:500px;display:none;"></div> 
     </ContentTemplate> 
    </asp:UpdatePanel>  
    <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="UpdatePanel1" runat="server"> 
     <Animations> 
      <OnUpdating> 
       <Parallel duration="0" >   
        <ScriptAction Script="onUpdating();" /> 
       </Parallel> 
      </OnUpdating> 
      <OnUpdated> 
       <Parallel duration="0">    
       <ScriptAction Script="onUpdated();" /> 
       </Parallel> 
      </OnUpdated> 
     </Animations> 
    </cc1:UpdatePanelAnimationExtender> 

</form> 
</body> 

protected void Click(object sender, EventArgs e) 
    { 
     System.Threading.Thread.Sleep(3000); 
    } 

回答

0

我已經使用PageRequestManage實現了所需的結果,沒有UpdatePanelAnimationExtender或UpdateProgress。

with (Sys.WebForms.PageRequestManager.getInstance()) { 
     add_beginRequest(onUpdating); 
     add_endRequest(onUpdated); 
    } 
0

使用UpdateProgress控件,而不是與UpdatePanelAnimationExtender延伸的UpdatePanel。

<form id="form1" runat="server"> 
    <div> 
     <asp:ScriptManager ID="ScriptManager1" runat="server"> 
     </asp:ScriptManager> 

    </div> 
     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
      <ContentTemplate> 
       <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> 
       <br /> 
       <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="click" /> 
      </ContentTemplate> 
      <Triggers> 
       <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> 
      </Triggers> 
     </asp:UpdatePanel> 
     <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> 
      <ProgressTemplate> 
       &nbsp;<img src="loading.jpg" /> 
      </ProgressTemplate> 
     </asp:UpdateProgress> 
    </form> 


using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 

public partial class Default3 : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 

    } 
    protected void Button1_Click(object sender, EventArgs e) 
    { 
     System.Threading.Thread.Sleep(5000); 
    } 
} 
+0

爲什麼它更好? – dani 2009-10-13 09:22:37

+0

我需要激活onupdating腳本。它有一些計算和定位。 – dani 2009-10-13 09:24:14

+0

並檢查後,它根本不起作用。面板重新渲染...... – dani 2009-10-13 10:03:53