2009-10-13 34 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